html {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}

* {
	-webkit-user-drag: none;
    -webkit-user-select: none;
}

body {
    margin: 0;
    height: inherit;
    user-select: none;
    overflow: hidden;
}

img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.left-button {
    position: absolute;
    top: 520px;
    left: 0;
    width: 100px;
    display: flex;           /* Add flex display */
    justify-content: center; /* Center the SVGs horizontally */
    align-items: center;
    svg {
        width: 40%;             /* Adjust width to fit side by side */
        height: auto;           /* Maintain aspect ratio */
    }
}

.right-button {
    position: absolute;
    top: 520px;
    right: 0;
    width: 100px;
    display: flex;           /* Add flex display */
    justify-content: center; /* Center the SVGs horizontally */
    align-items: center;
    svg {
        width: 40%;             /* Adjust width to fit side by side */
        height: auto;           /* Maintain aspect ratio */
    }
}

.instructions, .instructions-black {
    position: absolute;
    top: 206px;
    left: 0;
    padding: 9px;
    padding-left: 8px;
    font-size: 30px;
    color: white;
    background-color: rgba(128 128 128 / 0.8);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    font-weight: bold;
    svg {
        width: 35px;
        height: 35px;
        margin-bottom: -5px;
        fill: #fefefe;
        transform: scale(1);
        animation: wobbly 1.5s infinite;
    }
}
.instructions-black {
    background-color: rgba(48 48 48 / 0.8);
}
.instructions-special {
    top: 10px;
}
@keyframes wobbly {
    0% {
        transform: scale(0.85);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.85);
    }
}

.logo, .logo-black {
    position: absolute;
    left: -2px;
    margin: 0;
    background-color: rgba(128 128 128 / 0.8);
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;

    transform: scale(1);
    animation: pulse 2s infinite;
}
.logo-black {
    background-color: rgba(48 48 48 / 0.8);
    animation: pulse-black 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
@keyframes pulse-black {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.logos-highlighted .logo,
.logos-highlighted .logo-black {
    animation: enhanced-pulse 1s infinite;
}
@keyframes enhanced-pulse {
    0% {
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0px 20px rgba(255, 255, 255, 1);
    }
    100% {
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    }
}

.active {
    border-left: 6px solid #fafcfd;
}

.vuse-logo {
    top: 274px;
}
.glo-logo {
    top: 344px;
}
.velo-logo {
    top: 429px;
}

.vuse-logo-btm {
    top: 674px;
}
.glo-logo-btm {
    top: 744px;
}
.velo-logo-btm {
    top: 829px;
}

.vuse-logo img, .velo-logo img, .glo-logo img {
    width: 120px;
    height: auto;
    padding: 15px 10px 10px 10px;
}
.glo-logo img {
    width: 120px;
    height: 54px;
    object-fit: contain;
    padding: 10px 10px 5px 10px;
}

/* Turn cross-document view-transitions on */
/* Note that this at-rule is all that is needed to create the default cross-fade animation  */

@view-transition {
    navigation: auto;
}

/* Customize the default animation behavior */

::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* Create a custom animation */

@keyframes move-out {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes move-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

@keyframes move-left-out {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes move-left-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes move-right-out {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}
@keyframes move-right-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;
}
::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
}

html.transition-left::view-transition-old(root) {
    animation: 0.4s ease-in both move-left-out;
}
html.transition-left::view-transition-new(root) {
    animation: 0.4s ease-in both move-left-in;
}

html.transition-right::view-transition-old(root) {
    animation: 0.4s ease-in both move-right-out;
}
html.transition-right::view-transition-new(root) {
    animation: 0.4s ease-in both move-right-in;
}