body {
    background-color: #DEDAD3;
    display: flex;
    justify-content: center;
}

.tt-canvas {
    position: relative;
    height: 100vh;
    aspect-ratio: 1920 / 1080;
}

.tt-canvas .menu-container {
    position: absolute;
    width: 100%;
    left: 0;
    transform: none;
}

#tt-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--time_travel_bolder_spiral_bg_png_url) no-repeat;
    background-size: contain;
    z-index: -10;
}

/* Triggers - common styles */
.tt-trigger {
    position: absolute;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 5;
}

/* rect-bw-clock: 262x221, pos (103, 203) */
#tt-rect-bw-clock {
    left: 9.5370vh;
    top: 18.7963vh;
    height: 20.4630vh;
    width: auto;
    aspect-ratio: 262 / 221;
    background-image: var(--rect_bw_clock_png_url);
}

/* rect-red-clock: 268x223, pos (191, 488) */
#tt-rect-red-clock {
    left: 17.6852vh;
    top: 45.1852vh;
    height: 20.6481vh;
    width: auto;
    aspect-ratio: 268 / 223;
    background-image: var(--rect_red_clock_png_url);
}

/* brown-clock: 229x226, pos (460, 262) */
#tt-brown-clock {
    left: 42.5926vh;
    top: 24.2593vh;
    height: 20.9259vh;
    width: auto;
    aspect-ratio: 229 / 226;
    background-image: var(--brown_clock_png_url);
}

/* round-clock: 410x411, pos (385, 653) */
#tt-round-clock {
    left: 35.6481vh;
    top: 60.4630vh;
    height: 38.0556vh;
    width: auto;
    aspect-ratio: 410 / 411;
    background-image: var(--round_clock_png_url);
}

/* begin: 87x87, pos (950, 498) */
#tt-begin {
    left: 87.9630vh;
    top: 46.1111vh;
    height: 8.0556vh;
    width: auto;
    aspect-ratio: 1 / 1;
    background-image: var(--begin_png_url);
}

/* frog: 363x525, pos (1089, 135) */
#tt-frog {
    left: 100.8333vh;
    top: 12.5000vh;
    height: 48.6111vh;
    width: auto;
    aspect-ratio: 363 / 525;
    background-image: var(--frog_png_url);
}

/* beige-clock: 239x239, pos (1267, 540) */
#tt-beige-clock {
    left: 117.3148vh;
    top: 50.0000vh;
    height: 22.1296vh;
    width: auto;
    aspect-ratio: 1 / 1;
    background-image: var(--beige_clock_png_url);
}

/* orange-clock: 377x376, pos (1472, 650) */
#tt-orange-clock {
    left: 136.2963vh;
    top: 60.1852vh;
    height: 34.8148vh;
    width: auto;
    aspect-ratio: 377 / 376;
    background-image: var(--orange_clock_png_url);
}

/* rect-ivory-clock: 219x200, pos (1049, 793) */
#tt-rect-ivory-clock {
    left: 97.1296vh;
    top: 73.4259vh;
    height: 18.5185vh;
    width: auto;
    aspect-ratio: 219 / 200;
    background-image: var(--rect_ivory_clock_png_url);
}

/* invite: transparent div, pos (1318, 191), 125x230, rotated 353deg */
#tt-invite {
    left: 122.0370vh;
    top: 17.6852vh;
    width: 11.5741vh;
    height: 21.2963vh;
    transform: matrix(0.99, -0.12, 0.12, 0.99, 0, 0);
    z-index: 10;
}

/* Sliders - common styles */
.tt-slider {
    position: absolute;
    display: none;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 200;
}

/* Slider text - common styles */
.tt-slider-text {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 201;
    mix-blend-mode: multiply;
}

/* Click-blocker overlay */
.tt-click-blocker {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: transparent;
    display: none !important;
    inset: 0;
    z-index: 210;
    cursor: pointer;
}

