@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;
}

.dash{
	display:inline-block;
	background-color: #f0cee2;
	vertical-align: middle;
	width: 80px;
	height: 4px;
	margin-right: 20px;
}

header{
	font-size: 18px;
	font-weight:600;
	padding-top:24px;
	padding-bottom:34px;
	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: 60px;
	padding-bottom:60px;
}

.intro article{
	max-width: 810px;
}

.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;
}

.animati0n {
	position: absolute;
	right: 1px;
	top: 155px;
	width: 35%;
	height: 70%;

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

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

.portfolio{
	padding-top:60px;
	padding-bottom: 60px;
	margin-bottom: 60px;
}

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

.filters ul{
	display:flex;
}

.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;
}

h2 span {
	width: 250px;
	display: inline-block;
	flex: 0 0 auto;
}

div h2 {
	display: flex;
}

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

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{
	padding-top: 80px;
	padding-bottom: 80px;
	background: #f0cee2;
	background: linear-gradient(0deg, #f0cee2 0%, rgba(169,122,245,0) 100%);
}
footer .flex-container{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}

footer ul{
	margin-left:100px;
}

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

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

footer p{
	font-size: 24px;
}


@media (max-width: 1024px){
	body {
			color: var(--primary-color);
			font-family:"Nunito", sans-serif;
			font-weight: 400;
			font-size: 20px;
			line-height:1.3;
			margin-top: 144px;
		}

	.animati0n {
		top: 255px;
		height: 50%;
		width: 35%;
	}

	.filters ul li a {
		font-size: 20px;
	}

	footer .flex-container li a {
		line-height: 2;
	}

}


@media (max-width: 428px) {
	body {
			color: var(--primary-color);
			font-family:"Nunito", sans-serif;
			font-weight: 400;
			font-size: 20px;
			line-height:1.3;
			margin-top: 144px;
		}

	.animati0n {
		display: none;
	}

	.wrapper{
	max-width:428px;
	}

	.filters ul li a {
		font-size: 20px;
	}

	footer .flex-container li a {
		line-height: 2;
	}
}

 
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) {
		body {
			color: var(--primary-color);
			font-family:"Nunito", sans-serif;
			font-weight: 400;
			font-size: 38px;
			line-height:1.3;
			margin-top: 144px;
		}
	
		.animati0n {
			right: 30px;
			top: 195px;
			width: 35%;
			height: 55%;
		}

		footer{
		padding-top: 80px;
		padding-bottom: 80px;
		background: #f0cee2;
		background: linear-gradient(0deg, #f0cee2 0%, rgba(169,122,245,0) 100%);
		}
	}

@media only screen
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
		.animati0n {
			display: none;
		}

		footer{
	padding-top: 80px;
	padding-bottom: 80px;
	background: #f0cee2;
	background: linear-gradient(0deg, #f0cee2 0%, rgba(169,122,245,0) 100%);
}
}

@media (max-width:480px){
	header {
	font-size: 10px;
	font-weight:600;
	padding-top:24px;
	padding-bottom:34px;
	background: #f0cee2;
	background: linear-gradient(0deg, rgba(169,122,245,0) 0%, #f0cee2 100%);
	position:fixed;
	top:0;
	left: 0;
	width:380px;
	z-index:3;
	}

	.animati0n {
		display: none;
	}

	body {
		font-size: 14px;
	}

	h1{
	font-weight: 700;
}

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

		footer a{
		text-decoration: none;
		color: var(--primary-color);
		font-size: 16px;
		line-height: 2;
	}

	.flex-container p {
		display: none;
	}

	footer ul {
		margin-left: 10px;
	}

	.wrapper .flex-container li {
		font-size: 12px;
	}

	.wrapper{
	max-width:480px;
	}
}