:root {
    --arrow-bg: rgba(255, 255, 255, 0.3);
    --arrow-icon: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg);
    --option-bg: white;
    --select-bg: rgba(255, 255, 255, 0.2);
}

/* Algemene stijlen die van toepassing zijn op alle schermen */
body {
    background-image: url('underwater.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Stijlen voor grote schermen */
@media (min-width: 768px) {
    #spaarAnimatie {
        position: relative;
        width: 100%; 
        height: 100%; 
        overflow: hidden;
    }

    #coin {
        display: none;
        width: 100px;
        height: 100px;
        z-index: 0;
        position: absolute;
        bottom: 0; /* Plaats de munt onderaan */
        left: 50%; /* Horizontaal centreren */
        transform: translateX(-50%); /* Horizontaal centreren */
    }

    #spaarpot {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: scale(0.4);
        z-index: 1;
    }

    /* Voeg de volgende stijlen toe voor de paymentform */
    #paymentForm {
        position: absolute;
        bottom: 25px; /* Plaats de formulierdiv aan de onderkant van het scherm */
        left: 50%; /* Horizontaal centreren */
        transform: translateX(-50%); /* Horizontaal centreren */
        z-index: 0; /* Zorg ervoor dat het onder de munt en spaarpot staat */
        text-align: center;
    }
}

/* Stijlen voor kleinere schermen, zoals mobiele apparaten */
@media (max-width: 767px) {
    #spaarAnimatie {
        max-width: 300px; /* Maximale breedte voor de spaaranimatiediv */
        margin: 0 auto;
        width: 90%;
        height: auto;
        position: relative; /* Verwijder absolute positionering */
        overflow: hidden; /* Voeg overflow toe om te voorkomen dat de munt uitsteekt */
    }

    #coin {
        display: none;
        width: 20%; /* Relatieve breedte */
        max-width: 60px; /* Maximale breedte van de munt */
        height: auto;
        z-index: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -100%); /* Verplaats de munt omhoog buiten het zicht */
    }

    #spaarpot {
        width: 100%;
        height: auto;
        max-width: 100%;
        transform: scale(1.1); /* Pas de schaal aan op basis van het schermformaat */
        z-index: 1;
    }

    /* Voeg de volgende stijlen toe voor de paymentform */
    #paymentForm {
        position: absolute;
        bottom: 25px; /* Plaats de formulierdiv aan de onderkant van het scherm */
        left: 50%; /* Horizontaal centreren */
        transform: translateX(-50%); /* Horizontaal centreren */
        z-index: 0; /* Zorg ervoor dat het onder de munt en spaarpot staat */
        text-align: center;
    }
}

select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: inherit;
    /* Personalize */
    text-align: center;
    width: 20rem;
    padding: 1rem 4rem 1rem 1rem;
    background: var(--arrow-icon) no-repeat right 0.8em center / 1.4em,
      linear-gradient(to left, var(--arrow-bg) 3em, var(--select-bg) 3em);
    color: white;
    border-radius: 100px;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 250ms;
    /* Remove IE arrow */
    &::-ms-expand {
      display: none;
    }
    /* Remove focus outline */
    &:focus {
      outline: none;
    }
    /* <option> colors */
    option {
      color: inherit;
      background-color: var(--option-bg);
    }
}

select:hover {
    transform: scale(1.05) rotate(1.5deg);
}


#submitcustom {
    background-color: #0003be64; /* Blauwe tint voor oceaanwater */
    border-radius: 100px;
    box-shadow: rgba(44, 144, 187, 0.2) 0 -25px 18px -14px inset,rgba(44, 127, 187, 0.15) 0 1px 2px,rgba(44, 111, 187, 0.15) 0 2px 4px,rgba(44, 89, 187, 0.15) 0 4px 8px,rgba(44, 111, 187, 0.15) 0 8px 16px,rgba(44, 94, 187, 0.15) 0 16px 32px;
    color: white; /* Tekstkleur wit voor contrast */
    cursor: pointer;
    display: inline-block;
    font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
    margin-top: 5px;
    padding: 7px 50px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#submitcustom:hover {
    box-shadow: rgba(44, 123, 187, 0.35) 0 -25px 18px -14px inset,rgba(44, 115, 187, 0.25) 0 1px 2px,rgba(44, 104, 187, 0.25) 0 2px 4px,rgba(44, 84, 187, 0.25) 0 4px 8px,rgba(44, 111, 187, 0.25) 0 8px 16px,rgba(44, 104, 187, 0.25) 0 16px 32px;
    transform: scale(1.05) rotate(-1.5deg);
    background-color: #007bbe; /* Blauwe tint voor oceaanwater */
}