/* begin-slider: 1572x840, pos (175, 224) */
#tt-begin-slider {
    left: 16.2037vh;
    top: 20.7407vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--begin_slider_png_url);
}

/* begin-slider-text: 834x431, pos (215, 197) relative to slider */
#tt-begin-slider-text {
    left: 19.9074vh;
    top: 18.2407vh;
    height: 39.9074vh;
    width: auto;
    aspect-ratio: 834 / 431;
    background-image: var(--begin_slider_text_svg_url);
}

/* frog-slider: 1572x840, pos (175, 227) */
#tt-frog-slider {
    left: 16.2037vh;
    top: 21.0185vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--frog_slider_png_url);
}

/* frog-slider-text: 1151x477, pos (210, 193) relative to slider */
#tt-frog-slider-text {
    left: 19.4444vh;
    top: 17.8704vh;
    height: 44.1667vh;
    width: auto;
    aspect-ratio: 1151 / 477;
    background-image: var(--frog_slider_text_svg_url);
}

/* rect-bw-clock-slider: 1572x840, pos (175, 225) */
#tt-rect-bw-clock-slider {
    left: 16.2037vh;
    top: 20.8333vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--rect_bw_clock_slider_png_url);
}

/* rect-bw-clock-slider-text: 1027x426.5, pos (205, 207) relative to slider */
#tt-rect-bw-clock-slider-text {
    left: 18.9815vh;
    top: 19.1667vh;
    height: 39.4907vh;
    width: auto;
    aspect-ratio: 2054 / 853;
    background-image: var(--rect_bw_clock_slider_text_svg_url);
}

/* rect-red-clock-slider: 1302x695, pos (310, 194) */
#tt-rect-red-clock-slider {
    left: 28.7037vh;
    top: 17.9630vh;
    height: 64.3519vh;
    width: auto;
    aspect-ratio: 1302 / 695;
    background-image: var(--rect_red_clock_slider_png_url);
}

/* rect-red-clock-slider-text: 692x398, pos (195, 145) relative to slider */
#tt-rect-red-clock-slider-text {
    left: 18.0556vh;
    top: 13.4259vh;
    height: 36.8519vh;
    width: auto;
    aspect-ratio: 692 / 398;
    background-image: var(--rect_red_clock_slider_text_svg_url);
}

/* brown-clock-slider: 1104x589, pos (409, 247) */
#tt-brown-clock-slider {
    left: 37.8704vh;
    top: 22.8704vh;
    height: 54.5370vh;
    width: auto;
    aspect-ratio: 1104 / 589;
    background-image: var(--brown_clock_slider_png_url);
}

/* brown-clock-slider-text: 756x273, pos (176, 161) relative to slider */
#tt-brown-clock-slider-text {
    left: 16.2963vh;
    top: 14.9074vh;
    height: 25.2778vh;
    width: auto;
    aspect-ratio: 756 / 273;
    background-image: var(--brown_clock_slider_text_svg_url);
}

/* round-clock-slider: 1572x840, pos (175, 221) */
#tt-round-clock-slider {
    left: 16.2037vh;
    top: 20.4630vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--round_clock_slider_png_url);
}

/* round-clock-slider-text: 529x387, pos (270, 226) relative to slider */
#tt-round-clock-slider-text {
    left: 25.0000vh;
    top: 20.9259vh;
    height: 35.8333vh;
    width: auto;
    aspect-ratio: 529 / 387;
    background-image: var(--round_clock_slider_text_svg_url);
}

/* beige-clock-slider: 1572x840, pos (175, 227) */
#tt-beige-clock-slider {
    left: 16.2037vh;
    top: 21.0185vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--beige_clock_slider_png_url);
}

/* beige-clock-slider-text: 1120x464, pos (225, 207) relative to slider */
#tt-beige-clock-slider-text {
    left: 20.8333vh;
    top: 19.1667vh;
    height: 42.9630vh;
    width: auto;
    aspect-ratio: 1120 / 464;
    background-image: var(--beige_clock_slider_text_svg_url);
}

