@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700|Quattrocento:700');
@import url('http://fonts.googleapis.com/css?family=Luckiest+Guy');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet');


@font-face {
  font-family: 'Rage Italic';
  src: url('fonts/rage_italic.ttf') format('truetype');
}


body {
    font-family: 'Open Sans', sans-serif;
    background-color: #060C14; 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #333;
    transition: color 0.6s, background-color 0.6s;
}

h1, h2 {
    text-align: center;
    font-family: 'Quattrocento', sans-serif;
    margin: 0;
}

h1 {
    font-size: 36px;
    font-family: Rage Italic, cursive;
    margin-bottom: 15px;
    color: #CA922C;
}

h2 {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #050314;
}

.header {
    padding: 1em 0;
}

.container {
    max-width: 900px;
    max-height: auto; /* of een vaste hoogte */
    margin: 0 auto;
    padding: 30px;
    background: linear-gradient(to bottom, #fdfdfd, #acadb1);
    border: 3px solid #CA922C;
    border-radius: 15px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.outerContainer {
    max-height: auto; /* of een vaste hoogte */
    overflow-y: auto;
}

.buttom {
    font-size: 14pt;
    text-align: center;
    color: #505050;
    max-width: 350px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(to bottom, #fdfdfd, #acadb1);;
    border: 3px solid #4CAF50;
    border-radius: 15px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.switched .container {
    transition: background-color 0.6s;
}

p {
    font-size: 13pt;
    color: #000000;
    line-height: 1.5em;
    text-align:center;
}

a {
    font-weight: 700;
    color: #3D3D3D;
    font-family: Source Code Pro;
    transition: color 0.6s;
    text-decoration: none;
    text-align: center;
}

a:hover {
    color: #CA922C;
    transition: color 0.1s;
}

strong {
    color: #333;
    font-weight: bold;
}

img {
    display: block;
    margin: 0 auto;
    max-width:40%;
    max-height: 300px;
}

.choice {
    text-align: center;
    line-height: 1.7em;
}

.choice a {
    font-size: 15pt;
    color: #3D3D3D;
}

.choice a:hover {
    color: #CA922C;
    transition: color 0.1s;
}

.end {
    text-align: center;
    font-weight: bold;
    color: #000000;
    padding: 20px;
}

#controls {
    z-index: 3;
    font-size: 9pt;
    text-align: center;
    position: sticky;
    max-width: 150px;
    right: 10px;
    left: 10px;
    top: 10px;
    user-select: none;
    background: linear-gradient(to bottom, #fdfdfd, #dadbdf);;;
    border: 3px solid #CA922C;
    border-radius: 5px;
}

#controls [disabled] {
    color: #ccc;
}

#controls>*:not(:last-child):after {
    content: " | ";
}

.blogo img {
  width: 20% ;
  height: auto ;
  max-width: 200px;
}


/* Custom styles for specific classes */
.water {
    font-weight: bold;
    color: #1c92ff;
}

.food {
    font-weight: bold;
    color: #ff9900;
}

.slime {
    font-weight: bold;
    color: #00b718;
}

.chosen-choice {
    font-style: italic;
    font-size: 13pt;
}

.pain {
    font-weight: bold;
    color: red;
}

.black {
    font-weight: bold;
    color: black;
}

.strip {
    font-weight: bold;
    color: #f542e3;
}

.kiss {
    font-weight: bold;
    color: hotpink;
}

.green {
    font-weight: bold;
    color: green;
}

.blue {
    font-weight: bold;
    color: blue;
}

.pink {
    font-weight: bold;
    color: deeppink;
}

.mud {
    font-weight: bold;
    color: goldenrod;
}

.yellow {
    font-weight: bold;
    color: gold;
}

.red {
    font-weight: bold;
    color: red;
}

.tred {
    font-weight: bold;
    color: red;
}

.white {
    font-weight: bold;
    color: white;
}

.brief {
    font-style: italic;
    text-align: center;
    font-family: 'Quattrocento', Georgia, 'Times New Roman', Times, serif;
}

/* Timer styles */
.timer {
    font-size: 14pt; /* Grote letters */
    color: #ec5c22; /* Rode kleur */
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em; /* Voeg wat ruimte toe onder de timer */
    display: none; /* Verberg de timer standaard */
}

#timerContainer {
max-height: 100px;
max-width: 250px;
margin-top: 5px;
margin-bottom: 5px;
padding: 20px;
}

/* Nieuwe CSS voor oranje gloed */
/* Deze klasse wordt nu toegepast op de BODY */
.orange-glow-mode {
    position: relative; /* Nodig voor de pseudo-element overlay */
    overflow-x: hidden; /* Verberg horizontale overloop */
}

.orange-glow-mode::before {
    content: '';
    position: fixed; /* Zorgt ervoor dat de overlay de hele viewport bedekt */
    top: 0;
    left: 0;
    width: 100vw; /* Volledige breedte van de viewport */
    height: 100vh; /* Volledige hoogte van de viewport */
    background-color: rgba(255, 165, 0, 0.2); /* Oranje met 20% dekking */
    box-shadow: 0 0 100px 50px rgba(255, 165, 0, 0.5) inset; /* Oranje gloed naar binnen */
    pointer-events: none; /* Zorgt ervoor dat de overlay geen interacties blokkeert */
    z-index: 99; /* Zorg dat het boven alles ligt, behalve mogelijk je timer */
    animation: pulse-orange 1.5s infinite alternate; /* Optionele pulserende animatie */
}

@keyframes pulse-orange {
    from {
        background-color: rgba(255, 165, 0, 0.1);
        box-shadow: 0 0 80px 40px rgba(255, 165, 0, 0.4) inset;
    }
    to {
        background-color: rgba(255, 165, 0, 0.3);
        box-shadow: 0 0 120px 60px rgba(255, 165, 0, 0.6) inset;
    }
}

/* Pas de z-index van je timer aan zodat deze boven de gloed blijft */
#timerContainer {
    z-index: 100; /* Hoger dan de .orange-glow-mode::before z-index */
    /* De rest van je #timerContainer stijlen blijven hier */
    max-height: 100px;
    max-width: 250px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 20px;
}

