:root{
    --main-bg-color: 72;
    --points: lightgreen;
    --points2: lightgreen;
    --hue: 30deg;
    --light: 100%;
}
*{
    background-color: hsl(calc((var(--hue)/9)), 50% ,var(--light));
}
html {
    height:100%;
    font-size: 5.5vw;
    font-family: 'Finlandica', sans-serif;
}
body {
    position: relative;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
#Question {
    display:flex;
    position: absolute;
    top: 35%;
    box-shadow: 0 0 30px green;
    border-radius: 5%;
    margin:5%;
    text-align: center;
    color: lightblue;
    font-size: 3.5vw;
    background-color: transparent;
    filter: brightness(calc(100% - var(--light))) hue-rotate(var(--hue));
}
#Answer {
    display:flex;
    position: absolute;
    bottom: 5%;
    justify-content: center;
    color: lightcyan;
    margin: 0%;
    background-color: transparent;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.3));
}
#PrevAnswer {
    display:flex;
    position: absolute;
    bottom: 5%;
    right:10%;
    justify-content: center;
    color: lightgoldenrodyellow;
    background-color: transparent;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.2));
}
#Streak {
    display:flex;
    position: absolute;
    top: 5%;
    Left: 10%;
    justify-content: center;
    color: white;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.1));
    background-color: transparent;
}
#Points {
    display:flex;
    position: absolute;
    top: 5%;
    right: 10%;
    justify-content: center;
    color: var(--points);
    background-color: transparent;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/2));
}
#PointChange {
    display:flex;
    position: absolute;
    top: 5%;
    right: 10%;
    justify-content: center;
    color: var(--points2);
    visibility: hidden;
    background-color: transparent;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.4));
}
#slides {
    display:flex;
    position: absolute;
    top: 18%;
    color: hsl(var(--main-bg-color), 100%, 50%);
    justify-content: center;
    background-color: transparent;
    font-size: 5.5vw;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.5));
}
#type {
    position: relative;
    border: solid #5B6DCD 3px;
    font-size: 20px;
    height:40%;
    width:100%;
    border-radius: 25%;
    color:lightcyan;
    background-color: transparent;
    bottom: 70%;
    filter: brightness(calc(100% - var(--light))) hue-rotate(calc(var(--hue)/1.6));
}
p {
    background-color: transparent;
    margin: 0;
}
#type:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 30px #9ecaed;
    font-size: 2.1vw;
}
form {
    width:10%;
    margin-right:10%;
    background-color: transparent;
}
#guess {
    margin: 20%;
}
#none {
    display: none;
}
@keyframes slidein {
    0% {
        transform: translateY(0%);
        filter: opacity(100%);
    } 
    99% {
        transform: translateY(100%);
        filter: opacity(0%);
    }
    100% {
        transform: translateY(-100%);
        filter: opacity(0%);
    }
}
@keyframes slideout {
    0% {
        transform: translateY(0%);
        filter: opacity(100%);
    } 
    99% {
        transform: translateY(-100%);
        filter: opacity(0%);
    }
    100% {
        transform: translateY(100%);
        filter: opacity(0%);
    }
}

input[type=range] {
    height: 1.5vw;
    -webkit-appearance: none;
    margin: 0;
    width: 100%;
    align-items: center;
    margin-top: 30%;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 1.5vw;
    height: 1.3vw;
    cursor: pointer;
    background: blue;
    border-radius: 30%;
}
input[type=range]::-webkit-slider-thumb {
    height: 3vw;
    width: 1.5vw;
    border-radius: 25%;
    background: #57FFA5;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5%;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    box-shadow: 0 0  4vw yellow;
}

#myRange {
    position: absolute;
    display: flex;
    justify-items: center;
    align-items: center;
    background-color: transparent;
}