@font-face{
	font-family: "Nunito", sans-serif;
	font-weight: 400;
	src: url(nunito-regular.ttf);
}

@font-face{
	font-family: "Nunito", sans-serif;
	font-weight:300;
	src:url(nunito-light.ttf);
}

@font-face{
	font-family: "Nunito", sans-serif;
	font-weight: 600;
	src: url(nunito-semibold.ttf);
}


:root{
	--primary-color:#000000 ;
	--dark-color:#e95661;
	--light-color: #f0cee2;
}

body{
	color: var(--primary-color);
	font-family:"Nunito", sans-serif;
	font-weight: 400;
	font-size: 35px;
	line-height:1.3;
	margin-top: 144px;

	overflow-y: scroll;
	overflow-x: hidden;
}

header,section, footer{
	padding-left: 1vw;
	padding-right: 1vw;
}

.wrapper{
	max-width:100%;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}

h1{
	font-weight:600;
}

header{
	font-size: 18px;
	font-weight:600;
	padding-top:60px;
	padding-bottom:60px;
	background: #f0cee2;
	background: linear-gradient(0deg, rgba(169,122,245,0) 0%, #f0cee2 100%);
	position:fixed;
	top:0;
	left: 0;
	width:100%;
	z-index:3;
}

h1 {
	color: black;
}

header .flex-container{
	display: flex;
	justify-content: space-between;
	
}

.tara:hover{
	font-weight:600;
	border-bottom: 2px solid var(--light-color);
}

header ul{
	display:flex;
}

header ul li{
	margin-left:40px;
	border-bottom: 2px solid transparent;
}

header ul li:hover{
	border-bottom: 2px solid var(--light-color);
}

header a{
	text-decoration:none;
	color: var(--primary-color);
}

.intro{
	padding-top: 30px;
	padding-bottom:60px;
}

.intro article{
	padding-top: 50px;
    padding-right: 40px;
    padding-bottom: 80px;
    padding-left: 60px;
    text-align: center;
}

.intro h1{
	margin-bottom: 16px;
}

.intro a{
	color: var(--light-color);
}

.intro a.superhi{
	text-decoration: none;
}

.intro a.superhi:hover {
	text-decoration: underline;
}

.intro p{
	margin-left:100px;
}

.static {
	position: absolute;
	right: 1px;
	top: 155px;
	width: 20%;
	height: 50%;
}

.animati0n {
	position: absolute;
	right: 1px;
	top: 155px;
	width: 23%;
	height: 41%;

	-webkit-animation: rotation 25s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

.filters{
	margin-top: 16px;
  margin-bottom: 56px;
}

.filters ul{
	display:flex;
	margin-left: 1500px;
}

.filters ul li{
	margin-right:40px;
}

.filters ul li a {
	text-decoration:none;
	color: var(--primary-color);
	font-size: 24px;
}

.filters ul li a:hover {
	border-bottom: 2px solid var(--light-color);
}

.filters ul li a.selected{
 color: var(--light-color);
 font-weight:600;
}

.grid-container{
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}

figure{
	position:relative;
}

figure img{
	width: 100%;
}

figure:before{
	content:"";
	width: 100%;
	height: 100%;
	position:absolute;
	background-color: var(--light-color);
	mix-blend-mode: color;
	transition: opacity 0.5s ease;
}

figure:hover:before{
	opacity:0;
}


footer{
	width: auto;
	background: #f0cee2;
	background: linear-gradient(0deg, #f0cee2 0%, rgba(169,122,245,0) 100%);
	text-align: center;
}

footer .flex-container{
	justify-content:space-between;
	text-align: center;
}

footer a{
	text-decoration: none;
	color: var(--primary-color);
	font-size: 24px;
	text-align: center;
}

footer a:hover{
	border-bottom: 2px solid var(--dark-color);
}

footer p{
	text-align: center;
	font-size: 24px;
}







@media only screen and (max-width: 1920px) {
  body{
	color: var(--primary-color);
	font-family:"Nunito", sans-serif;
	font-weight: 400;
	font-size: 35px;
	line-height:1.3;
	margin-top: 144px;

	overflow-y: scroll;
	overflow-x: hidden;
}

h1{
	font-weight:600;
}

header{
	font-size: 18px;
	font-weight:600;
	padding-top:60px;
	padding-bottom:60px;
	background: #f0cee2;
	background: linear-gradient(0deg, rgba(169,122,245,0) 0%, #f0cee2 100%);
	position:fixed;
	top:0;
	left: 0;
	width:100%;
	z-index:3;
}

header ul li:hover{
	border-bottom: 2px solid var(--light-color);
}

.intro{
	padding-top: 30px;
	padding-bottom:60px;
}

.intro article{
	padding-top: 50px;
    padding-right: 40px;
    padding-bottom: 80px;
    padding-left: 60px;
    text-align: center;
}

.intro p{
	margin-left:100px;
}

.static {
	position: absolute;
	right: -10px;
	top: 250px;
	width: 25%;
	height: 35%;
}

.filters{
	margin-top: 16px;
  margin-bottom: 56px;
}

.filters ul{
	display:flex;
	margin-left: 700px;
}

.filters ul li{
	margin-right:40px;
}

}