*{
    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-between;
    padding-top: 6.5%;
    padding-bottom: 2em;
}

.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));

}

.center-zone{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap:5em;
    width:100%;
}

.slider-zone{
    width:80%;
    max-width: 95%;
    height:9em;

    display: flex;
    gap:2%;
    justify-content: space-between;
    align-items: center;
}

.slider-zone label{
    color:aliceblue;
    height:100%;
    text-align: center;
    align-items: center;
    font-size: 1.7em;
    font-family: Arial, Helvetica, sans-serif;
}

.slider{
    height:25%;
    flex:1;
    -webkit-appearance: none; 
    appearance: none;
    outline: none;
    -webkit-transition: .2s; 
    transition: background .2s;
    background: rgba(69, 134, 255, 0.3);
    background-image: url("../../assets/dot.png");
    border-radius: 10px;
}

.slider:hover { background: rgba(69, 134, 255, 0.5); background-image: url("../../assets/dot.png"); }

.slider::-moz-range-thumb {
    height:100%;
    width:3.2%;
    background: #ff37ffb6;
    background-image: url("../../assets/bubble2.png");
    background-size: 107%;
    border-radius: 40%;
    border:none;
    cursor: pointer;
    opacity: 1.0;
}

.answer-zone{
    display: flex;
    flex-direction: column;
    padding: 2%;
    width:25%;
    gap:1em;

    border-radius: 30%;
    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);

    text-shadow: 
        1px 1px 2px black,
        1px 1px 2px rgb(123, 11, 11),
        1px 1px 2px white;

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

.answer-zone: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;
}


.answer-zone label {
    font-size: 1.8em;
    text-shadow: 0 0 10px 1px white;
    display: flex;
    align-content: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
}



.options{
    width:80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap:1em;
    color:aliceblue;
}

.options button{
    color: aliceblue;
    text-decoration: underline;

    background-color: transparent;
    border: none;
}

.previous-question-button:hover{
    color: aliceblue;
    filter: drop-shadow(-15px 10px  limegreen)
            drop-shadow(-10px -10px  yellow);
}


.go-home-button:hover{
    color: aliceblue;
    filter: drop-shadow(10px 10px  red)
            drop-shadow(15px -10px  deepskyblue);
}



@keyframes hover {

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