:root                           {
    --lettertype-koppen:"Big Shoulders Text",cursive;
    --lettertype-tekst:"Quicksand",cursive;

    --breedte-items:350px;
}


@keyframes statisch {
  from {
    background-size: 100% 100%;
  }

  to {
    background-size: 200% 200%;
  }
}


@keyframes activated {
  from {
    transform:rotate(-15deg);
    opacity:0.3;
    box-shadow:none;
  }

  to {
    transform:rotate(15deg);
    opacity:0.5;
    box-shadow: 0px 0px 75px 0px #07aa07;
  }
}


*                               { margin:0;padding:0;box-sizing:border-box;outline:none;user-select:none;list-style:none;text-decoration:none; }

html                            { font-size:16px; }
body                            { font-family:var(--lettertype-tekst);height:100vh;width:100%;overflow:hidden;color:#222;position:relative; }
#ufocontainer                   { position:absolute;width:400px;height:400px;z-index:100; }
#ufocontainer canvas            { position:relative;width:400px !important;height:400px !important;z-index:2;pointer-events:none; }
#ufocontainer .schaduw          { position:absolute;left:155px;bottom:155px;width:87px;height:57px;background-color:#000;border-radius:50%;z-index:1;opacity:0.3;transition:all 1300ms ease-out; }
.airborn #ufocontainer .schaduw { width:107px;height:67px;filter:blur(15px);left:150px;bottom:150px;opacity:0.1;transition:all 1300ms ease-in; }
#ufocontainer .straal           {  }
#ufocontainer .kruis            { position:absolute;left:188px;top:201px;transform:rotateX(45deg) rotateZ(-35deg);transform-origin:center center;color:#07aa07;font-size:30px;width:30px;height:30px;display:flex;justify-content:center;align-items:center;font-weight:700;z-index:2; }

h1,h2,h3.h4.h5                  { font-family:var(--lettertype-koppen); }

h2                              { color:#000;font-size:2rem;margin-bottom:10px;font-weight:700; }

#kijkvenster                    { position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%; }
#oppervlakte                    { min-width:100%;min-height:100%;background:url("../afbeeldingen/achtergrond.stof.png") center center repeat rgb(209,209,209);position:absolute;left:0px;top:0px;padding:250px 800px; }

#map                            { opacity:0.4;position:fixed;z-index:3;width:300px;height:300px;display:flex;align-items:center;justify-content:center;background-color:rgba(20,20,20,0.75);color:rgba(255,255,255,0.15);text-transform:uppercase;font-weight:700;font-size:5rem;outline:1px solid #fff;outline-offset:-1px; right:20px;bottom:20px;font-family:var(--lettertype-koppen);overflow:hidden;  }
#map .kijkvenster               { position:absolute;display:flex;align-items:center;justify-content:center;width:200px;height:200px;background-color:rgba(2552,255,255,1);color:rgba(0,0,0,0.55);border:1px solid #000;left:0px;top:0px;text-transform:uppercase;font-size:3rem;mix-blend-mode:difference; }

main                            { display:flex;flex-direction:row;justify-content:center;align-items:center;gap:30px;transform:rotateX(45deg) rotateZ(-35deg);transform-origin:center center; }
main>ul                         { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px; }
main>ul>li                      { background-color:#c5c5c5;box-shadow:-5px 5px 5px 0px #c5c5c5;transition:all ease-in-out 200ms;position:relative; }
main>ul>li>a                    { position:relative;display:block;transition:filter ease-in-out 150ms,opacity ease-in 200ms,transform ease-in-out 200ms;width:var(--breedte-items);background-color:#fff;color:inherit;min-height:300px;filter:grayscale(100%); }
.airborn main>ul>li>a .landpad  { display:flex; }
.airborn main>ul>li.activated>a .landpad  { animation-name:activated;animation-duration:300ms;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out; }
main>ul>li>a .landpad           { position:absolute;left:calc(50% - 50px);top:calc(50% - 50px);border-radius:50%;transform:rotate(-15deg);color:#07aa07;display:none;justify-content:center;align-items:center;font-size:35px;font-weight:700;border:3px dashed #07aa07;width:100px;height:100px;z-index:10;opacity:0.2 }
main>ul>li>a .afbeelding        { height:calc(var(--breedte-items) / 400 * 200);background-size:cover;background-position:center center;background-color:#222; }
main>ul>li>a .informatie        { transition:all ease-in-out 150ms;opacity:0.5;padding:15px 15px 5px 15px; }
main>ul>li>a .informatie p      { margin-bottom:10px; }
main>ul>li>a .informatie p.notitie  { font-size:0.85em;color:#444; }
main>ul>li>a .tags              { padding:15px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:flex-start;gap:5px; }
main>ul>li>a .tags>div          { position:relative;display:block;border-radius:10px;color:#fff;background-color:#666;padding:5px 10px;font-weight:400;text-shadow:0px 0px 1px #000000,0px 0px 5px #000000;overflow:hidden; }
main>ul>li>a .tags .statisch    { position:absolute;width:100%;height:100%;left:0px;top:0px;background-image:repeating-radial-gradient(circle at 17% 32%,white,black 0.00085px);z-index:2;animation:statisch 10s linear infinite;animation-play-state:paused;opacity:0.2;mix-blend-mode:hard-light; }
main>ul>li>a .tags span         { position:relative;z-index:3;font-size:0.9mystery5em; }
main>ul>li.activated,
main>ul>li:hover                { box-shadow:-5px 5px 10px 2px #b6b6b6;background-color:#b6b6b6; }
main>ul>li.activated>a,
main>ul>li:hover>a              { transform:translateX(10px) translateY(-25px);filter:grayscale(0%); }
main>ul>li.activated>a .informatie,
main>ul>li:hover>a .informatie  { opacity:1; }
main>ul>li.activated>a .tags .statisch,
main>ul>li:hover>a .tags .statisch  { animation-play-state:running;opacity:0.35; }
main>ul>li>a .tags .ai          { background-color:#16ff22; }
main>ul>li>a .tags .html        { background-color:#e54c21; }
main>ul>li>a .tags .css         { background-color:#146cae; }
main>ul>li>a .tags .javascript  { background-color:#ead41c; }
main>ul>li>a .tags .babylonjs   { background-color:#b14247; }
main>ul>li>a .tags .driedobject { background-color:#005f00; }
main>ul>li>a .tags .audio       { background-color:#cf183e; }
main>ul>li>a .tags .gamepad     { background-color:#5d1068; }
main>ul>li>a .tags .svg         { background-color:#17a094; }
main>ul>li>a .tags .localstorage{ background-color:#b4b4b4; }
main>ul>li>a .tags .canvas      { background-color:#d43c83; } 
main>ul>li>a .tags .gif         { background-color:#289b11; }
main>ul>li>a .tags .responsive  { background-color:#131952; }

@media screen and (max-width:999px) {
    *                           { user-select:auto; }
    #map                        { display:none; }
    main                        { display:block;transform:none; }
    main>ul                     { display:block; }
    main>ul>li                  { margin-bottom:10px; }
    body                        { height:auto;overflow:auto; }
    #kijkvenster                { position:static;height:auto;padding:0px; }
    #oppervlakte                { position:static;padding:20px; }
    main>ul>li                  { box-shadow:none !important;}
    main>ul>li>a                { width:auto !important;min-height:none;filter:grayscale(0%) !important;transform:none !important;box-shadow:none !important;}
    main>ul>li>a .tags .statisch  { animation-play-state:running !important;opacity:0.35 !important; }
}