/* Als je de achtergrondafbeelding op de body zelf hebt, wil je misschien dat deze
   zichtbaar blijft door de gloed heen, dus geen background-image op .orange-glow-mode */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #060C14; 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #333;
    transition: color 0.6s, background-color 0.6s;
}

/* Eventueel de 'outerContainer' resetten als je daar eerder een achtergrond op had */
.outerContainer {
    background: none; /* Of verwijder deze regel als er geen achtergrond was */
    /* De rest van je .outerContainer stijlen */
    max-height: auto;
    overflow-y: auto;
}

/* Algemene val-overlay animatie */
@keyframes coloredFall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
        /* Achtergrondkleur wordt ingesteld via JavaScript */
    }
    10% {
        transform: translateY(0%);
        opacity: 0.7;
    }
    90% {
        transform: translateY(0%);
        opacity: 0.7;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.colored-overlay { /* Algemene klasse voor alle kleur-overlays */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    animation: coloredFall 3s ease-out forwards; /* Alle animaties nu 3 seconden */
    display: none; /* Standaard verborgen */
}

/* Specifieke kleuren voor de overlays */
.colored-overlay.green-type {
    background: linear-gradient(to bottom, rgba(0, 183, 24, 0.8), rgba(0, 183, 24, 0.4)); /* Groen slijm */
}

.colored-overlay.red-type {
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.4)); /* Rood (bijv. tomatensoep) */
}

.colored-overlay.mud-type {
    background: linear-gradient(to bottom, rgba(199, 190, 152, 0.6), rgba(177, 141, 114, 0.1)); /* Modder (bruin/geelbruin) */
}

.colored-overlay.blue-type {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0.4)); /* Blauw (water) */
}


/* BESTAANDE ORANJE GLOED - Zorgt dat deze ook 5 seconden duurt, als je de animatie wilt aanpassen.
   Als je wilt dat de oranje gloed zijn eigen snelheid behoudt, laat dan 'animation' weg hier.
   Hier ga ik ervan uit dat ook deze 5 seconden moet duren voor consistentie. */
@keyframes pulse-orange {
    from {
        background-color: rgba(255, 165, 0, 0.1);
        box-shadow: 0 0 80px 40px rgba(255, 165, 0, 0.4) inset;
    }
    to {
        background-color: rgba(255, 165, 0, 0.3);
        box-shadow: 0 0 120px 60px rgba(255, 165, 0, 0.6) inset;
    }
}

.orange-glow-mode::before {
    /* ... andere stijlen ... */
    animation: pulse-orange 5s infinite alternate; /* Animatie duur nu 5 seconden */
}

/* Zorg ervoor dat de z-index van de timer en controls hoger is dan de overlays */
#timerContainer {
    z-index: 1001; /* Hoger dan .colored-overlay */
}
#controls {
    z-index: 1002; /* Hoger dan .colored-overlay */
}

/* Zorg dat de body's achtergrondafbeelding altijd zichtbaar blijft door overlays heen */
body {
    background-color: #060C14;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* ... andere stijlen ... */
}