:root {
    --purple-color: #A22F9B;
    --pink-color: #DD41B8;
    --hover-pink-color: #DD41B85a;
    --hover-blue-color: #455DA5;
    --light-blue-color: #3CBEDE;
    --blue-color: #09072B;
    --transparent-black-color: rgba(0, 0, 0, 0.85);
    --text-color: #FCFAFA;
    --black-text-color: #000000;
    --transparent-white-color: rgba(255, 255, 255, 0.7);
    --background-image: url('../img/engevibingsbg1.png');
    --header-logeerpartijtje-background: url(../img/logeerpartijtje-alt.png);
    --logeerpartijtje-background: linear-gradient(0deg, #8A4084, #1E1C4B);
    --gray-color: #5C4B53;
    --light-gray-color: #C29EAF;
    --transparent-gray-color: #927E8799;
    --transparent-light-gray-color: #C29EAF99;
    --transparent-gray-border: #836a7599;
    --wheelspinner-button-text-shadow: 0 0 1vh rgba(0, 0, 0, 0.25);
    --transparent-light-blue: #3cbede33;
    --gradient-purple-dark: #4B225F;
    --gradient-purple-light: #CB9DCE;
    --gradient-blue-dark: #1E1C4B;
    --gradient-blue-light: #afb2d1;
    --standard-font: 'Montserrat', sans-serif;
    --black-color: var(--black-text-color);
}

p, h1, h2, h3, h4, h5, h6, i {
    font-family: var(--standard-font);
    color: var(--text-color);
}

iframe{
    width: 100%;
    height: 100%;
    border: none;
    transition: 750ms linear;
    user-select: none;
}

button {
    font-family: var(--standard-font);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6vh;
    width: 100%;
    padding: 2vh 4vh;
    border: none;
    border-radius: 4vh;
    background-color: var(--purple-color);
    color: var(--text-color);
    transition: 500ms;
    text-shadow: 0 0 1vh rgba(0, 0, 0, 0.5);
}

button:hover {
    background-color: var(--hover-blue-color);
    transition: 500ms;
    cursor: pointer;
}

button:active {
    background-color: var(--pink-color);
    transition: 500ms;
}

#selected {
    background-color: var(--pink-color);
    transition: 500ms;
    cursor: unset;
}