*,*::before,*::after{
	box-sizing:border-box;
	padding:0;
	margin:0;
	background:none;
	text-decoration:none;
	outline:none;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	font-weight:inherit;
	color:inherit;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-feature-settings:"onum", "kern", "liga", "clig", "calt"
}
@font-face{
	font-family:'Mukta';
	src:url("fonts/mukta.woff2") format("woff2");
	font-weight:300;
	font-style:normal
}
@font-face{
	font-family:'Mukta';
	src:url("fonts/mukta.woff2") format("woff2");
	font-weight:500;
	font-style:normal
}
:root{
	--c-green: hsla(0, 33%, 70%, 1.00);
	--c-white: hsla(115, 100%, 100%, 1.00);
	--c-black: hsla(0, 0%, 0%, 1.00);
	--f-family: Inter, sans-serif;
	--f-size: 15px;
	--f-height: 25px;
	--f-weight: 300;
	--spacer: 1rem;
	--f-scale-l: 1.3;
	font-size:var(--f-height);
	font-family:var(--f-family);
	font-weight:var(--f-weight);
	background:var(--c-white);
	color:var(--c-green)
}
@media (min-width: 350px){
	:root{
		--f-size: 17px;
		--f-height: 28px;
		--f-scale-l: 1.5
}
}
@media (min-width: 500px){
	:root{
		--f-scale-l: 2
}
}
@media (min-width: 800px){
	:root{
		--spacer: 2rem
}
}
html,body{
	width:100%;
	position:relative;
	scroll-behavior:smooth
}
.header{
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between
}
.title,.tagline{
	font-size:calc(var(--f-size) * var(--f-scale-l));
	line-height:2rem;
	font-weight:500
}
.wrapper{
	position:relative
}
.intro,.outro{
	width:100%;
	height:100vh;
	padding:var(--spacer);
	color:var(--c-black);
	display:-webkit-box;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	flex-direction:column;
	-webkit-box-pack:justify;
	justify-content:space-between;
	background:var(--c-green);
	height: calc(var(--vh, 1vh) * 100); 
}
.outro { 
	height:100vh;
}

@media (max-width: 500px){
.header .tagline {
   position: absolute;
   bottom: 3em;
	font-weight: 300;
	font-size: inherit;	
   width: 70vw;
   margin: auto;
   left: 11%;
   right: unset;
   text-align: left;
} 
a[href="#works"] {
position: absolute;
left: 10%;
bottom: 1em;
}
}
@media (max-width: 900px){
.project-info {
    background: #fffc;
}
}

@media (hover: none){
	.intro,.outro{
		position:static
}
}
.intro{
	z-index:8;
	top:0;
	position:-webkit-sticky;
	position:sticky
}
.outro{
	position:fixed;
	z-index:5;
	top:0
}
.link{
	white-space:nowrap
}
.text-container{
	font-size:var(--f-size);
	line-height:1rem
}
@media (min-width: 800px){
	.text-container{
		display:-webkit-box;
		display:flex;
		-webkit-box-pack:justify;
		justify-content:space-between;
		-webkit-box-align:end;
		align-items:flex-end
}
}
.text{
	max-width:60ch;
	margin-right:var(--spacer)
}
@media (max-width: 799px){
	.text{
		margin-bottom:var(--spacer)
}
}
a{
	-webkit-transition:background-size 300ms ease-out;
	transition:background-size 300ms ease-out;
	background:-webkit-gradient(linear, left top, right top, from(var(--c-white)), to(var(--c-white)));
	background:linear-gradient(to right, var(--c-white), var(--c-white));
	background-size:0% 1px;
	background-repeat:no-repeat;
	background-position:bottom center
}
a:hover{
	background-size:100% 1px
}
.projects{
	padding:var(--spacer);
	background:var(--c-white);
	position:relative;
	z-index:10;
	margin-bottom:100vh
}
@media (min-width: 900px){
	.projects{
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
		-webkit-column-gap:var(--spacer);
		-moz-column-gap:var(--spacer);
		column-gap:var(--spacer);
		padding-bottom:0
}
}
.project-container{
	margin-bottom:var(--spacer);
	position:relative;
	opacity:0;
	-webkit-transition:opacity 300ms , -webkit-transform 300ms;
	transition:opacity 300ms , -webkit-transform 300ms;
	transition:opacity 300ms , transform 300ms;
	transition:opacity 300ms , transform 300ms , -webkit-transform 300ms;
	-webkit-transform:translateY(0.5rem);
	transform:translateY(0.5rem)
}
@media (min-width: 900px){
	.project-container:nth-child(6n){
		display:block;
		width:100%
}
}
@media (max-width: 899px){
	.project-container:last-child{
		margin-bottom:0
}
}
.project-container.visible{
	opacity:1;
	-webkit-transform:initial;
	transform:initial
}
.project-container::after{
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:rgba(255,255,255,0.2);
	-webkit-transition:opacity 300ms;
	transition:opacity 300ms;
	opacity:0
}
.project-image{
	display:block;
	width:100%;
	height:auto
}
.project-info{
	font-size:var(--f-size);
	line-height:1rem;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	opacity:0;
	-webkit-transition:opacity 300ms, -webkit-transform 300ms;
	transition:opacity 300ms, -webkit-transform 300ms;
	transition:transform 300ms, opacity 300ms;
	transition:transform 300ms, opacity 300ms, -webkit-transform 300ms
}
@media (max-width: 899px){
	.project-info{
		color:var(--c-black);
		padding:.25rem .5rem;
		-webkit-transform:translateY(50%);
		transform:translateY(50%)
}
}
@media (min-width: 900px){
	.project-info{
		background:initial;
		padding:.25rem 0 0;
		-webkit-transform:translateY(calc(100% - .25rem));
		transform:translateY(calc(100% - .25rem))
}
}
.project-container:hover:after{
	opacity:1
}
.project-container:hover .project-info{
	opacity:1
}
@media (max-width: 899px){
	.project-container:hover .project-info{
		-webkit-transform:initial;
		transform:initial
}
}
@media (min-width: 900px){
	.project-container:hover .project-info{
		-webkit-transform:translateY(100%);
		transform:translateY(100%)
}
}