@charset "UTF-8";
/*general*/
body{
	background-color:#F8F8F8;
	font-family: 'Rubik', sans-serif;
	font-size: 32px;
	width: 100%;
	margin: auto;

}


/* FRONT PAGE
HEADER HERE */

.main-header { 
	width: 100%;
	margin: auto;
	padding: 25px;
 }

 .navi {
 	width: 60%;
 	margin:auto;
 	display: flex;
  	justify-content: center;
  	align-items: center;
 }

.nav-link{
	padding-left: 50px;
	padding-top: 10px;
	padding-right: 50px;
	display: inline-block;
		font-weight: 500;
		font-size: 0.6em;
 }

 a.nav:link, .nav:visited, .nav:hover{ color:#fdaf3f;
 text-decoration: none;}


 /* INTRO HERE */

 #intro{
 	width: 60%;
 	margin:auto;
 	padding-top: 50px;
 	padding-bottom: 20px;
 	display: block;
  	justify-content: center;
  	align-items: center;
 }

  #about {
 	font-weight: 400;
 	font-size: .6em;
 	line-height: 25px;
 	text-align: center;
 }

 h1{
 	text-align: center;
 	font-weight: 700;
 	font-size: 1.5em;
 	color:#fdaf3f;
 	padding-bottom: 10px;
 }
 /* ENDS HERE*/


 /* MAIN HERE */

.project{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 70px;
	padding: 10px 0px 10px 0px;
	justify-content: center;
	align-items: center;
}

/*pages here*/

.description{
	display: block;
	margin:auto;
	padding:50px 10px 20px 0px;
}

h2{
	font-size: 1.2em
	font-weight:700;
	margin-bottom: 0px;
	line-height: 0.2;

}

h3{
	font-size: .7em;
	font-weight: 300;
	font-style: italic;
	margin-top: 0px;
	color: #999999;
}

p{
	margin: auto;
	margin-bottom: 0px;
	padding: 20px 10px 40px 0px;
	font-size: .55em;
	font-weight: 300;
}

h4 {
padding-top: 30px;
padding-bottom: 10px;
font-size: .6em;
font-weight: 300;
}


.pictures1{
	width: 100%;
	height: 450px;
	margin: 25px 0px 50px 0px;
	border: none;
	overflow: hidden;
	border-radius: 15px;
	 }

.pictures1 a{display: block;}

.pictures1 img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pictures1 img:hover {opacity: 0.8;}

.pictures2{
	width: 100%;
	height: 500px;
	display:flex;
	margin: 15px auto;
	border: none;
	overflow: hidden;
	border-radius: 15px;
	 }

.pictures2 img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box {
  display: flex;
  gap: 16px;
}

.pictures-square {
  flex: 1;
  margin-top: 15px;
  height: 400px;
 	overflow: hidden;
 	border-radius: 15px;
}

.pictures-square img{
  width: 100%;
  height: 100%;
  object-fit: cover;

}
iframe{
	display: block;
	margin: auto;

}


 /* FOOTER HERE */
footer{
	position: relative;
	margin:auto;
	align-items: center;
	width: 50%;
	padding-bottom: 20px;

}

i {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	color: #fdaf3f;
}

 .icon{
 	display: flex;
 	justify-content: center;
 	padding:5px;
 	font-size: .7em;
 	font-weight: 200;
 }

 .legals{
 	padding:5px;
 	font-size: .4em;
 	font-weight: 200;
 	opacity: 0.5;
 	text-align: center;
 }



  /* MOBILE RESPONSE HERE */
 @media (max-width: 600px) {

.nav-link{
	margin:25%;
	margin-top: auto;
	margin-bottom: auto;
		font-weight: 500;
		font-size: .7em;
 }
 #intro{
 	width: 95%;
 	text-wrap:pretty;
 }

 .project{
 	width: 100%;
 	margin-top: 0px;
 }
.pictures1{
	width: 95%;
	height:100%;
	margin-left: auto;
	margin-right: auto;
}

.pictures2{
	width: 95%;
	height:100%;
	margin-left: auto;
	margin-right: auto;
}

iframe{
	width: 100%;
	height: 50vw;
}


 .description{
 	margin:10px;
 }


h2, h3 , h4{
	text-align: center;
}

p{
	text-align: center;
	text-wrap: pretty;
}


.pictures-square {
  flex: 1;
  height: 50vw;
 	overflow: hidden;
 	border-radius: 15px;
}

}