*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width:none;
    font-family: "Glacier";
    font-size: large;
}

@font-face {                  
font-family: 'Ojuju-Bold';
src: url(https://humantooth.neocities.org/fonts/Ojuju-Bold.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'Glacier';
src: url(https://humantooth.neocities.org/fonts/Glacier-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
}

body{
    width:100vw;
    height:100vh;
    

    background-image: url("../assets/battleback_vf_kitekid.png");
    background-repeat:repeat-y;
    background-size: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.top-box{
    display: flex;
    flex-direction: column;
    gap:2.5em;

    width:50%;
}


.options{
    display: flex;
    gap:2em;
    width:50%;
    height:150px;
    justify-content: space-between;
}

.options a{
    width: 38%;
    max-width: 38%;
    height:70%;

    border-radius: 0%;
    color: rgb(168, 255, 222);
    background-color: rgba(9, 46, 59, 0.174);
    border: rgb(168, 255, 222) 0.1px solid;
    box-shadow: 1px 1px 30px 1px rgba(237, 255, 248, 0.485);
    font-size: 1.1em;
    text-shadow: 
        1px 1px 2px black,
        1px 1px 2px rgb(123, 11, 11),
        1px 1px 2px white;

    text-align: center;
    align-content: center;
}

.options a:hover{
    color: rgb(255, 255, 230);
    border: rgba(255, 255, 0, 0.744) 0.1px solid;
    box-shadow: 1px 1px 30px 1px rgba(255, 255, 0, 0.485);
    background-color: rgba(66, 99, 111, 0.241);
    text-shadow: 
        0 0 10px black,
        0 0 10px yellow,
        0 0 20px yellow;
    cursor: pointer;
}

.page-title{

    font-size:3.5vw;
    text-align: center;

    background-image:  url("../assets/pni50064.gif");
    color:transparent;
    background-clip: text;
    -webkit-background-clip: text;

    animation: hover 3s infinite ease-in-out;


    filter: 
        drop-shadow(1px 1px rgb(67, 255, 158))
        drop-shadow(-1px -1px rgb(8, 96, 101))
        drop-shadow(1px -1px rgb(13, 120, 156))
        drop-shadow(-1px 1px rgb(123, 11, 11));

}

.page-subtitle{
    color:rgb(150, 255, 215);
    filter: 
        drop-shadow(-1.5px -1.5px rgb(9, 46, 59))
        drop-shadow(1.5px 1.5px rgb(9, 46, 59))
        drop-shadow(0.5px 0.5px rgb(123, 11, 11));

    font-size:1.5vw;
    text-align: center;

    animation: hover 3s infinite ease-in-out;

}




@keyframes hover {

    50% {
        transform: translateY(6%);
    }
}