:root{
    scroll-behavior: smooth;
}
     
::-webkit-scrollbar {
    width: 20px;
    background-color: #666;
    border-radius: 10px;
}
/* Track */
::-webkit-scrollbar-track {
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    border: 4px solid #666;
    background: #555;
    box-shadow: inset 0px 0px 0px 1px #ddd;
    border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    border: 4px solid #666;
    box-shadow: 
        inset 0 0 0px 1px #ddd
        ;
    background: #444; 
}
        
::-webkit-scrollbar-track-piece{
    background-color: #666;    
}
::-webkit-scrollbar-track-piece:start{
    background-color: ;
}
::-webkit-scrollbar-button{
    border: 4px solid #666;    
    box-shadow: inset 0px 0px 0px 1px #ddd;
    height: 16px; 
}
::-webkit-scrollbar-button:decrement{
    border-top: 0px;
    border-radius: 0 0 8px 8px; 
}
::-webkit-scrollbar-button:increment{
    border-bottom: 0px;
    border-radius: 8px 8px 0 0; 
}
::-webkit-scrollbar-button:vertical:hover{
    background-color: green;
}

body{
    background-color: black;
    color: #f29912;
    font-family: 'Baloo-Regular', sans-serif;
    color:aliceblue;
}
a{
    text-decoration: none;
    color: #f29912;
    letter-spacing: 1px;
    font-size: 28px;
}
nav{
    height: 10vh;
    background-color: #333;
    position: sticky;
    top: 0;
    display: flex;
    flex-flow: row;
    z-index: 10;
}
nav > a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transition: .4s;
    flex:1;
}
nav > a:hover{
    background-color: rgba(242, 153, 18, 0.23);
    color: black;
    font-weight: 700;
    transition: .4s;
    font-size: 18px;

}
nav > a > h2{
    letter-spacing: ;
    transform: translate(0,10%)
}
dammy{
    position: absolute;
    top: -10vh;
}
header{
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: springgreen;
}
header > h1 {
    font-size: 18px;
    text-align: center;
}

#sh1{
    height: 10vh;
    width: 33.3%;
    display: block;
    transform: translate(0,-10vh) rotate(180deg);
    
    
    font-size: 24px;
    position: sticky;
    top: 10vh;
    z-index: 20;
    background-color: springgreen;
    background-image: url(../src/w2.jpg);
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -65vw 10vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
#sh1 > h2{
    transform: rotate(180deg);
    text-shadow: 1px 1px 0 black, -.5px -.5px 0 white;
    
    
}

#s1{
    height: 100vh;
    transform: translate(0,-10vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}
#sh2{
    height: 10vh;
    width: 33.3%;
    display: block;
    transform: translate(0,-20vh) rotate(180deg);
    position: sticky;
    top: 20vh;
    left: 33.3%;
    z-index: 20;
    
    font-size: 24px;
    background-color: springgreen;
    background-image: url(../src/w2.jpg);
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 20vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
#sh2 > h2{
    transform: rotate(180deg);
    text-shadow: 1px 1px 0 black, -.5px -.5px 0 white;
}
#s2{
    height: 100vh;
    transform: translate(0,-20vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
}
#sh3{
    height: 10vh;
    width: 33.3%;
    display: block;
    transform: translate(0,-30vh) rotate(180deg);
    position: sticky;
    top: 30vh;
    left: 66.6%;
    z-index: 20;

    font-size: 24px;
    color: ;
    background-color: springgreen;
    background-image: url(../src/w2.jpg);
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 64vw 30vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
#sh3 > h2{
    transform: rotate(180deg);
    text-shadow: 1px 1px 0 black, -.5px -.5px 0 white;
}
#s3{
    height: 100vh;
    transform: translate(0,-30vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}

#foot{
    width: 100%;
    height: 10vh;
    transform: translate(0,-40vh);
    position: sticky;
    bottom: -40vh;
    display: block;
    background-color: #00773b;
    z-index: 30;
}
footer{
    width: 100%;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
}
footer > h2{
    font-size: 22px;
    text-shadow: 1px 1px 0 black, -.5px -.5px 0 white;
}

#s5{
    width: 100%;
    height: 0vh;
    transform: translate(0,0vh);
}
#s5d{
    width: 100%;
    height: 80vh;
    transform: translate(0,-40vh);
    background-color: rgba(0, 128, 0, 0.44);
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 0 black, -.5px -.5px 0 white;
}