@import url('https://www.leerschool.be/assets/css/crowl.animations.css');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Press+Start+2P&family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/*
COPYRIGHT KRIS MERCKX - 17/10/2024
*/

:root {
    --ubuntu-font: "Ubuntu", sans-serif;
    --roboto-font: "Roboto", sans-serif;
    --bebas-font: "Bebas Neue", sans-serif;
    --blackops-font:  "Black Ops One", sans-serif;
    --neon-font:  "Tilt Neon", sans-serif;
    --press-font: "Press Start 2P", sans-serif;
    --code-font: "VT323", monospace;
    --big-font: 1.3rem;
    --normal-font: 1rem;
    --default-fontsize: 1.1rem;
    --default-font-family: var(--ubuntu-font); /* Standaard lettertype */
    --default-margin: 13px;
    --background-color: #f9f9f9;
}

/* Algemene stijlen */
body {
    margin: 0;
    font-family: var(--default-font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size:var(--default-fontsize);
}

* {
    /* Verwijder font-family hier */
    padding: 0;
    margin: 0;
    transform: translate3d(0, 0, 0);
}

.crowl-facepart-canvas,
.crowl-bodypart-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index:99999999999999999;
}


/* Licht thema */
body[data-theme="light"], .light {
    --primary-color: #333;
    --secondary-color: #fff;
    --background-color: #f9f9f9;
    --accent-color: #007bff;
    --text-color: #212121;
    --default-font-family: var(--ubuntu-font);
}

/* Ocean Breeze Theme */
body[data-theme='ocean-breeze'] {
    --primary-color: #0288D1;      /* Licht Blauw */
    --secondary-color: #B3E5FC;    /* Helder Hemelsblauw */
    --background-color: #E1F5FE;   /* Zacht Lichtblauw */
    --accent-color: #26C6DA;       /* Turkoois */
    --text-color: #212121;         /* Donker Grijs */
}

/* Sunny Day Theme */
body[data-theme='sunny-day'] {
    --primary-color: #FFA000;      /* Amber */
    --secondary-color: #FFECB3;    /* Licht Geel */
    --background-color: #FFF8E1;   /* Zacht Geel */
    --accent-color: #FF7043;       /* Oranje */
    --text-color: #424242;         /* Donker Grijs */
}

/* Midnight Blue Theme */
body[data-theme='midnight-blue'] {
    --primary-color: #1A237E;      /* Donker Indigo */
    --secondary-color: #303F9F;    /* Indigo */
    --background-color: #0D47A1;   /* Diep Blauw */
    --accent-color: #536DFE;       /* Helder Indigo */
    --text-color: #FFFFFF;         /* Wit */
}

/* Emerald Night Theme */
body[data-theme='emerald-night'] {
    --primary-color: #004D40;      /* Donker Teal */
    --secondary-color: #00695C;    /* Teal */
    --background-color: #00251A;   /* Diep Groen */
    --accent-color: #26A69A;       /* Helder Teal */
    --text-color: #FFFFFF;         /* Wit */
}

/* Teletext Theme */
body[data-theme='teletext'] {
    --primary-color: #FF0090;        /* Fel Roze */
    --secondary-color: #0AFFE9;      /* Neon Aqua */
    --background-color: #1A1A1D;     /* Donkergrijs */
    --accent-color: #FF6F00;         /* Neon Oranje */
    --text-color: #FFFFFF;           /* Wit */
    --default-font-family: var(--press-font);
}

/* Matrix Green Theme */
body[data-theme='matrix-green'] {
    --primary-color: #00FF41;        /* Matrix Groen */
    --secondary-color: #001F00;      /* Donkergroen */
    --background-color: #000000;     /* Zwart */
    --accent-color: #007F0E;         /* Diep Groen */
    --text-color: #00FF41;           /* Matrix Groen */
    --default-font-family: var(--blackops-font);
}

