@charset "UTF-8";

  :root {
    --highlight: #a5ffeb; /* Global variable */
  }


.row{
	  align-items: center;
	  padding:30px 0px;
}

.align-items-top{
	align-items: flex-start;
}

@media(max-width:48rem){
.hidden-mobile{
 display:none !important;   
}
}

@media(min-width:48rem){
    .hidden-desktop{
        display:none;
    }
}

@media only screen and (min-width: 48em) {
  #projects .row:nth-child(even){
    flex-direction: row-reverse;
  }
}
 

 body{ 
position:relative;
font-size:15px;
	color:white;background:#242424;
  font-family:neue-haas-grotesk-text, helvetica, sans-serif;
overflow-x:hidden;
background:linear-gradient(120deg,rgba(0, 0, 0, 1) 0%, rgba(50,50,50,1) 50%,rgba(0, 0, 0, 1) 100%);

}






.gradient{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  z-index:0;
   filter:  url(#noise);
}

h1,h2{
	font-family:acumin-variable;
	font-variation-settings: "slnt" 0, "wdth" 50, "wght" 700;
	text-transform: uppercase;

}

h2{
	font-variation-settings: "wdth" 50;
    font-size: 7rem;
    line-height: .9;
    letter-spacing: .25rem;
}

h3{
	color:var(--highlight);
font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .15rem;
        margin: 25px 0px;
}

h4{
	color: var(--highlight);
    font-weight: 800;
  	letter-spacing: .5px;
    font-size: 3rem;
}


ul{
  list-style: disc inside;

}

li{
  padding-left: 22px;
    text-indent: -22px;
}


a.button{
  color:var(--highlight);
  border:1px solid var(--highlight);
  transition:.8s all;
}

a.button:hover{
  color:black;
  background:var(--highlight);
}

.bold{
	font-weight:bold;
}


.text-align-center{
	text-align: center;
}


.text-align-left{
	text-align: left;
}

.text-align-right{
	text-align: right;
}



#hero h1{
	
	font-variation-settings: "wdth" 52;
	color:white;
	 
}

@media (min-width: 550px) {
	#hero h1{
		font-size:28rem;
		letter-spacing: 2px;
	}
}

#mainhero{
	height:100vh;
	align-items: center;
	font-family: 'neue-haas-grotesk-display';
	font-weight:600;
	color:#a5ffeb;
	overflow-y: hidden;
	padding:0px;
}



img{max-width:100%;height:auto;}

section{
  padding:60px 0px;
}

@media (max-width:48rem){
section{
  padding:40px 0px;
}
}

@media only screen and (min-width: 75em) {
    .container {
        width: 120rem;
    }
}

#nav{
	padding:0px;
	padding-top:20px;
	margin-bottom:-20px;
	position: relative;
	flex-direction: row !important;
	z-index:99;
}

#nav a{
color:#a5ffeb;
text-transform:uppercase;
font-weight:300;
text-decoration: none;
font-size:12px;

}

#footer #nav{
	margin-bottom:20px;
}

h2.projects{
	font-size: 9rem;
    margin-bottom: -8rem;
}

.stats{
	background:black;
	padding:60px 40px;
	border-radius:40px;
	align-items: flex-start;
}

.no-margin{
	margin:0px;
}

.metrics-number{
	font-family: acumin-variable;
    font-size: 11rem;
    font-variation-settings: "wdth" 52;
    margin: 0px;
    line-height: 1;
}

.grid-pic img{
	width:33%;
	margin-right: .1%;
}

.grid-pic img:nth-child(3n){
margin-right:0%;
}

.scroll-container{
	max-height: 110vh;
    overflow: scroll;
box-sizing: border-box;
    width:100%;
    border-radius: 50px;
    border: 20px solid white;
    
}

#footer{
	padding-bottom: 20px;
}

@media(max-width: 48em){
	
	#mobilehero{
		padding-top:200px;
	}


	h1{
		font-size:60px;
		letter-spacing:1px;

	}
	h3{
		margin-bottom:10px;
	}

	.container{
		padding:20px;
	}

	#projects .row{
		flex-direction: column-reverse;
		text-align:center;
	}
	#projects img{
		margin-bottom:20px;
	}

	.grid-pic img{
		width:49%;
	}

	.scroll-container{margin-bottom:20px;}
}