@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
* {
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    /* Effecten */
    --zoom: 1.05;
    --transitionSpeed: .3s;
    /* Normale kleuren */
    --primaryColor: rgb(32, 66, 86);
    --secondaryColor: rgb(56, 145, 187);
    --darkColor: rgb(23, 42, 56);
    /* Gebruikers kleuren */
    --placeholder: rgb(180, 180, 180);
    --inputColor: rgb(61, 61, 61);
    --inputText: white;
    /* Scrollbar */
    --scollbarColor: #ffc40000;
    --scollbarHoldColor: #7c7c7c;
    --scollbarHoverColor: #d1d1d1;
}

html,
body {
    width: 100vw;
    min-height: 100vh;
    background-color: var(--primaryColor);
    overflow-x: hidden;
    scroll-behavior: smooth;
}


/* Scrollbars */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scollbarColor);
}

::-webkit-scrollbar-thumb {
    background: var(--scollbarHoldColor);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scollbarHoverColor);
}


/* Muis selectie */

::-moz-selection {
    background: var(--primaryColor);
    color: white;
}

::selection {
    background: var(--primaryColor);
    color: white;
}


/* Normale buttons */

button.button {
    padding: 10px 30px;
    border: none;
    color: white;
    background-color: var(--primaryColor);
    letter-spacing: .2em;
    outline: 0;
    border: 0;
    transition: var(--transitionSpeed);
}

button.button:hover {
    cursor: pointer;
    background-color: var(--secondaryColor);
}


/* Gebruikers stylen */

input,
input:focus,
input:active {
    border: 0;
    -webkit-appearance: none;
    outline: -webkit-focus-ring-color auto 0;
}

::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--placeholder);
}

::-ms-input-placeholder {
    color: var(--placeholder);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
    padding: 0 13px;
    background-color: var(--inputColor);
    color: var(--inputText);
    height: 42px;
}

input[type="radio"] {
    -webkit-appearance: radio;
    width: 20px;
    height: 20px;
    opacity: 1;
    cursor: pointer;
    margin: 5px;
}

select {
    background-color: var(--inputColor);
    color: var(--inputText);
    border: 0;
    height: 42px;
    padding: 0 13px;
    outline: none;
}

textarea:focus,
input:focus,
input:active,
select:focus,
select:active {
    outline: none;
    border: 0;
}


/* Normale element stylen */

iframe {
    height: 100%;
    border: 0;
}


/* Speciale classes */

.zoom {
    transform: scale(1);
    transform-origin: center center;
    transition: var(--transitionSpeed);
}

.zoom:hover {
    transform: scale(var(--zoom));
    transform-origin: center center;
    transition: var(--transitionSpeed);
}

.noPadding {
    padding: 0 !important;
}

.noMargin {
    margin: 0 !important;
}

.smallMarginLeft {
    margin-left: 2em;
}

.title {
    color: white;
}