:root {
    --main-color: #FFFFFF;
    --neutral-color: #0093FF;
    --complementary-color: #FF4F43;
    --wrong-color: #B01010;
    --correct-color: #00E000;
    --black-color: #000000;
    --medium-color: #C0C010;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url(Rubik_latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 5vw;
    background-color: var(--main-color);
    color: var(--neutral-color);
}

div {
    padding: 5vw 10% 0 10%;
}

.heading {
    font-size: 12vw;
    font-weight: bold;
    padding-top: 10vw 10% 0 10%;
}

.stationnumber {
    padding-top: 10vw 10% 0 10%;
    color: var(--complementary-color);
    font-size: 4vw;
    color: var(--black-color);
}

button {
    background-color: var(--main-color);
    height: 12vw;
    width: 50%;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 5vw;
    color: var(--neutral-color);
    border-radius: 6vw;
    position: absolute;
}

.next {
    padding-left: 0;
    padding-right: 0;
    padding-top: 10vw;
}

.slider {
  -webkit-appearance: none;
  width: 60vw;
  height: 50px;
  border-radius: 5px;
  background: var(--main-color);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--complementary-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--complementary-color);
  cursor: pointer;
}

.chat {
    background-color: var(--main-color);
    width: 80vw;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 3vw;
    color: var(--neutral-color);
    border-radius: 6vw;
    position: relative;
    padding: 3vw;
}

.ai {
    background-color: var(--complementary-color);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    left: -10vw;
    margin-left: 5vw;
    color: var(--main-color);
    text-align: left;
}

.human {
    background-color: var(--main-color);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    right: -10vw;
    margin-right: 5vw;
    text-align: right;
}

.cablebutton {
    background-color: var(--complementary-color);
    height: 12vw;
    width: 12vw;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 5vw;
    color: var(--main-color);
    border-radius: 6vw;
}

.cablebutton:hover {
    color: var(--neutral-color);
}

.languagebutton {
    position: absolute;
    right: 6vw;
    top: 6vw;
    height: 6vw;
    border-radius: 3vw;
}

.languagebuttoninfo {
    color: var(--neutral-color);
}

.homebutton {
    right: 20vw;
    width: 6vw;
}

.languagebuttoninfo:hover {
    color: var(--main-color);
}

.infobutton {
    background-color: rgba(0,0,0,0);
    height: 4vw;
    width: 4vw;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-size: 4vw;
    color: var(--black-color);
    border-radius: 2vw;
    position: absolute;
}

.answerbutton {
    background-color: var(--complementary-color);
    height: 12vw;
    width: 80%;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 5vw;
    color: var(--main-color);
    border-radius: 6vw;
    margin-top: 2vw;
}

.answerbutton:hover {
    color: var(--neutral-color);
}

textarea {
    background-color: var(--neutral-color);
    height: 12vw;
    width: 80%;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 5vw;
    vertical-align: middle;
    color: var(--main-color);
    -webkit-border-radius: 6vw;
    -moz-border-radius: 6vw;
    border-radius: 6vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.inverted {
    background-color: var(--neutral-color);
    color: var(--main-color);
}

.wrong {
    background-color: var(--wrong-color);
}

.correct {
    background-color: var(--correct-color);
}

.info-deco {
    background-color: var(--complementary-color);
    height: 10vw;
    width: 30vw;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
}

.info-deco-low {
    height: 20vw;
    width: 10vw;
    top: 0;
}

.info-text {
    width: 20vw;
    top: 10vw;
    right: 10vw;
    text-align: right;
}

.active-button:hover {
    color: var(--complementary-color);
}

.main-background {background-color: var(--main-color);}
.main-font {color: var(--main-color);}
.neutral-background {background-color: var(--neutral-color);}
.neutral-font {color: var(--neutral-color);}
.complementary-background {background-color: var(--complementary-color);}
.complementary-font {color: var(--black-color);}

.smallbutton {
    height: 8vw;
    width: 50%;
    font-size: 4vw;
    border-radius: 4vw;
    background-color: var(--complementary-color);
}

.smallbutton:hover {
    color: var(--neutral-color);
}

.fade-in-animation {
    animation-name: fade-in;
    animation-duration: 4s;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.custom-select {
    font-size: 4vw;
    position: absolute;
    width: 10vw;
}

.neuron-correct {
    background-color: var(--correct-color);
    height: 10vw;
    width: 10vw;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Rubik', 'Arial', sans-serif;
    font-weight: bolder;
    font-size: 4vw;
    color: var(--main-color);
    border-radius: 5vw;
    position: absolute;
}

.easy {
    background-color: var(--black-color);
}

.medium {
    background-color: var(--medium-color);
}

.hard {
    background-color: var(--wrong-color);
}