/* fonts */
/* Geosans Light = body text */
@font-face {
	font-family: geosans;
	src: url("./fonts/GeosansLight.ttf");
}
/* Garet = header text*/
@font-face {
	font-family: garet;
	src: url("./fonts/Garet-Book.ttf");
} 
@font-face {
	font-family: garet;
	src: url("./fonts/Garet-Heavy.ttf");
	font-weight: bold;
} 
/* Sansation = label text*/ 
@font-face {
	font-family: sansation;
	src: url("./fonts/Sansation_Regular.ttf");
} 
@font-face {
	font-family: sansation;
	src: url("./fonts/Sansation_Bold.ttf");
	font-weight: bold;
}

/* animations */

@keyframes glow {
	0%		{filter: brightness(100%);}
	25%		{filter: brightness(100%);}
	50%		{filter: brightness(30%);}
	100%	{filter: brightness(30%);}
}
@keyframes fuzzy {
	0%		{filter: blur(0);}
	25%		{filter: blur(0);}
	50%		{filter: blur(15px);}
	100%	{filter: blur(15px);}
}
@keyframes paint {
	0%		{filter: grayscale(0)}
	25%		{filter: grayscale(0);}
	50%		{filter: grayscale(80%);}
	100%	{filter: grayscale(80%);}
}
@keyframes scroll {
	0%		{filter: sepia(0)}
	25%		{filter: sepia(0);}
	50%		{filter: sepia(100%);}
	100%	{filter: sepia(100%);}
}

@keyframes modal {
	from {opacity: 0%}
  	to {opacity: 100%}
}

/* general */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	scroll-behavior: smooth;
}

