body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: url('./res/bg.jpg') no-repeat;
        background-size: cover;
        background-position-x: center;
        background-position-y: center;
        text-shadow: 0.25ch 0.25ch 2ch rgba(255, 255, 255, 0.9);
    }
    #main {
        width: 100vw;
        height: 100vh;
        backdrop-filter: blur(10px) brightness(50%);
        /* background-color: rgba(255, 255, 255, 0.5) */
        display: grid;
        align-items: center;
        justify-items: center;
        grid-template-rows: auto max-content;
    }

    .hidden {
        display: none;
        visibility: hidden;
    }

    #main-grid {
        display: grid;
        width: min(1000px, 90vw);
        height: min(500px, 80vh);
        /* background-color: rgba(255, 255, 255, 0.25); */
        background: radial-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
        border-radius: 1ch;
        grid-auto-flow: column;
        grid-template-columns: max-content auto;
        gap: 1vmin;
        overflow-y: scroll;
    }

    @media (prefers-color-scheme: dark) {
        #main-grid {
            background: radial-gradient(rgba(16, 16, 20, 0.9), rgba(16, 16, 20, 0.75));
            color: white;
        } 
    }
    
    #hadarai-image-container {
        display: grid;
        align-items: center;
        justify-items: center;
    }

    @keyframes het-beeld-in {
        0% {
            transform: translateX(-100vw);
        }
        25% {
            transform: translateX(-100vw);
        }
        100% {
            transform: translateX(0%);
        }
    }

    #hadarai-image {
        max-height: 25vh;
        max-width: 15vw;
        animation: het-beeld-in 2s forwards;
    }
    #hadarai-spells{
        padding: 0 2ch;
    }

    .spell {
        color: black;
        backdrop-filter: blur(2ch);
        padding: 2ch;
        margin: 2ch 0;
        border-radius: 1ch;
        position: relative;
        --clear: linear-gradient(lightskyblue, skyblue, deepskyblue);
        --hot: linear-gradient(transparent);
        --sunny: linear-gradient(transparent);
        --cloudy: linear-gradient(transparent);
        --night: linear-gradient(transparent);
        --rain: linear-gradient(transparent);
        --cold: linear-gradient(transparent);
        --lightning: linear-gradient(transparent);
        --humid: linear-gradient(transparent);
        --snow: linear-gradient(transparent);
        --windy: linear-gradient(transparent);
        background:var(--cold), var(--windy), var(--cloudy), var(--lightning), var(--sunny), var(--snow), var(--rain), var(--night), var(--hot), var(--humid), var(--clear);
    }

    .spell * {
        text-shadow: -0.25ch -0.25ch 1ch white, 0.25ch 0.25ch 1ch white, 0ch 0ch 1ch white, 0ch 0ch 1ch white, 0ch 0ch 1ch white;
    }
    
    .spell-title {
        font-weight: bold;
    }
    .spell-description {
        font-style: italic;
    }

        /*
    [
  "Clear",      ?
  "Sunny",      !
  "Hot",        !
  "Cloudy",     !
  "Humid",      !
  "Night",      !
  "Rain",       !
  "Lightning",  !
  "Cold",       !
  "Snow",       !
  "Windy",      !
  "Air",
  "Fire"
]*/
    .spell.trait-hot {
        --hot: radial-gradient(circle at 50% 80%, red,orangered 15%, orange 90%);
    }

    .spell.trait-sunny {
        --sunny: radial-gradient(circle at 75% 25%, orange, transparent 10%);
    } 

    .spell.trait-cloudy {
        --cloudy: left/25% radial-gradient(ellipse, white, transparent 50%);
    }

    .spell.trait-cloudy::after {
        content: '';
        position: absolute;
        top: -25%;
        left:12.5%;
        width: 77.5%;
        height: 100%;
        background: left/33% radial-gradient(ellipse, white, transparent 50%);
        z-index: -1;
    }
    .spell.trait-night {
        --night: linear-gradient(darkblue 25%, black);
    }
    .spell.trait-rain {
        --rain: bottom/20% 15% linear-gradient(
            -45deg,
            transparent  0 10%,
            aqua 10% 12%, transparent 12% 20%,
            aqua 20% 22%, transparent 22% 30%,
            aqua 30% 32%, transparent 32% 40%,
            aqua 40% 42%, transparent 42% 50%,
            aqua 50% 52%, transparent 52% 60%,
            aqua 60% 62%, transparent 62% 70%,
            aqua 70% 72%, transparent 72% 80%,
            aqua 80% 82%, transparent 82% 90%,
            aqua 90% 92%, transparent 92% 100%
        );
    }

    .spell.trait-cold {
            --cold: linear-gradient(rgba(30, 144, 255, 0.1));
    }

    .spell.trait-lightning {
        --lightning: 
        top/50% 25% no-repeat linear-gradient(-37.5deg, transparent 0 68%, white 70% 75%, transparent 77% 100%),
        left/50% 50% no-repeat linear-gradient(37.5deg, transparent 0 70.5%, white 72.5% 77.5%, transparent 79.5% 100%),
        bottom/50% 25% no-repeat linear-gradient(-37.5deg, transparent 0 63%, white 65% 70%, transparent 72% 100%)
        ;
    }

    .spell.trait-humid {
        --humid: linear-gradient(lightgrey, grey 99%)
    }

    .spell.trait-snow {
        --snow: bottom/15% 25% repeat-x radial-gradient(
            circle, white, transparent 10%
        ),  bottom/12.5% 50% repeat-x radial-gradient(
            circle, white, transparent 10%
        ), bottom/10% 75% repeat-x radial-gradient(
            circle, white, transparent 10%
        ), bottom/7.5% 37.5% repeat-x radial-gradient(
            circle, white, transparent 10%
        )
        
    }

    .spell.trait-windy {
        --windy: 
        bottom/20% 33% repeat-y linear-gradient(transparent 0% 45%, rgba(255, 255, 255, 0.4) 49% 51%, transparent 55%)
    }
    .spell.trait-windy::before {
        content: '';
        position: absolute;
        top: -10%;
        left:10%;
        width: 100%;
        height: 100%;
        background: bottom/20% 33% repeat-y linear-gradient(transparent 0% 45%, rgba(255, 255, 255, 0.4) 49% 51%, transparent 55%);
        z-index: -1;
    }

    #hadarai-update-text {
        font-size: small;
    }

    button {
        margin: 5vmin;
        background-color: darkred;
        color: white;
        border: none;
        box-shadow: 1vmin 1vmin 2vmin black;
        border-radius: 2px;
        padding: 0.5vmin;
        cursor: grab;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }

    button:hover {
        background-color: red;
    }

    button:active {
        background-color: orangered;        
    }

    #hadarai-popup {
        position: absolute;
        height: 100vh;
        width: 100vw;
        background: rgba(0, 0, 0, 0.9);
        display: grid;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    #hadarai-popup-window {
        max-width: min(90vw, 500px);
        max-height: min(90vh, 500px);
        padding: 2vmin;
        background: rgba(0, 0, 0, 0.9); 
        color: white;
    }

    .hadarai-button-collection {
        display: grid;
        grid-auto-flow: column;
    }