.bord {

    display: grid;

    grid-template-columns: 100px 100px 100px;

    grid-template-rows: 100px 100px;

    grid-gap: 10px;

}



.vakje {

    position: relative;

    border: 1px solid black;

    background-color: red;

    color: white;

    font-size: 2em;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

}



.muntje {

    position: relative;

    width: 25px;

    height: 25px;

    border: 0.5px solid black;

    background-color: azure;

    color: black;

    font-size: 0.5em;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;



}



.tafel {

    /* border: 0.5px solid white; */

    background-color: green;

    color: white;

    display: flex;

}



.container_singles {

    display: flex;

    flex-direction: column;
    /* width: 90%; */

}



.container_singles_col {

    display: flex;

    flex-direction: row;
    width: 100%;

}



.container_thirds {

    display: flex;

    flex-direction: row;
}



.container_oneintwos {

    display: flex;
    flex-direction: row;

}



.oneintwo {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 0.5px solid white;

    padding: 10px 0;

}



.third {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    border: 1px solid white;

    padding: 10px 0;

}



.single {

    /* width: 90%; */
    /* padding: 15px;
     */
    width: 50px;
    height: 50px;

    /* height: 50px; */

    border: 1px solid white;

    display: flex;

    justify-content: center;

    align-items: center;

}



.red {

    background-color: red;

    color: white;

}



.black {

    background-color: black;

    color: white;

}

.container_tafel_zero {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 5%; */
    writing-mode: vertical-lr;
    font-size: 5vh;
    font-weight: bold;
    border: 0.5px solid white;
    height: 154.8px;
    font-size: 20px;


}



body {
    background-image: url(Images/360_F_1063814348_hgCSgmz8FK8fL1R4JYU68YI4ksqbBGPO.jpg);
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container_tafel_columns {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    position: relative;
    bottom: 20px;
    right: 50px;

}

img {
    width: 400px;
    height: 400px;
}

.game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}



.Roulettewheel {
    width: 400px;
    height: 400px;
    border-radius: 50px;
    background-size: cover;
    background-image: url(Images/roulette_cilinder.png);
}



:root {

    --rotation1: 0;

    --rotation2: 0;

    --rotation3: 0;

    --rotation4: 0;

    --rotation5: 0;

    --rotation6: 0;

    --randomend: 0;

}



@keyframes rotate {

    0% {

        transform: rotate(0deg);

        /* Begin */

    }



    10% {

        transform: rotate(calc(var(--rotation1) * 360deg));

        /* Langzaam begin */

    }



    30% {

        transform: rotate(calc(var(--rotation2) * 360deg));

        /* Versnelling begint */

    }



    50% {

        transform: rotate(calc(var(--rotation3) * 360deg));

        /* Maximum snelheid */

    }



    70% {

        transform: rotate(calc(var(--rotation4) * 360deg));

        /* Afremmen begint */

    }



    90% {

        transform: rotate(calc(var(--rotation5) * 360deg));

        /* Bijna stilstand */

    }



    100% {

        transform: rotate(calc(var(--rotation6) * 360deg));

        /* Einde */

    }

}

.chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;

    right: 20px;

    top: 50%;
    transform: translateY(-50%);
}

.chip {
    width: 60px;
    height: 60px;
   
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
   
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Kleuren voor verschillende waarden */
.chip[data-value="5"] {
   background-image: url(Images/chip5.png);
   background-size: cover;
}

.chip[data-value="10"] {
    background-image: url(Images/chip10.png);
    background-size: cover;
}

.chip[data-value="20"] {
    background-image: url(Images/chip20.png);
    background-size: cover;
    padding-right: 10px;
}

.chip[data-value="50"] {
    background-image: url(Images/chip50.png);
    background-size: cover;
    padding-right: 10px;
}

/* Hover-effect voor visuele feedback */
.chip:hover {
    transform: scale(1.1);
    /* Vergroot de chip een beetje */
    box-shadow: 0 0 10px rgba(255, 255, )
}

.single:hover,
.oneintwo:hover,
.third:hover {
    background-color: yellow;
    color: black;
    cursor: pointer;
}

.spin-button {
    position: absolute;
    right: 20vw;
    /* Zelfde uitlijning als de chips */
    bottom: 10px;
    transform: translateY(-50%);
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    background-color: red;
    /* Oranje kleur */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
}

/* Hover-effect voor de spin-knop */
.spin-button:hover {
    transform: scale(1.1);
    /* Vergroot de knop lichtjes */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Actieve knop-effect (wanneer erop wordt geklikt) */
.spin-button:active {
    transform: scale(0.95);
    /* Knop wordt iets kleiner */
    background-color: #cc5200;
    /* Donkerdere oranje kleur */
}

.container{

    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 245px;
    padding-left: 1vw;
}

.balans {
    background-color: darkgreen;
    /* Blauwe achtergrondkleur */
    color: white;
    /* Witte tekstkleur */
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    width: 170px;

}


.Roulettewheel_animatie{
    animation: rotate 4s linear;

    animation-fill-mode: forwards;
}

.BettingAmount{
    background-color: darkgreen;
    /* Blauwe achtergrondkleur */
    color: white;
    /* Witte tekstkleur */
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    width: 170px;
   
}


.RouletteNumber{
    background-color: darkgreen;
    /* Blauwe achtergrondkleur */
    color: white;
    /* Witte tekstkleur */
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    width: 170px;
    
}

.Highscore{
    background-color: darkgreen;
    /* Blauwe achtergrondkleur */
    color: white;
    /* Witte tekstkleur */
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    width: 170px;
   
}