/* =========================
   1. GLOBALE VARIABELEN
   ========================= 
   Hier beheren we de kleuren en randen zodat alles Matcht met stijl 1. */
:root {
    --border-width: 6px;
    --border-style: groove;
    --border-radius: 30px;
    --border-color: rgb(124, 151, 45);
}

/* =========================
   2. FONT IMPORT
   ========================= */
@font-face {
    font-family: 'fwont';
        src: url("../fonts/Sprintura Demo.otf");
}

/* =========================
   3. BODY & ACHTERGROND
   ========================= */
body {
    font-family: 'fwont', sans-serif;
        background: url("../img/Ubuntu-Mate-Cold-no-logo.PNG") no-repeat fixed center/cover;
        margin: 0;
        color: white;
}

a {
    color: white;
}

a:hover {
    color: rgb(4, 70, 4);
}

/* =========================
   4. NAVIGATIE (STIJL 1)
   ========================= */
nav {
    font-family: fwont;
    backdrop-filter: blur(5px);
        width: 100%;
        padding: 10px 0px;
    color: rgb(0, 0, 0);
    border: 2px solid black;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
}

nav a {
    background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
    text-align: center;
    padding: 5px 10px;
    max-width: 900px;
        border: var(--border-width) var(--border-style);
            border-color: var(--border-color);
            border-radius: var(--border-radius);
}

/* =========================
   5. WELKOM TITEL
   ========================= */
.welko {
    display: flex;
    justify-content: center;
    margin: 20px auto;
}

.welko h1 {
    padding: 10px 30px;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
}

/* =========================
   6. CONTENT SECTIES (SPELLEN)
   ========================= */
.spellen {
    display: flex;
    flex-direction: column;
        gap: 30px;
        max-width: 1100px;
        margin: 50px auto;
        padding: 10px;
}

.dobbelsteen,
.hl,
.casno,
.sps {
    width: 100%;
    display: flex;
    flex-direction: row;
        /* Standaard naast elkaar */
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        /* Belangrijk: zorgt dat ze onder elkaar gaan zonder @media */
        gap: 20px;
}

/* Wisselt de volgorde af (Tekst links/rechts) */
.casno,
.hl {
    flex-direction: row-reverse;
}

/* =========================
   7. TEKSTVAKKEN & PLAATJES
   ========================= */
.dobbelsteen-text,
.casno-text,
.sps-text,
.hl-text {
    flex: 1;
    min-width: 300px;
    /* Zorgt dat het vak niet te smal wordt */
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
}

.dobbelsteen-plaatje img,
.casno-plaatje img,
.sps-plaatje img,
.hl-plaatje img {
    width: 500px;
    max-width: 100%;
    /* Plaatje wordt nooit breder dan het scherm */
    height: 300px;
    object-fit: contain;
        background-color: rgb(0, 0, 0);
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
}

/* =========================
   9. FOOTER
   ========================= */
footer {
    max-width: 1000px;
    width: 100%;
    margin: auto;
}
footer ul {
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid;
    padding: 5px;
    color: white;
}
footer a {
    border: none;
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}