/* Neon Nights Theme */
body[data-theme='neon-nights'] {
    --primary-color: #8D00FF;        /* Neon Paars */
    --secondary-color: #00FFD5;      /* Neon Blauw */
    --background-color: #2C003E;     /* Donker Paars */
    --accent-color: #FF00C8;         /* Neon Roze */
    --text-color: #FFFFFF;           /* Wit */
    --default-font-family: var(--neon-font);
}


/* Futuristic Silver Theme */
body[data-theme='futuristic-silver'] {
    --primary-color: #B0B0B0;        /* Zilver */
    --secondary-color: #F0F0F0;      /* Lichtgrijs */
    --background-color: #1C1C1C;     /* Zeer Donkergrijs */
    --accent-color: #00B4FF;         /* Helder Blauw */
    --text-color: #FFFFFF;           /* Wit */
    --default-font-family: var(--blackops-font);
}

/* Code Blue Theme */
body[data-theme='code-blue'] {
    --primary-color: #0D3B66;        /* Diep Blauw */
    --secondary-color: #FAF0CA;      /* Licht Crème */
    --background-color: #1D2D50;     /* Donkerblauw */
    --accent-color: #3EC300;         /* Helder Groen */
    --text-color: #FAF0CA;           /* Licht Crème */
    --default-font-family: var(--code-font);
    --default-fontsize: var(--big-font);
}

/* Donker thema */
body[data-theme="dark"], .dark {
    --primary-color: #fff;
    --secondary-color: #333;
    --background-color: #121212;
    --accent-color: #66b2ff;
    --text-color: #FFFFFF;
}

/* iOS Theme */
body[data-theme='ios'] {
    --primary-color: #007AFF;      /* iOS Blauw */
    --secondary-color: #5AC8FA;    /* Licht Blauw */
    --background-color: #F2F2F7;   /* Zeer Licht Grijs */
    --accent-color: #FF2D55;       /* Rood Roze */
    --text-color: #1C1C1E;         /* Zeer Donker Grijs */
}

/* Windows Theme */
body[data-theme='windows'] {
    --primary-color: #0078D7;      /* Windows Blauw */
    --secondary-color: #2B88D8;    /* Medium Blauw */
    --background-color: #F3F3F3;   /* Licht Grijs */
    --accent-color: #F7630C;       /* Oranje Accent */
    --text-color: #000000;         /* Zwart */
}

/* Ubuntu Theme */
body[data-theme='ubuntu'] {
    --primary-color: #E95420;      /* Ubuntu Oranje */
    --secondary-color: #77216F;    /* Donker Paars */
    --background-color: #300A24;   /* Diep Paars */
    --accent-color: #DD4814;       /* Fel Oranje */
    --text-color: #FFFFFF;         /* Wit */
}


body{
    background-color: var(--background-color); 
}

body:fullscreen {
    background-color: var(--background-color); 
}

:fullscreen::backdrop {
    background-color: var(--background-color);
}

body:fullscreen::backdrop {
    background-color: var(--background-color);
}

app-painting {
    display: block; /* Zorgt ervoor dat custom elementen zich gedragen als blokken */
    padding: 0;
    margin: 0;
}

app-painting canvas {
    display: block; /* Voorkomt extra witruimte rondom het canvas */
    padding: 0;
    margin: 0;
}

section,
app-part,
form,
input-checker,
input-range,
input-text,
input,
textarea,
article,
form button{
    margin:var(--default-margin);
}

input-checker,
input-range,
input-text{
    display:block;
}

app-map {
    display: block;
}
app-map #map {
    width: 100%;
    height: 100%;
}

/*fonts*/
.ubuntu-font {
    font-family: var(--ubuntu-font);
}

.bebas-font {
    font-family: var(--bebas-font);
}

.roboto-font {
    font-family: var(--roboto-font);
}

.normal-font {
    font-size: var(--normal-font);
}

.big-font {
    font-size: var(--big-font);
}

.head-font {
    font-size: 2.3rem;
}

/*sticky*/
.topleft {
    position: fixed;
    top: 13px;
    left: 13px;
}