/* orange-clock-slider: 1302x695, pos (310, 194) */
#tt-orange-clock-slider {
    left: 28.7037vh;
    top: 17.9630vh;
    height: 64.3519vh;
    width: auto;
    aspect-ratio: 1302 / 695;
    background-image: var(--orange_clock_slider_png_url);
}

/* orange-clock-slider-text: 769x426.5, pos (153, 137) relative to slider */
#tt-orange-clock-slider-text {
    left: 14.1667vh;
    top: 12.6852vh;
    height: 39.4907vh;
    width: auto;
    aspect-ratio: 1538 / 853;
    background-image: var(--orange_clock_slider_text_svg_url);
}

/* umbrella video: 454x364, pos (498, 137) relative to orange-clock slider */
#tt-umbrella-video {
    position: absolute;
    left: 46.1111vh;
    top: 12.6852vh;
    width: 42.0370vh;
    height: 33.7037vh;
    object-fit: contain;
    cursor: pointer;
    z-index: 202;
}

/* rect-ivory-clock-slider: 1572x840, pos (175, 228) */
#tt-rect-ivory-clock-slider {
    left: 16.2037vh;
    top: 21.1111vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--rect_ivory_clock_slider_png_url);
}

/* rect-ivory-clock-slider-text: 1080x491.289, pos (195, 177) relative to slider */
#tt-rect-ivory-clock-slider-text {
    left: 18.0556vh;
    top: 16.3889vh;
    height: 45.4897vh;
    width: auto;
    aspect-ratio: 1080 / 491;
    background-image: var(--rect_ivory_clock_slider_text_svg_url);
}

/* invite-slider: 1572x840, pos (175, 226) */
#tt-invite-slider {
    left: 16.2037vh;
    top: 20.9259vh;
    height: 77.7778vh;
    width: auto;
    aspect-ratio: 1572 / 840;
    background-image: var(--invite_slider_png_url);
}

/* invite-slider-text: 1137x418, pos (225, 206) relative to slider */
#tt-invite-slider-text {
    left: 20.8333vh;
    top: 19.0741vh;
    height: 38.7037vh;
    width: auto;
    aspect-ratio: 1137 / 418;
    background-image: var(--invite_slider_text_svg_url);
}

/* invite-hotspot: clickable area inside invite-slider, pos (619, 208), 314x414 */
#tt-invite-hotspot {
    position: absolute;
    left: 57.3148vh;
    top: 19.2593vh;
    width: 29.0741vh;
    height: 38.3333vh;
    cursor: pointer;
    z-index: 218;
}

/* diagram-slider: 909x487, centered on invite-slider, no text */
#tt-diagram-slider {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 45.0926vh;
    width: auto;
    aspect-ratio: 909 / 487;
    background-image: var(--diagram_slider_png_url);
    background-size: contain;
    background-repeat: no-repeat;
    display: none;
    z-index: 220;
    cursor: pointer;
}