body{
	font-family: geosans;
	background: #abba97;
	color: #5b7555;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* nav bar */

nav{
	font-family: sansation;
	font-weight: bold;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
nav ul li{
	display: inline-block;
	list-style-type: none;
	margin: 10px 10px;
	transition: 0.8s;
}
nav ul li:hover{transform: scale(1.3);}
nav ul li a{
	color: #86a17b;
	text-decoration: none;
	font-size: 24px;
	position: relative;
	transition: 0.5s;
}
.activenav{color: #61885a;}

/* nav bar line effect */
nav ul li a::after{
	content: '';
	width: 0;
	height: 2px;
	background: #6d8369;
	position: absolute;
	left: 0;
	bottom: -3px;
	transition: 0.5s;
}
nav ul li a:hover::after{width: 100%;}
.activenav:hover::after{width: 0%;}

/* nav bar text effect */
nav ul li a::before{
	font-size: 0;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: -20px;
	transition: 0.5s;
}
nav ul li a:hover::before{font-size: 14px;}
.home::before{content: 'home';}
.projects::before{content: 'projects';}
.articles::before{content: 'articles';}
.photos::before{content: 'photos';}
.other::before{content: 'other';}
.about::before{content: 'about';}
.example::before{content: 'example';}
.activenav:hover::before{font-size: 0;}

/* header */

.header{
	font-family: garet;
	padding-top: 15px;
	padding-left: 50px;
	margin-top: 20px;
	font-size: 30px;
}
.header h3{font-size: 20px;	transition: 0.8s;}
.header h1{font-size: 36px;	margin-top: 20px;}
.header h1 span{color: #738164; transition: 0.5s; display: inline-block;}
.header:hover h3{color: #6f875f;}
/* .header:hover h1 span{font-size: 48px; margin: 0 10px;} */
.header:hover h1 span{transform: scale(1.2); margin: 0 15px;}

/* sections */

.section{padding: 50px; padding-bottom: 20px;}
.section.less-padding{padding-bottom: 15px;}
.section h2,
.bx-section h2{transition: 0.5s;}
.section h2:hover,
.bx-section h2:hover{transform: translate(20px, -10px); color: #6f875f}

/* boxed sections */

.bx-section{
	margin: 30px;
	padding: 10px;
	border-radius: 20px;
	background-color: #b6c4a4;
	transition: 0.5s;
	justify-content: center;
}
.bx-section:hover{transform: scale(1.02); background-color: #cdddbd;}
.bx-section h2{margin-top: 15px; margin-left: 10px;}

/* center */

.center{text-align: center;}

/* images */

.picture{
	position: relative;
	color: #cdd8be;
	transition: 0.5s;
}
.image{
	width: 100%;
	filter: brightness(50%);
	border-radius: 25px;
	transition: 0.5s;
}
.imagetxt{
	font-family: 'garet';
	position: absolute;
	transition: 0.75s;
	top: 50%;
	left: 50%;
	text-align: center;
}
.imagetxt h3, 
.imagetxt p{transform: translate(-50%, -50%); transition: 0.75s;}
.imagetxt h3{font-size: 45px;}
.imagetxt p{font-size: 20px;}
/* pop */
.imagetxt.pop h3, 
.imagetxt.pop p{font-size: 0;}
.imagetxt.pop.reverse h3{font-size: 45px;}
.imagetxt.pop.reverse p{font-size: 20px;}
/* fade */
.imagetxt.fade h3, 
.imagetxt.fade p{filter: opacity(0);}
.imagetxt.fade.reverse h3, 
.imagetxt.fade.reverse p{filter: opacity(100%);}
/* swipe */
.imagetxt.swipe.reverse h3{transform: translate(-150%, -50%); text-align: left;}
.imagetxt.swipe.reverse p{transform: translate(50%, -30%); text-align: right;}
/* HOVER */
.picture:hover{padding-left: 0; padding-right: 0;}
.picture:hover .image{border-radius: 0; filter: brightness(70%);}
/* slide */
.picture:hover .slide.right{left: 75%; text-align: right;}
.picture:hover .slide.left{left: 25%; text-align: left;}
/* pop */
.picture:hover .imagetxt.pop h3{font-size: 45px;}
.picture:hover .imagetxt.pop p{font-size: 20px;}
.picture:hover .imagetxt.pop.reverse h3, 
.picture:hover .imagetxt.pop.reverse p{font-size: 0;}
/* fade */
.picture:hover .imagetxt.fade h3, 
.picture:hover .imagetxt.fade p{filter: opacity(100%);}
.picture:hover .imagetxt.fade.reverse h3, 
.picture:hover .imagetxt.fade.reverse p{filter: opacity(0);}
/* swipe */
.picture:hover .imagetxt.swipe h3{transform: translate(-150%, -50%); text-align: left;}
.picture:hover .imagetxt.swipe p{transform: translate(50%, -30%); text-align: right;}
.picture:hover .imagetxt.swipe.reverse h3{transform: translate(-50%, -50%); text-align: center;
}
.picture:hover .imagetxt.swipe.reverse p{transform: translate(-50%, -30%); text-align: center;}
/* fly */
.picture:hover .imagetxt.fly h3{transform: translate(-50%, -300%);}
.picture:hover .imagetxt.fly p, 
.picture:hover .imagetxt.fly.reverse h3{transform: translate(-50%, 220%);}
.picture:hover .imagetxt.fly.reverse p{transform: translate(-50%, 180%);}
/* plato */
.picture:hover .imagetxt.plato.left{left: 25%; text-align: left;}
.picture:hover .imagetxt.plato.right{left: 60%;	text-align: right;}
/* top */
.picture:hover .imagetxt.plato.left.top h3, 
.picture:hover .imagetxt.plato.right.top h3{transform: translate(-50%, -250%);}
.picture:hover .imagetxt.plato.left.top p, 
.picture:hover .imagetxt.plato.right.top p{transform: translate(-50%, -600%);}
/* bottom */
.picture:hover .imagetxt.plato.left.bottom h3, 
.picture:hover .imagetxt.plato.right.bottom h3{transform: translate(-50%, 150%);}
.picture:hover .imagetxt.plato.left.bottom p, 
.picture:hover .imagetxt.plato.right.bottom p{transform: translate(-50%, 300%);}

/* multipicture */

.multipicture{padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;}
/* cycle */
.multipicture.cycles{display: flex;}
.multipicture .cycle1,
.multipicture .cycle2,
.multipicture .cycle3,
.multipicture .cycle4{
	width: 50%;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.multipicture .cycle2{animation-delay: 0.5s;}
.multipicture .cycle3{animation-delay: 1s;}
.multipicture .cycle4{animation-delay: 1.5s;}
/* glow */
.multipicture.glow .cycle1,
.multipicture.glow .cycle2,
.multipicture.glow .cycle3,
.multipicture.glow .cycle4{filter: brightness(30%);	animation-name: glow;}
/* fuzzy */
.multipicture.fuzzy .cycle1,
.multipicture.fuzzy .cycle2,
.multipicture.fuzzy .cycle3,
.multipicture.fuzzy .cycle4{filter: blur(15px);	animation-name: fuzzy;}
/* paint */
.multipicture.paint .cycle1,
.multipicture.paint .cycle2,
.multipicture.paint .cycle3,
.multipicture.paint .cycle4{filter: grayscale(80%);	animation-name: paint;}
/* scroll */
.multipicture.scroll .cycle1,
.multipicture.scroll .cycle2,
.multipicture.scroll .cycle3,
.multipicture.scroll .cycle4{filter: sepia(100%); animation-name: scroll;}
/* slide */
.multipicture .slide1, 
.multipicture .slide2{
	width: 100%;
	transition: 0.5s;
	filter: brightness(30%);
	z-index: 0;
}
.multipicture .slide1{transform: translate(-50%, 0); position: absolute;}
.multipicture .slide2{transform: translate(50%, 0);}
.multipicture .slide1:hover, 
.multipicture .slide2:hover{
	transform: translate(0, 0);
	left: 0;
	border-radius: 0;
	filter: brightness(85%);
	z-index: 3;
}
/* swipe */
.multipicture .swipe1, 
.multipicture .swipe2, 
.multipicture .swipe3, 
.multipicture .swipe4, 
.multipicture .swipe5{
	width: 90%;
	transition: 0.8s;
	border-radius: 0;
	filter: brightness(30%);
	z-index: 0;
}
.multipicture .swipe1{transform: translate(-10%, 0); border-radius: 20px; position: absolute;}
.multipicture .swipe2{transform: translate(-30%, 0); position: absolute;}
.multipicture .swipe3{transform: translate(-50%, 0); position: absolute;}
.multipicture .swipe4{transform: translate(-70%, 0); position: absolute;}
.multipicture .swipe5{transform: translate(-90%, 0);}
.multipicture .swipe1:hover, 
.multipicture .swipe2:hover, 
.multipicture .swipe3:hover,
.multipicture .swipe4:hover,
.multipicture .swipe5:hover{
	transform: translate(-1%, 0);
	left: 0;
	border-radius: 20px;
	filter: brightness(85%);
	z-index: 3;
}

/* words */

.words{align-items: center;}
.words .word{
	font-size: 50px;
	font-family: 'sansation';
	transform: translate(0, 0);
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.words .word.right{transition: 0.6s;}
.words .word.left{transition: 0.8s;}
.words .word.w1 h3{transition: 0.6s;}
.words .word.w2 h3{transition: 0.8s;}
.words .word.w3 h3{transition: 1.0s;}
.words .word.w4 h3{transition: 2.0s;}
.words .word.w5 h3{transition: 1.0s;}
.words .word.w6 h3{transition: 1.5s;}
.words .word.w7 h3{transition: 1.0s;}
.words .word.w8 h3{transition: 3.0s;}
.words .word.w9 h3{transition: 5s;}
/* HOVER */
.words .right:hover{transform: translate(10%, 0);}
.words .left:hover{transform: translate(-10%, 0);}
.words .word:hover h3{font-size: 60px;}
.words .word.w1:hover h3{color: #595e88; rotate: 30deg;}
.words .word.w2:hover h3{color: #8f5a5a; rotate: 180deg; letter-spacing: 20px;}
.words .word.w3:hover h3{color: #774a71; rotate: -1515deg; letter-spacing: 10px;}
.words .word.w4:hover h3{color: #4b9185; rotate: -50deg; letter-spacing: 30px;}
.words .word.w5:hover h3{color: #735a8f; rotate: 2222deg; letter-spacing: 25px;}
.words .word.w6:hover h3{color: #a18d4a; rotate: -111deg; letter-spacing: 12px;}
.words .word.w7:hover h3{color: #4b9185; rotate: -1234deg;	letter-spacing: 15px;}
.words .word.w8:hover h3{color: #735a8f; rotate: 123456deg; letter-spacing: 30px;}
.words .word.w9:hover h3{color: #a18d4a; rotate: 88888888deg; letter-spacing: 50px;}

/* floats (lists + tabs + cards)*/

.float{
	background-color: #b6c4a4;
	border-radius: 20px;
	color: #73846a;
	text-decoration: none;
	/* margin: 15px; */
	margin: 0.75%;
	padding: 20px;
	transition: 0.5s;
	flex-basis: 30%;
}
.float:hover{
	background-color: #cdddbd;
	transform: translateY(-20px) rotate(-5deg);
	scale: 1.02;
	box-shadow: 0 0 10px rgba(180, 180, 180, 0.2);
}
.bx-section:hover .float{background-color: #d4e0c5;}
.bx-section:hover .float:hover{background-color: #cdddbd; box-shadow: 0 0 10px rgba(50, 50, 50, 0.1);}

/* txt */

.txt{
	padding: 15px;
	transition: 0.5s;
	text-decoration: none;
	color: #5b7555;
}
.txt:hover{transform: scale(1.05);}

/* lists */

.lists{margin-top: 15px; display: flex; flex-wrap: wrap;}
.list{flex-basis: 20%;}
.list h3{margin-bottom: 5px;}
.big-list{flex-basis: 42.25%;}

/* tabs */

.tabs{margin-top: 15px; display: flex; flex-wrap: wrap;}
.tab{flex-basis: 40%;}
.tab p{margin-bottom: 15px;}
.tab img{
	border-radius: 15px;
	filter: brightness(80%);
	transition: 0.5s;
	width: 100%;
}
.tab h3 button{
	color: #5b7555;
	background: none;
	border: none;
	cursor: help;
	scale: 0.7;
	transition: 0.5s;
}
.tab:hover h3 button{scale: 0.8;}
.tab:hover img{border-radius: 15px;	filter: brightness(100%);}
.tab a:hover img{border-radius: 25px; transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)}
.tab.float:hover{rotate: -1 -1 -1 2deg;}

/* cards */

.cards{margin-top: 15px; display: flex;	flex-wrap: wrap;}
.card{flex-basis: 30%;}
.card h3{margin-bottom: 8px;}

/* timeline */

.timeline{margin-top: 20px;}
.point{	margin: 15px; margin-bottom: 25px; transition: 0.8s;}
.point i{
	display: inline-block;
	transition: 0.35s;
	transform: translateY(-5px);
	margin-right: 10px;
}
.point .ptext{display: inline-block;}
.point:hover{transform: translateX(2%); scale: 1.02;}
.point:hover i{margin-right: 15px; font-size: 20px;}

/* gallery */

.section.gallery{display: flex;	flex-wrap: wrap;}
.section.gallery h2{padding-bottom: 30px; flex-basis: 100%;}
.section.gallery img{
	width: 40%;
	flex-basis: 40%;
	margin: 20px;
	padding: 0;
	border-radius: 15px;
	filter: brightness(60%);
	transition: 0.5s;
}
.section.gallery img:hover{transform: rotate(2deg) scale(1.05); filter: brightness(100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}

/* modals */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #000000; /* fallback */
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-body {padding: 2px 16px; margin-top: 20px; margin-bottom: 20px;}
.modal-body p {font-size: 18px;}
.modal-body img{margin-top: 20px; border-radius: 20px;	width: 70%; transition: 0.5s;}
.modal-body img:hover{transform: translateY(-5px); scale: 1.03;}
.modal-header {padding: 2px 10px; color: #748c6a;}
.modal-header h2{transition: 0.5s;}
.modal-header h2:hover{color:#64775b; scale: 1.1; transform: translateX(5%);}
.modal-header a {
	color: #748c6a;
	text-decoration: none;
	float: right;
	font-size: 20px;
	font-weight: bold;
	transition: 0.5s;
	padding-right: 25px;
}
.modal-header a img {
	padding-top: 5px;
}
.modal-header a:hover {color: #64775b; scale: 1.1;}
.modal-content {
	background-color: #aeb79b;
	margin: 10% auto;
	padding: 15px;
	/* border: 1px solid #abc1ad; */
	border-radius: 15px;
	width: 60%;
	animation-name: modal;
	animation-duration: 0.4s;
}
.close {
	color: #748c6a;
	float: right;
	font-size: 28px;
	font-weight: bold;
	transition: 0.3s;
}
.close:hover,
.close:focus {
	color: #64775b;
	text-decoration: none;
	cursor: pointer;
	scale: 1.1;
} 

/* slideshow */
.slideshow-img {
	position: relative;
	margin: auto;
}

.slides-img {
	display: none;
}

.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: #748c6a;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
	background-color: #cdddbdcc;
}

.dot {
	cursor: pointer;
	height: 8px;
	width: 8px;
	margin: 0 2px;
	background-color: #748c6a;
	border-radius: 37%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .dot:hover {
	background-color: #64775b;
}
.spot {
	cursor: pointer;
	color: #748c6a;
	display: inline-block;
	transition: 0.6s ease;
}
.spot:hover {
	color: #64775b;
	scale: 1.2;
}

/* icons and links */

.inline{display: inline-block;}

.icons{margin-top: 15px;}
.icons a{
	text-decoration: none;
	font-size: 48px;
	margin: 5px 10px;
	color: #7e9275;
	display: inline-block;
	transition: 0.5s;
}
.icons:hover a{transform: scale(1.2); margin: 5px 15px;}
.icons a:hover{
	color: #6d8667;
	transform: translateY(-5px) scale(1.5);
	/* margin: 5px 20px; */
}

.links{margin-top: 15px;}
.links a{
	text-decoration: none;
	font-size: 24px;
	margin: 5px 10px;
	color: #7e9275;
	display: inline-block;
	transition: 0.5s;
}
.links:hover a{transform: scale(1.02); margin: 5px 15px;}
.links a:hover{
	color: #6d8667;
	transform: translateY(-5px) scale(1.05);
	/* margin: 5px 20px; */
}
.lemmy{
	transform: translateY(6px)
}

/* footer */

.footer{
	font-family: sansation;
	width: 100%;
	font-size: 20px;
	text-align: center;
	padding: 25px;
	background: #68755b;
	font-weight: 360;
	margin-top: 20px;
	color: #92ad8d;
	transition: 0.5s;
}
.footer p a{color: #b6b590; text-decoration: none;}
.footer i{color: #b6b590; transition: font-size 0.5s, margin 0.5s, color 1.2s;}
.footer:hover{font-size: 24px;}
.footer:hover i{font-size: 32px; margin: 0 8px; color: #a1b474;}