@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@800&display=swap');

*{
    overflow:hidden;
    
    font-family: 'Kanit', sans-serif; 
    box-sizing: border-box;
    padding: 0;
    margin:0;
}
.all{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height:100vh;
}

section{
scroll-snap-align: start;

}
    .content{
        height:100%;
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
    }
        .content .text{
            color:#fff;
            font-size:7vw;
            font-weight:300px; 
            text-transform:uppercase;
            transform:scale(2);
            letter-spacing:7px;
            padding:30px; 
            text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
            animation-name:textflicker;
            animation-duration:0.2s;
            animation-iteration-count: infinite;
            animation-direction:alternate;
        }
      @keyframes textflicker{
          from{
              text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
        }
      
      to{ text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 1px #75fa69;}
    }


section.logo{ 
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    height:100vh;
}

.test{
    z-index:-999;
    font-size:1px;
}


img.bg{
    
    background-color: rgba(0,0,0,1);
    position:fixed;
    max-width:none;
    max-height:none;
    width:100%;
    height:100%;
    right:0;
    bottom:0;
    z-index:-3;
}


ul{
    margin:10vw;
    position:relative;
    justify-content: center;
    display:flex;
    align-items:center;
    list-style:none;
    float:center;
    text-align:center;
    
}

ul li{
    list-style-type:none;
    padding:3px;
    list-style:none;
    margin-right:auto;
    margin-left:auto;
    justify-content:space-between;
    height:auto;
    width:auto;
}

.links img{
    max-width:100%;
    height:auto;
    border-radius:50%;
    -webkit-transition:background-color 0.5s, border-color 0.5s;
}
@keyframes hovered{
    0%{
        opacity:0.5;
        
    }
    100%{
        opacity:1;
    }
}
a{opacity:0.5;}

a:hover{
    animation-name:hovered;
    animation-duration:500ms;
    animation-timing-function:easeInOut;
    animation-iteration-count: inherited;
    animation-fill-mode:both;

}

.links img:hover{
background-color: #fff;

}

section.links{
    background-color: rgba(0, 0, 0, 0.5);
    height:100vh;
    justify-content: center;
    display:flex;
    align-items:center; 

}