@property --a {
    syntax: "<number>";
    initial-value: 0.85;
    inherits: false;
}

@property --b {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --c {
    syntax: "<number>";
    initial-value: 0.85;
    inherits: false;
}

@property --d {
    syntax: "<number>";
    initial-value: 0.85;
    inherits: false;
}

@property --e {
    syntax: "<length>";
    initial-value: 1000px;
    inherits: false;
}

@property --f {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --g {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}



.container {
    width: 70vw;
    height: 56vh;
    perspective: 100vw;
    z-index: 9999;
    position: fixed;
    top: 32%;
    left: 50%;

    transform: translate(-50%, -50%);
    opacity: 100;
    pointer-events: none;
}




.cube {


    width: 70vw;
    height: 56vh;
    transform-style: preserve-3d;
    transition: --a 2s, --b 1s, --c 2s, --d 2s, --e 2s, --f 1s, --g 1s;
    transform:
        scaleX(var(--a)) scaleY(var(--c)) scaleZ(var(--d)) rotateX(var(--f)) rotateY(var(--b)) rotateZ(var(--g)) translateX(0vw) translateY(0) translateZ(0px) skewX(0deg) skewY(0deg);
}



.cube-wrap {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}




.back {
    transform: translateZ(-35vw) rotateY(180deg);
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;

    width: 70vw;
    height: 56vh;

    z-index: 9;
    opacity: 1;
}

.front {
    transform: translateZ(35vw) rotateY(0deg);
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;

    width: 70vw;
    height: 56vh;
    z-index: 9;
    opacity: 1;
}

.left {
    transform: translateX(-35vw) rotateY(-90deg);
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;

    width: 70vw;
    height: 56vh;

    z-index: 9;
}

.right {
    transform: translateX(35vw) rotateY(90deg);
    border: 0px solid rgb(255, 0, 0);
    box-sizing: border-box;

    width: 70vw;
    height: 56vh;

    z-index: 9;
}

.face {

    position: absolute;
    display: block;
    align-items: normal;
    justify-content: left;
    font-size: 20px;
    line-break: strict;
    overflow: hidden;
    word-wrap: break-word;

    transition: background-color 0s;
    background-color: rgb(230, 230, 230, 0);



}

@font-face {
    font-family: "BellGothic-Light";
    src: url("./fonts/BellGothic-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Metal Mania";
    src: url("./MetalMania-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Anton";
    src: url("./Anton-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Special Elite";
    src: url("./SpecialElite-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("./BebasNeue-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Creepster";
    src: url("./Creepster-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Oswald";
    src: url("./Oswald-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Bungee";
    src: url("./Bungee-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Alfa Slab One";
    src: url("./AlfaSlabOne-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Jost";
    src: url("./Jost-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: "Monoton";
    src: url("./Monoton-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Staatliches";
    src: url("./Staatliches-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Bangers";
    src: url("./Bangers-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Permanent Marker";
    src: url("./PermanentMarker-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "UnifrakturCook";
    src: url("./UnifrakturCook-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Archivo Black";
    src: url("./ArchivoBlack-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}







.turn {
    top: 0%;
    position: absolute;
    font-size: 20px;
    /* left: 50%;
        transform: translate(-50%, -50%);*/
    z-index: 999;
    color: rgb(255, 0, 0);
    left: 0%;
    filter: invert(100%);
    mix-blend-mode: difference;
    opacity: 0;
}












.joke {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color: #ff0000;
    z-index: 10;
    font-size: 40px;
    opacity: 0;
}

.tt {
    color: rgb(0, 0, 0);
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    font-size: 20px;
    text-align: center;
}

.info-exhibition {

    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;
    text-align: center;
    z-index: 1;
    font-size: 35px;
    padding-bottom: 20px;
    width: 100%;
    pointer-events: none;
}

.exhibition{
     color: #fffb00;
font-size: 30px;
font-family: 'Archivo Black', Impact, sans-serif;
line-height: 1.15;
    -webkit-text-stroke: 1px rgb(0, 0, 0);

}

.bold{
    font-weight: bold;
        font-family: 'Archivo Black', Impact, sans-serif;
        color: #ffffff;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
        font-size: 30px;
        line-height: 1.15;

}


.ttR {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: white;
  font-size: 130px;
  text-transform: uppercase;
  text-shadow:
    -5px -5px 0 #000,
     5px -5px 0 #000,
    -5px  5px 0 #000,
     5px  5px 0 #000,
     0px -5px 0 #000,
     0px  5px 0 #000,
    -5px  0px 0 #000,
     5px  0px 0 #000,
    -3px -5px 0 #000,
     3px -5px 0 #000,
    -3px  5px 0 #000,
     3px  5px 0 #000,
    -5px -3px 0 #000,
     5px -3px 0 #000,
    -5px  3px 0 #000,
     5px  3px 0 #000;
}

.ttR1 {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: black;
  font-size: 130px;
  text-transform: uppercase;
  text-shadow:
    -5px -5px 0 #fff,
     5px -5px 0 #fff,
    -5px  5px 0 #fff,
     5px  5px 0 #fff,
     0px -5px 0 #fff,
     0px  5px 0 #fff,
    -5px  0px 0 #fff,
     5px  0px 0 #fff,
    -3px -5px 0 #fff,
     3px -5px 0 #fff,
    -3px  5px 0 #fff,
     3px  5px 0 #fff,
    -5px -3px 0 #fff,
     5px -3px 0 #fff,
    -5px  3px 0 #fff,
     5px  3px 0 #fff;
}




.rotbot {
    width: 100%;
    height: 100%;
    position: fixed;
z-index: 9999;
pointer-events: none;
}

.fly {
   width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

video{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    position: fixed;

}

/* Phone screens: cube width matches the full screen width, centered vertically in the viewport.
   Depth offsets (translateZ/translateX) are half the width so the faces still meet edge-to-edge. */
@media (max-width: 600px) {
    .container {
        width: 100vw;
        height: 56vh;
        top: 50%;
    }

    .cube {
        width: 100vw;
        height: 56vh;
    }

    .back {
        width: 100vw;
        height: 56vh;
        transform: translateZ(-50vw) rotateY(180deg);
    }

    .front {
        width: 100vw;
        height: 56vh;
        transform: translateZ(50vw) rotateY(0deg);
    }

    .left {
        width: 100vw;
        height: 56vh;
        transform: translateX(-50vw) rotateY(-90deg);
    }

    .right {
        width: 100vw;
        height: 56vh;
        transform: translateX(50vw) rotateY(90deg);
    }

    /* The big "ROTBOTS" word on the cube faces, scaled down for phones (and its outline with it). */
    .ttR {
        font-size: 60px;
        text-shadow:
            -3px -3px 0 #000,
             3px -3px 0 #000,
            -3px  3px 0 #000,
             3px  3px 0 #000,
             0px -3px 0 #000,
             0px  3px 0 #000,
            -3px  0px 0 #000,
             3px  0px 0 #000,
            -2px -3px 0 #000,
             2px -3px 0 #000,
            -2px  3px 0 #000,
             2px  3px 0 #000,
            -3px -2px 0 #000,
             3px -2px 0 #000,
            -3px  2px 0 #000,
             3px  2px 0 #000;
    }

    .ttR1 {
        font-size: 60px;
        text-shadow:
            -3px -3px 0 #fff,
             3px -3px 0 #fff,
            -3px  3px 0 #fff,
             3px  3px 0 #fff,
             0px -3px 0 #fff,
             0px  3px 0 #fff,
            -3px  0px 0 #fff,
             3px  0px 0 #fff,
            -2px -3px 0 #fff,
             2px -3px 0 #fff,
            -2px  3px 0 #fff,
             2px  3px 0 #fff,
            -3px -2px 0 #fff,
             3px -2px 0 #fff,
            -3px  2px 0 #fff,
             3px  2px 0 #fff;
    }
}

/* Announcement as the first screen (set up by rotbot.js): the design stays fixed in
   the background and the page's article scrolls up over it. The article is see-through
   for the first screen only (spacer), then turns solid so the text is readable. */
#rotbots-announcement {
    position: fixed;
    inset: 0;
    z-index: 0;
}

article.rotbots-hero {
    z-index: 1;
    background: linear-gradient(to bottom,
        transparent calc(100vh - 70px),
        rgb(230, 230, 230) calc(100vh - 70px));
    background-attachment: local;
}

.rotbots-spacer {
    /* article starts 70px down with 80px top padding → fill the rest of the screen */
    height: calc(100vh - 150px);
}

/* The design now sits under the menu bar; drop the cube just below it. */
#rotbots-announcement .container {
    top: calc(32% + 55px);
}

@media (max-width: 600px) {
    #rotbots-announcement .container {
        top: 50%;
    }
}

/* Close the small gap between the menu bar and the article so the design doesn't peek
   through above the text once you've scrolled down. */
body:has(article.rotbots-hero.active) .menu {
    box-shadow: 0 12px 0 rgb(230, 230, 230);
}