.topright {
    position: fixed;
    top: 13px;
    right: 13px;
}

.bottomleft {
    position: fixed;
    bottom: 13px;
    left: 13px;
}

.bottomright {
    position: fixed;
    bottom: 13px;
    right: 13px;
}

/* Flex rijen en kolommen */
.row,
app-row {
    display: flex;
    flex-wrap: wrap;
}

.column {
    padding: 10px;
}

/* Kolombreedtes instellen */
.column-1 {
    flex: 1;
}

.column-2 {
    flex: 2;
}

.column-3 {
    flex: 3;
}

/* Grid rijen en kolommen */
.grid {
    display: grid;
    grid-gap: 10px;
}

/* Voorbeeld grid kolombreedtes */
.grid-columns-2-1 {
    grid-template-columns: 2fr 1fr;
}

.grid-columns-1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
}

/* Menu's en navigatie */
nav {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin-right: 15px;
}

nav a {
    color: var(--secondary-color);
    text-decoration: none;
}

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

/* Select en dialog elementen */
select, dialog {
    padding: 10px;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog {
    border-radius: 5px;
    flex-direction: column;
    min-height: 300px;
    position: fixed; /* Zorgt ervoor dat het venster altijd in het zicht blijft */
    top: 50%; /* Plaats het dialoog op 50% van het scherm */
    left: 50%; /* Plaats het dialoog op 50% van het scherm */
    transform: translate(-50%, -50%); /* Centreer het dialoog op basis van de eigen breedte en hoogte */
    background-color: white; /* Voeg een achtergrondkleur toe */
    padding: 20px; /* Optioneel: wat padding binnen het dialoog */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optioneel: een schaduw voor visuele diepte */
}

.appalert {
    position: fixed;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    color: var(--secondary-color);
    padding: 15px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.appalert button{
    margin-top:13px;
    margin-left:0px !important;
}

/* Input elementen */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

/**/
button,
app-alert{
    user-select: none;
}

/* Knoppen */
button,
app-image-recognition button {
    padding: 13px 26px !important;
    font-family: var(--default-font-family);
    background-color: var(--accent-color);
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    user-select: none;
}

.rounded {
    border-radius: 6.5px;
}

button:hover {
    background-color: var(--secondary-color); /* Donkerdere tint van accentkleur */
    color:var(--primary-color);
}

/* Hulpfuncties voor thema wisseling */
.toggle-theme {
    background: var(--accent-color);
    color: var(--secondary-color);
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}



/* Responsieve afbeeldingen */
img {
    max-width: 100%;
    height: auto;
}

/* Overige hulpelementen */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    margin-top: 0;
}

p {
    line-height: 1.6;
}

/* Lijsten */
ul, ol {
    margin: 0 0 1em 1.5em;
}

/* Links */
a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Tabellen */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

th, td {
    padding: 10px;
    border: 1px solid var(--primary-color);
}

th {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

/* Formulieren */
label {
    display: block;
    margin-bottom: 5px;
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: 5px;
}

/* Meldingen */
.alert {
    padding: 15px;
    background-color: #f44336;
    color: white;
    margin-bottom: 20px;
}

.alert.success { background-color: #4CAF50; }
.alert.info { background-color: #2196F3; }
.alert.warning { background-color: #ff9800; }

/* Schakelaars */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.terminal-content{
    word-wrap: break-word; /* Voor oudere browsers */
    overflow-wrap: break-word; /* Moderne standaard */
    word-break: break-word; /* Voor uitzonderlijk lange woorden */
}
  

input:checked + .slider {
    background-color: var(--accent-color);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

iframe{
    border:0px;
    width:100%;
    aspect-ratio: 4 / 3; /* Houdt een 4:3-verhouding aan */
}

img{
    max-width:100%;
}

upload-zone{
    width:300px;
    height:300px;
    border: 1px solid var(--secondary-color);
    color:var(--primary-color);
    display:inline-flex;
    justify-content: center;
    align-items:center;
    cursor:pointer;
}

upload-zone *{
    cursor:pointer;
}

/* Inklapbaar Panel */
.collapsible,
panel-accordeon {
    position: relative;
    border: 1px solid var(--primary-color);
    border-radius: 6.5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.collapsible input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.collapsible .collapsible-header {
    display: block;
    cursor: pointer;
    padding: 13px 26px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: var(--big-font);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collapsible .collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out, visibility 0s 0.25s; /* Vertraag zichtbaarheid na de overgang */
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 0 13px;
    pointer-events: none; /* Klikken uitschakelen */
    visibility: hidden; /* Verberg element als het ingeklapt is */
}

.collapsible input[type="checkbox"]:checked ~ .collapsible-content {
    max-height: 1000px; /* Pas dit aan afhankelijk van de hoeveelheid content */
    padding: 13px;
    pointer-events: all; /* Klikken inschakelen wanneer uitgeklapt */
    visibility: visible; /* Maak het element zichtbaar */
    transition: max-height 0.25s ease-in-out, visibility 0s; /* Direct zichtbaar maken tijdens de overgang */
}


.collapsible .collapsible-icon {
    transition: transform 0.2s;
}

.collapsible input[type="checkbox"]:checked ~ .collapsible-header .collapsible-icon {
    transform: rotate(90deg);
}

canvas.disabled {
    pointer-events: none; /* Schakel klikken uit wanneer ingeklapt */
}


app-part{
    margin:0;
    padding:0;
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 10px;
}

/* Media queries voor responsiviteit */
@media (max-width: 768px) {
    .row,
    app-row {
        flex-direction: column;
    }

    nav ul {
        flex-direction: column;
    }

    nav li {
        margin: 0 0 10px 0;
    }
}


  .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
   

@media print {
    form,
    button,
    label,
    select,
    .topright {
        display: none;
    }

    body{ 
        background-color:white;
    }    
}


.terminal {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 13vh;
    overflow-y: auto;
    background-color: #333;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-top: 2px solid #444;
    font-family: monospace;
    font-size: 14px;
}

/* Stijl voor de sluitknop in de terminal */
.terminal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    bottom:10px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

app-sensor{
    display:none;
}


@media (max-width: 960px) {
    body[data-theme="light"],
    body[data-theme="dark"],
    body[data-theme="ocean-breeze"],
    body[data-theme="sunny-day"],
    body[data-theme="midnight-blue"],
    body[data-theme="emerald-night"],
    body[data-theme="teletext"],
    body[data-theme="matrix-green"],
    body[data-theme="neon-nights"],
    body[data-theme="futuristic-silver"],
    body[data-theme="code-blue"],
    body[data-theme="ios"],
    body[data-theme="windows"],
    body[data-theme="ubuntu"] {
        --big-font: 1.2rem;
        --normal-font: 1rem;
        --default-fontsize: 1.05rem;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: calc(var(--big-font) + 0.3rem);
    }

    p {
        font-size: var(--default-fontsize);
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    nav li {
        margin: 0 10px 10px 10px;
    }

    .container {
        padding: 5px;
    }
}


@media (max-width: 480px) {
    body[data-theme="light"],
    body[data-theme="dark"],
    body[data-theme="ocean-breeze"],
    body[data-theme="sunny-day"],
    body[data-theme="midnight-blue"],
    body[data-theme="emerald-night"],
    body[data-theme="teletext"],
    body[data-theme="matrix-green"],
    body[data-theme="neon-nights"],
    body[data-theme="futuristic-silver"],
    body[data-theme="code-blue"],
    body[data-theme="ios"],
    body[data-theme="windows"],
    body[data-theme="ubuntu"] {
        --big-font: 1rem;
        --normal-font: 0.8em;
        --default-fontsize: 0.9rem;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: calc(var(--big-font) + 0.2rem);
    }

    p {
        font-size: var(--normal-font);
    }

    nav ul {
        flex-direction: column;
    }

    nav li {
        margin-bottom: 10px;
    }
}