/* Portrait orientation */
@media (orientation: portrait) {
    .tt-canvas {
        width: 100vw;
        height: auto;
    }

    #tt-rect-bw-clock {
        left: 5.3646vw;
        top: 10.5729vw;
        width: 13.6458vw;
        height: auto;
    }

    #tt-rect-red-clock {
        left: 9.9479vw;
        top: 25.4167vw;
        width: 13.9583vw;
        height: auto;
    }

    #tt-brown-clock {
        left: 23.9583vw;
        top: 13.6458vw;
        width: 11.9271vw;
        height: auto;
    }

    #tt-round-clock {
        left: 20.0521vw;
        top: 34.0104vw;
        width: 21.3542vw;
        height: auto;
    }

    #tt-begin {
        left: 49.4792vw;
        top: 25.9375vw;
        width: 4.5313vw;
        height: auto;
    }

    #tt-frog {
        left: 56.7188vw;
        top: 7.0313vw;
        width: 18.9063vw;
        height: auto;
    }

    #tt-beige-clock {
        left: 65.9896vw;
        top: 28.1250vw;
        width: 12.4479vw;
        height: auto;
    }

    #tt-orange-clock {
        left: 76.6667vw;
        top: 33.8542vw;
        width: 19.6354vw;
        height: auto;
    }

    #tt-rect-ivory-clock {
        left: 54.6354vw;
        top: 41.3021vw;
        width: 11.4063vw;
        height: auto;
    }

    #tt-invite {
        left: 68.6458vw;
        top: 9.9479vw;
        width: 6.5104vw;
        height: 11.9792vw;
    }

    /* Sliders - portrait */
    #tt-begin-slider {
        left: 9.1146vw;
        top: 11.6667vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-begin-slider-text {
        left: 11.1979vw;
        top: 10.2604vw;
        width: 43.4375vw;
        height: auto;
    }

    #tt-frog-slider {
        left: 9.1146vw;
        top: 11.8229vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-frog-slider-text {
        left: 10.9375vw;
        top: 10.0521vw;
        width: 59.9479vw;
        height: auto;
    }

    #tt-rect-bw-clock-slider {
        left: 9.1146vw;
        top: 11.7188vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-rect-bw-clock-slider-text {
        left: 10.6771vw;
        top: 10.7813vw;
        width: 53.4896vw;
        height: auto;
    }

    #tt-rect-red-clock-slider {
        left: 16.1458vw;
        top: 10.1042vw;
        width: 67.8125vw;
        height: auto;
    }

    #tt-rect-red-clock-slider-text {
        left: 10.1563vw;
        top: 7.5521vw;
        width: 36.0417vw;
        height: auto;
    }

    #tt-brown-clock-slider {
        left: 21.3021vw;
        top: 12.8646vw;
        width: 57.5000vw;
        height: auto;
    }

    #tt-brown-clock-slider-text {
        left: 9.1667vw;
        top: 8.3854vw;
        width: 39.3750vw;
        height: auto;
    }

    #tt-round-clock-slider {
        left: 9.1146vw;
        top: 11.5104vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-round-clock-slider-text {
        left: 14.0625vw;
        top: 11.7708vw;
        width: 27.5521vw;
        height: auto;
    }

    #tt-beige-clock-slider {
        left: 9.1146vw;
        top: 11.8229vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-beige-clock-slider-text {
        left: 11.7188vw;
        top: 10.7813vw;
        width: 58.3333vw;
        height: auto;
    }

    #tt-orange-clock-slider {
        left: 16.1458vw;
        top: 10.1042vw;
        width: 67.8125vw;
        height: auto;
    }

    #tt-orange-clock-slider-text {
        left: 7.9688vw;
        top: 7.1354vw;
        width: 40.0521vw;
        height: auto;
    }

    #tt-umbrella-video {
        left: 25.9375vw;
        top: 7.1354vw;
        width: 23.6458vw;
        height: 18.9583vw;
    }

    #tt-rect-ivory-clock-slider {
        left: 9.1146vw;
        top: 11.8750vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-rect-ivory-clock-slider-text {
        left: 10.1563vw;
        top: 9.2188vw;
        width: 56.2500vw;
        height: auto;
    }

    #tt-invite-slider {
        left: 9.1146vw;
        top: 11.7708vw;
        width: 81.8750vw;
        height: auto;
    }

    #tt-invite-slider-text {
        left: 11.7188vw;
        top: 10.7292vw;
        width: 59.2188vw;
        height: auto;
    }

    #tt-invite-hotspot {
        left: 32.2396vw;
        top: 10.8333vw;
        width: 16.3542vw;
        height: 21.5625vw;
    }

    #tt-diagram-slider {
        width: 47.3438vw;
        height: auto;
    }
}