@font-face {
  font-family: uncut-sans;
  src: url(UncutSans-Regular.woff);
}
body {
    overflow: overlay;
}
html::-webkit-scrollbar{
    width:1.5vw;

}
html::-webkit-scrollbar-thumb{
    background-color:black;
    height:40%;
}
html::-webkit-scrollbar-track{
    display:none;
}
.gradient{
    float:left;
    position:fixed;
    top:0%;
    left:0%;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.2) , rgba(255,255,255,0));
    height:130px;
    width:100%;
}

.header-1{
    margin:auto;
    text-align:center;
    padding-top:80px;
    font-family:'uncut-sans', sans-serif;
    color:black;
    letter-spacing: 0.5em;
    font-size:28px;
}

.side-bar{
    float:left;
    border-right:black solid 1px;
   
    width:70px;
    height:2000px;
}
#scroll{
    width:10px;
    height:100%;
    padding:0;
    margin:0 0 0 auto;
    left:70px;
    top:0;
    position:fixed;
    background-color:transparent
}

#scrollIndicator {
    width:100%;
    height:10%;
    background-color:black;
}

.side-bar-header-green{
    writing-mode: vertical-rl;
    padding:210 0 614px 10;
    font-family:'uncut-sans', sans-serif;
    color:green;
    font-size:16px;
    letter-spacing:0.03em;
    border-bottom:black solid 1px;

    
}
.side-bar-header-red{
    writing-mode: vertical-rl;
    /*margin-top:400px;*/
    padding:260px 0 0 10;
    font-family:'uncut-sans', sans-serif;
    color:red;
    font-size:16px;
}

/*.side-bar-line{
    position:absolute;
    top:1024px;
    left:0px;
    width:94%;
    margin-left:80px;
    background-color:black;
    height:0.7px;
}*/
/*.side-bar-line2{
    position:absolute;
    top:710px;
    left:0px;
    width:94%;
    margin-left:80px;
    background-color:red;
    height:0.5px;
}*/
.column-container{
  display:block;
    content:'';
    clear:both;
    height:2000px;
 
}


.column{
    float:left;
    height:100%;
    padding:0px 20px 0 20px;
    width:15%;
    border-right:#e0e0e0 solid 1px;
    
}

.deco-1{
    font-family:'uncut-sans', sans-serif;
    font-size:400px;
    line-height:0.7;
     padding:0px 0 30% 0;
    text-align:center;
   
}

.header-3{
    font-family:'Pontano Sans', sans-serif;
    font-weight:100;
    font-size:28px;
    line-height:1.2;
     letter-spacing:0em;
}


.body{
     font-family:'Pontano Sans', sans-serif;
    font-size:16px;
    font-weight:100;
    line-height:1.5;

}

a {
    text-decoration:none;
    color:black;
}

.button{
    font-family:'uncut-sans', sans-serif;
    font-size:16px;
    padding:-5px 2px 0 0;
    display:inline-block;


}
.arrow{
    width:40px;
}
.deco-2{
    font-family:'uncut-sans', sans-serif;
    font-size:400px;
    line-height:1.1;
    padding:80px 0 30px 0;
    text-align:center;

}
.deco-3{
    font-family:'uncut-sans', sans-serif;
    font-size:400px;
    line-height:0.8;
    padding:450px 0 30px 0;
    text-align:center;

}
.deco-4{
    font-family:'uncut-sans', sans-serif;
    font-size:400px;
    line-height:0.8;
    padding:650px 0 30px 0;
    text-align:center;

}
.deco-5{
    font-family:'uncut-sans', sans-serif;
    font-size:400px;
    line-height:0.8;
    padding:850px 0 30px 0;
    text-align:center;

}
@media only screen and (max-width: 800px) {
    
    .column-container{
    display:block;
    content:'';
    clear:both;
    height:4000px;
}
    .column-mobile{
        width:80%;
        float:left;    
    }
    .side-bar{
    float:left;
    border-right:black solid 1px;
    height:4000px;
    width:70px;
}

    .column{

    width:60%;
    height:600px;
    padding:0px 20px 0 20px;
    border:none;
}
    
    .header-3{
    width:300px;
    font-family:'Pontano Sans', sans-serif;
    font-weight:100;
    font-size:28px;
    line-height:1.2;
     letter-spacing:0em;
}


.body{
        width:300px;
     font-family:'Pontano Sans', sans-serif;
    font-size:14px;
    font-weight:100;
    line-height:1.5;

}
.deco-1{
    font-family:'Tienne', serif;
    font-size:400px;
    line-height:0.7;
     padding:0px 0 30% 0;
    text-align:center;
   
}
.deco-2{
    font-family:'Tienne', serif;
    font-size:400px;
    line-height:1.1;
    padding:0px 0 30px 0;
    text-align:center;

}
.deco-3{
    font-family:'Tienne', serif;
    font-size:400px;
    line-height:0.8;
    padding:450px 0 30px 0;
    text-align:center;

}
.deco-4{
    font-family:'Tienne', serif;
    font-size:400px;
    line-height:0.8;
    padding:650px 0 30px 0;
    text-align:center;

}
.deco-5{
    font-family:'Tienne', serif;
    font-size:400px;
    line-height:0.8;
    padding:850px 0 30px 0;
    text-align:center;

}
    .side-bar-header-green{
    writing-mode: vertical-rl;
    padding:200 0 1931px 10;
    font-family:'Tienne', serif;
    color:green;
    font-size:16px;
    letter-spacing:0.03em;
    border-bottom:black solid 1px;

    
}
.side-bar-header-red{
    writing-mode: vertical-rl;
    /*margin-top:400px;*/
    padding:130px 0 0 10;
    font-family:'Tienne', serif;
    color:red;
    font-size:16px;
}
    
}