@font-face{
	font-family:inter;
	src:url("../font/inter/inter-regular.ttf");
}
@font-face{
	font-family:inter-semibold;
	src:url("../font/inter/inter-semibold.ttf");
}
@font-face{
	font-family:inter-bold;
	src:url("../font/inter/inter-bold.ttf");
}
html{


}
*{
	box-sizing:border-box;
	outline:0;
	font-size:20px;
	line-height:145%;
}
a{
	text-decoration:none;
	color:inherit;
	margin:0;
}
h2{
	font-size:1.3rem;
}
body{
	margin:0;
	background:#F1EFEB;
	color:#0E0E0E;
	transition:background 0.2s,color 0.2s;
	font-family:inter-semibold;
}
header{
	width:100%;
	display:flex;
	padding:15px;
	padding-left:0;
	padding-right:0;
	margin-bottom:20px;

}
#headerText {
	margin:auto;
	margin-left:15px;
	font-family:inter-bold;
}
#headerText span{
	font-size:30px;
}
#dot {
	width:9px;
	height:9px;
	border-radius:50%;
	background:#FFAA00;
	display:inline-block;
}
.cta{
	margin:auto;
	margin-right:15px;
	background:#0E0E0E;
	color:#F1EFEB;
	padding:13px;
	border-radius:14px;
	border:none;
	font-size:1rem;
	font-family:inter-bold;
	cursor:pointer;
}
#menuButton{
	margin:auto;
	margin-right:15px;
	font-size:medium;
	font-family:inter-semibold;
	z-index:10;
	height:55px;
	padding:0;
	overflow:hidden;
	position:fixed;
	right:0px;
	top:15px;



}
#menuButton div{
	height:55px;
	line-height:55px;
	text-align:center;
	white-space:nowrap;
	padding:13px;	
	padding-top:0;
	padding-bottom:0;
	overflow:hidden;
}
#menuButton div:nth-child(2) {
	font-size:300%;
	font-family:inter;
	padding:0;
}

section{
	padding:20px;
	padding-top:0;
}
#landing{
	display:flex;
	flex-wrap:wrap;
	overflow:hidden;
}

#hugeCont{
	display:none;
	transform:rotate(180deg);
}
#huge{
	font-size:100px !important;
	transform:rotate(-90deg);
	margin:auto;
}
#landing h1{
	margin:0;
	font-size:40px;
}
#p{
	font-family:inter;
	margin-top:15px;
	margin-bottom:15px;
	font-size:100%;
}
section h2{
	margin:0;
	margin-bottom:20px;
}

.sparkle {
	width:25px;
	aspect-ratio:1;
	background:black;
	border-radius:50px;

}
#cardContainer{
	perspective: 800px;
}
.card{
	width:calc(100% - 30px);
	aspect-ratio:0.71;
	border-radius:20px;
	margin:auto;
	margin-bottom:30px;
	position:relative;
	perspective: 1000px;
	max-width:300px;

}
.sparkleTop{
	display:flex;
	justify-content:space-between;
}
.cardFront{
	position:absolute;
	width:100%;
	top:0;
	left:0;
	aspect-ratio:0.71;
	background:white;
	backface-visibility:hidden;
	border-radius:20px;
	margin:auto;
	margin-bottom:30px;
	display:flex;
	flex-direction:column;
	text-align:center;
	padding:20px;
	transition:all 0s;
}
.card h3{
	margin:auto;
}

.cardBack {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	aspect-ratio:0.71;
	background:#FFEECB;
	z-index:-1;
	border-radius:20px;
	margin:auto;
	margin-bottom:30px;
	display:flex;
	flex-direction:column;
	text-align:center;
	padding:30px;
	transition:all 0s;
	border:solid;
	transform:rotateY(-180deg);
	backface-visibility:hidden;

}
.card:hoer .cardBack{
	transform:rotateY(0deg);
}
.card:hovr .cardFront {
	transform:rotateY(180deg);
}

aside{
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	right:0;
	background:#0e0e0e;
	color:#f1efeb;
	z-index:9;
	overflow:scroll;
	display:flex;
	top:100%;
}
#side{
	padding:50px;
	margin:auto;
	width:100vw;
	display:flex;
	flex-direction:column;
	gap:15px;
}
#side a{
	display:block;
	font-size:calc(20px + 7vw);
}
#work{
	height:1700px;
	overflow:visible;
	padding:0;

}
#sticky{
	position:sticky;
	top:0;
	left:0;
	height:100vh;
	overflow:hidden;
}
#sticky h2{
	margin-left:20px;
	font-size:2rem;

}
#horizontal{
	display:flex;
	overflow:hidden;
	padding-right:33vw;
	padding-left:33vw;
	height:calc(100vh - 100px);
	perspective:700px;
}

.imgContainer{
	width:280px;
	height:200px;
	overflow:hidden;
	flex-shrink:0;
	margin:auto;
	margin-left:15px;
	margin-right:15px;
}
.imgContainer img{
	height:100%;
	width:100%;
	object-fit:cover;
}
#contact{
	
}

#finalSec {
	overflow:hidden;
	margin-bottom:0;
	margin-top:20px;
	padding:0;
}

#illustrationsCont{
	width:100%;
	aspect-ratio:1.12;
	max-height:450px;
	overflow:visible;
	position:relative;
	display:flex;
	margin:0;
	margin-bottom:10%;
}
#illustrationsCont img{
	position:absolute;
}
.wing{
	top:10%;
	width:60%;
	max-width:300px;
}
#illustrationsCont img:nth-child(3){
	left:50%;
	width:50%;
 	transform:translateX(-50%);
 	max-width:250px;
 	bottom:0;
}
#leftWing{
	right:50%;
	transform:translateX(50%) scale(0.7) rotate(-135deg);
}
#rightWing{
	left:50%;
	transform:translateX(-50%) scale(0.7) rotate(135deg);
}
footer{
	background:#202123 ;
	color:white;
	margin:0;
	padding:20px;
	padding-top:0;
	position:relative;
	font-size:0.7rem;
}
footer *{
	font-size:0.7rem;
	color:#F1EFEB;
}
#footerCont{
	display:flex;
	gap:40px;
	max-width:300px;
}
.linksGroup a{
	display:block;
	
}
#footerCenter{
	text-align:center;
	display:flex;
	flex-direction:column;
	margin-top:50px;
}

svg{
	overflow:visible;
	width:100%;
	z-index:1;
	margin:0;
	position:relative;
	left:0;
	position:absolute;
	pointer-events: none;
}
form{
	width:100%;
	max-width:400px;
	margin:auto;
	display:flex;
	flex-direction:column;
}
form input{
	margin:auto;
	width:100%;
	background:white;
	margin-bottom:20px;
	border:solid 1px black;
	border-radius:5px;
	padding:10px;
	border-right:solid 2px black;
	border-bottom:solid 2px black;
}
form textarea{
	margin:auto;
	width:100%;
	background:white;
	margin-bottom:20px;
	border:solid 1px black;
	border-radius:5px;
	padding:10px;
	font-family:inter;
	border-right:solid 2px black;
	border-bottom:solid 2px black;
	resize:none;
	
}
form .cta{
	margin:auto;
	width:100%;
}