/******************************************************************
Google Fonts
******************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500&display=swap');

/******************************************************************
Reset
******************************************************************/
*{
margin:0;
padding:0;
box-sizing: border-box;
}

img, svg {
display:block;
max-width:100%;   
}

a{
text-decoration:none;  
color:#000;
}

li{
list-style: none;   
}

button,
input,
select,
textarea {
outline:none;
border:none;
background:transparent; 
-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none;  

font-family:"Helvetica Neue";
}


html{
width:100%;
height:100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;    
}




/* For Firefox */
* {
  scrollbar-width: none;
}

/* For Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  display: none;
}



body{
width:100%;
min-height:100vh;
font-family:"Helvetica Neue";
font-size:12px;
font-weight:400;
/*background:#f0f0f0;*/
background:#070707;    
}

h1,h2,h3,h4,h5,h6{
font-weight:400;
}

p{
font-size:12px;
font-weight:400;
}


.wrap{
display:block;
position: relative;
width: 80%;
min-height:100vh;
margin-left:auto;
margin-right: auto;
}

.container{
width:100%;
position: relative;
margin-top: 80px;
position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.site-header{
position:fixed;
background:transparent;
width:100%;
top:0;
left: 0;
right: 0;
display:block;
text-align: center;
z-index:1;
}

/* Bg color changer */
#bg-color-changer{
height: 8px;
width: 8px;
background-color: #f3f3f3;
border-radius: 50%;
display: inline-block;
position:relative;
margin-top: 18px;
cursor: pointer;
    
}


.content{
/*width:100%;
margin-left:auto;
margin-right: auto;
margin-top: -84px;*/
    
    
    position: fixed;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
}

h1.content-inner{
color:#f3f3f3;
font-size:32vw;
/*font-family: 'Space Grotesk', sans-serif; */
    font-family: inherit;
text-align: center;
    
}


/* Footer */
.site-footer{
position:fixed;
bottom:0px;
left:0;
right:0;
}


.join-box{
width:250px; 
color:#fefefe;
background:#111;
border-radius:15px;
display: flex;
justify-content: space-between;
align-items: center;
padding:6px;
margin-left:auto;
margin-right: auto;
margin-bottom:65px;
}


#styps-logo{  
width:28px; 
display:inline-block;
margin-left:8px;    
}

button#join-text{
padding:12px 15px;
background:#222;
border-radius:10px;
display:block;
color:#f3f3f3;
cursor: pointer;
font-size:11px;
font-weight: 500;
}


button#join-text:hover{
background:#333;
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;    
}


.credit-text{
color:#222;
position:absolute;
bottom:15px;
left:0;
right:0;
text-align: center;
font-size:11px;
font-weight: 500;
}


@media (max-width: 415px) and (min-width: 280px) {
  /* Your CSS styles for this breakpoint */
  /* For example: */
  body {
    font-size: 14px;
  }


}