/* --- Global & Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat:wght@400;700&display=swap');

/* --- Custom Local Fonts --- */
@font-face {
    font-family: 'Felten Shaded';
    src: url('../fonts/Felten Shaded/FeltenShaded-Fill.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Felten';
    src: url('../fonts/Felten/Felten-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barmeno';
    /* Using the bold OTF since it replaces Fredoka One, a bold font */
    src: url('../fonts/Barmeno/barmeno-bold-588ce24f8a369.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --nerds-blue-bg: #98e2fc;
    --nerds-dark-blue: #0f308e; 
    --nerds-input-blue: #9de1fb;
    --nerds-input-text: #ffffff;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background-size: cover;
    color: var(--nerds-dark-blue);
    overflow-x: hidden;
    transition: background-image 0.5s ease-in-out;
}

/* Helper class to switch to Regular BG (For Age Gate) */
body.bg-regular {
    background-image: url('../images/nerds/bg.png');
}

/* --- Language Toggle (Fixed Top Right) --- */
.sound-icon {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 40px; /* Adjust size as needed */
    height: auto;
    z-index: 2000; /* Above everything including overlays */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.sound-icon:hover {
    transform: scale(1.1);
}

/* --- Layout Containers --- */
main {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* --- Standard Page Frame --- */
.pageFrame {
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 25px;
    padding-bottom: 0px;
    box-sizing: border-box;
    position: relative;
}

/* --- DEBUG MODE: Side-by-Side View --- */
/* These styles activate only when JS sets showAllPages = true */
body.debug-view {
    overflow-y: auto;
    background: #333; /* Dark bg to see frames clearly */
}

body.debug-view main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
}

body.debug-view .pageFrame {
    display: flex !important; /* Force show */
    position: relative;
    width: 30%; /* 3 columns */
    min-width: 350px;
    height: 600px; /* Fixed height for preview */
    min-height: auto;
    border: 2px solid white;
    background-color: var(--nerds-blue-bg); /* Give them their own BG */
    overflow: hidden;
    transform: scale(1);
    margin-bottom: 20px;
}
/* -------------------------------------- */


/* --- Cloud Footer --- */
.cloud-footer {
    position: absolute;
    top: -0%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/nerds/bg_center_cloud.png')repeat bottom center;
    background-size: auto;
    z-index: 0; 
    pointer-events: none;
}

.frameContent {
    width: 90%;
    max-width: 400px;
    text-align: center;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* --- Animations --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.5); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Felten Shaded', sans-serif;
    text-transform: uppercase;
    color: var(--nerds-dark-blue);
    margin: 15px 0;
}

p { font-weight: 700; }

/* --- Images --- */
.main_logo {
    position: absolute;
    max-width: 132px;
    top: 10px;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.1));
}

.ty-header {
    max-width: 90%;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards; 
}

.character-img {
    max-width: 80%;
    margin-top: 20px;
    opacity: 0; 
    transform-origin: center bottom;
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

/* --- Inputs --- */
.store_details_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    zoom: 0.8;
}

.inputFormTitles {
    text-align: left;
    font-weight: 900;
    font-size: 1rem;
    color: var(--nerds-dark-blue);
    margin-bottom: -10px;
    margin-left: 5px;
    text-transform: uppercase;
}

input.gate_submission_form {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #0000001a;
    background-color: var(--nerds-input-blue);
    color: white;
    font-family: 'Barmeno', sans-serif;
    font-size: 1.1rem;
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.3s ease;
}

input.gate_submission_form:focus {
    background-color: #8bd6f3;
}

input.gate_submission_form::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Buttons --- */
button {
    cursor: pointer;
    font-family: 'Felten', sans-serif;
    border: none;
    transition: transform 0.1s ease, background-color 0.3s;
}

button:active {
    transform: scale(0.98);
}

.age_gate_buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}

.age_gate_btn {
    width: 100%;
    padding: 12px 0;
    font-size: 2rem;
    border-radius: 8px;
    color: white;
    background-color: var(--nerds-dark-blue);
}

.button_selected {
    background-color: var(--nerds-dark-blue);
    color: white;
    width: 100%;
    padding: 15px;
    font-size: 1.8rem;
    border-radius: 8px;
    margin-top: 20px;
}

/* --- Intro Animation --- */
#introPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: var(--nerds-blue-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Helpers --- */
.legal-text {
    font-size: 0.65rem;
    margin-top: 50px;
    font-weight: 700;
    color: var(--nerds-dark-blue);
    text-align: center;
    line-height: 1.4;
    text-transform: uppercase;
}

.legal-text a {
    color: var(--nerds-dark-blue);
    text-decoration: underline;
}

/* --- Age Gate & Split Layout --- */
.split-bg-page {
    /* Hard 50/50 split: Blue on left, Pink on right */
    background: linear-gradient(90deg, #58bcf7 50%, #eb5da7 50%) !important;
    padding-top: 40px;
    position: relative; /* Container for absolute elements */
}

/* Position EN/FR toggle in top right corner of the page */
.en-fr-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #0b2283; /* Keep dark blue color from design */
    font-family: 'Felten', sans-serif;
    font-weight: bold;
    font-size: 0.9rem;
    z-index: 20; /* Keep above other elements */
}

.gate-content {
    width: 100%;
    max-width: 400px; /* Constrains the form width nicely */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    margin-bottom: 5em;
}

/* Style for the new single image lockup */
.gate-logo-lockup {
    width: 100%;
    max-width: 400px; /* Adjust size to fit and keep text readable */
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.15));
    margin-top: -3em;
}

.gate-title {
    font-family: 'Felten Shaded', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: .5px;
    text-align: center;
    /* Recreates the deep blue shadow/outline from the design */
    text-shadow:
        -2px -2px 0 #0b2283,
         2px -2px 0 #0b2283,
        -2px  2px 0 #0b2283,
         2px  2px 0 #0b2283,
         3px  4px 0 #0b2283;
    margin-bottom: 30px;
    min-width: 400px;
    margin-left: 2em;
    margin-right: 2em;
}


/* --- Form Elements --- */
.gate-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.input-group label {
    color: white;
    font-family: 'Felten', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.gate-input {
    background: white;
    border: none;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Barmeno', sans-serif;
    font-size: 2.5rem;
    color: #0b2283; /* Dark blue text inside inputs */
    text-align: center;
    box-sizing: border-box;
    outline: none;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.gate-input::placeholder {
    color: #0b2283;
    opacity: 1;
}

.multi-input-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.age-input {
    flex: 1;
    width: 30%;
}

.full-input {
    width: 100%;
    text-align: center !important;
}

/* --- Footer Links & Buttons --- */
.gate-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.no-pin-link {
    color: #0b2283;
    font-family: 'Barmeno', sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: bold;
}

.no-pin-link:hover {
    text-decoration: underline;
}

.submit-gate-btn {
    background-color: #001f9f;
    color: white;
    font-family: 'Felten', sans-serif;
    font-size: 2.5rem;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    text-transform: uppercase;
    cursor: pointer;
}

.submit-gate-btn:active {
    transform: translateY(2px);
    box-shadow: 0px 2px 0px #06114a;
}

/* --- Fix for background to contain floating elements --- */
.split-bg-page {
    overflow: hidden; /* Prevents scrollbars from floating elements */
}

/* --- No Pin Page Specifics --- */
.no-pin-content {
    z-index: 10; /* Keeps text above floating items */
    position: relative;
    height: 100%;
    justify-content: space-between;
}

.no-pin-title {
    font-family: 'Felten Shaded', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 3.5rem; /* Larger than age gate title */
    line-height: 0.9;
    text-align: center;
    margin: 15px 0;
    text-shadow:
        -3px -3px 0 #0b2283,
         3px -3px 0 #0b2283,
        -3px  3px 0 #0b2283,
         3px  3px 0 #0b2283,
         4px  5px 0 #0b2283;
}

.no-pin-instructions {
    font-family: 'Felten Shaded', sans-serif;
    color: #0b2283;
    font-size: .75rem;
    line-height: 1.5;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    width: 350px;
    z-index: 10;
    margin-top: 4em;
}

/* --- Floating Background Items --- */
.float-item {
    position: absolute;
    z-index: 5; /* Below text, above background */
}

.f-soccer {
    top: 15%;
    left: -15%;
    width: 180px;
}

.f-gummy-1 {
    top: 20%;
    left: 32%;
    width: 80px;
}

.f-gummy-2 {
    top: 18%;
    right: -10%;
    width: 140px;
}

.f-gummy-3 {
    top: 48%;
    left: -5%;
    width: 100px;
}

.f-gummy-4 {
    bottom: -2%;
    right: -10%;
    width: 180px;
}

.nerds-corner-mascot {
    position: absolute;
    bottom: -2em;
    left: -5%;
    width: 200px;
    z-index: 8; /* Sits slightly higher but below content */
}

/* Adjust button spacing for this specific page */
#noPinPage .gate-footer {
    margin-top: auto;
    margin-bottom: 20px;
    z-index: 15;
}

.followcomment {
    width: 100%;
    width: 420px;
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.15));
    /* margin-top: 9em; */
}

#btnBackToGate{
    margin-top: 1em;
    width: 250px;
}

/* --- Language Toggle Interactive Styles --- */
.en-fr-toggle {
    cursor: pointer;
    user-select: none;
}

.lang-opt {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.lang-opt.active {
    opacity: 1;
    text-decoration: underline;
}

/* --- Main Landing (Hype) Page --- */
.landing-content {
    margin-top: 10px;
    margin-bottom: 40px;
    max-width: 450px; 
    gap: 10px;
}

.landing-logo {
    margin-top: -1em;
    margin-bottom: 10px;
}

.promo-img-title {
    width: 100%;
    max-width: 420px;
    margin-bottom: 10px;
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.15));
}

.promo-img-mascot {
    width: 100%; /* Made slightly wider so it intentionally overhangs the layout nicely */
    max-width: 500px;
    margin-left: -7.5%;
    filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.2));
    margin-bottom: 15px;
    z-index: 5;
}

.montreal-text {
    font-family: 'Felten', sans-serif;
    font-weight: bold;
    color: white;
    font-size: 1.4rem;
    line-height: 1.2;
    text-align: center;
    /* Recreating the dark blue drop-shadow from the mockup */
    text-shadow: 2px 3px 0px #0b2283;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
}

.promo-img-info {
    width: 100%;
    max-width: 400px;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
    margin-top: -7em;
}

#btnNeedToEnter {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.landing-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.landing-footer-links a {
    color: #0b2283;
    font-family: 'Barmeno', sans-serif;
    font-size: 1rem;
    text-decoration: none;
    font-weight: bold;
}

.landing-footer-links a:hover {
    text-decoration: underline;
}

/* --- Contact Form Customizations --- */
#contactPage .gate-form {
    gap: 12px; /* Tighter gap to fit 5 inputs + checkbox */
}

#contactPage .input-group label {
    font-size: 1rem;
}

#contactPage .gate-input {
    font-size: 1.8rem; /* Scaled down slightly from age gate to fit */
    padding: 10px;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
}

/* Custom Checkbox Design */
.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    min-width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    border: none;
    margin: 0;
}

.checkbox-group input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    color: var(--nerds-dark-blue);
    font-size: 28px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Felten', sans-serif;
}

.opt-in-text {
    color: var(--nerds-dark-blue);
    font-family: 'Barmeno', sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.2;
    text-transform: lowercase; /* Matches mockup exact styling */
    cursor: pointer;
    margin-top: 2px;
}

.legal-text-new {
    color: var(--nerds-dark-blue);
    font-family: 'Barmeno', sans-serif;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.3;
    text-transform: lowercase;
}

.legal-text-new a {
    color: var(--nerds-dark-blue);
    text-decoration: underline;
}

.input-group input{
    text-align: left;
    text-indent: 6px;
}

/* --- BRAND NEW CUSTOM TERMS & RULES DESIGN --- */

/* Ultra-modern sleek gradient scrollbar */


.terms-scroll-container h1{
    font-size: 14px;
}

.terms-scroll-container p, 
.terms-scroll-container li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem; /* Slightly larger */
    line-height: 1.8; /* Looser line height for much easier reading */
    color: #333;
    margin-bottom: 15px;
}

.terms-scroll-container ul {
    margin-bottom: 20px;
    padding-left: 25px;
}

/* Style links inside the text */
.terms-scroll-container a {
    color: #eb5da7;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.terms-scroll-container a:hover {
    border-bottom: 2px solid #eb5da7;
}

/* Back Button Override to match the new rounded aesthetic */
.back-btn-styled {
    background-color: #eb5da7; /* Pops against the blue background */
    color: white;
    padding: 15px 60px;
    border-radius: 50px; /* Pill shape to match new headers */
    font-family: 'Felten', sans-serif;
    font-size: 2rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0px 6px 0px #b03876; /* Darker pink 3D shadow */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.terms-scroll-container h2{
    font-size: 14px;
}

.terms-scroll-container h1{
    color: #ffffff;
}

.terms-scroll-container h2{
    color: #ffffff;
}

.terms-scroll-container li{
    color: #ffffff;
}




.terms-scroll-container p {
    color: #ffffff;
}


.back-btn-styled:active {
    transform: translateY(4px);
    box-shadow: 0px 2px 0px #b03876;
}

/* --- Thank You Page Specifics --- */
.thank-you-content {
    justify-content: flex-start;
    height: 100%;
}

.thank-you-title {
    font-family: 'Felten Shaded', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: 1.8rem; /* Matches the massive size of the "FAN" text */
    line-height: 1.3;
    text-align: center;
    margin: 40px 0 25px 0;
    text-shadow:
        -3px -3px 0 #0b2283,
         3px -3px 0 #0b2283,
        -3px  3px 0 #0b2283,
         3px  3px 0 #0b2283,
         4px  5px 0 #0b2283;
}

.thank-you-subtitle {
    font-family: 'Felten', sans-serif;
    color: #0b2283;
    font-size: 1.1rem;
    line-height: 1.3;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: auto; /* Pushes the back button down */
    letter-spacing: 0.5px;
}

#thankYouPage .gate-footer {
    margin-top: 50px;
    margin-bottom: 40px;
}

#btnBackFromThanks {
    width: 250px; /* Constrains the width to match the design */
}

.gate-feedback{
    color: #ffffff !important;
}

/* --- Dropdown Fixes --- */
.select-fix {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
    color: #0b2283; /* Restores the Nerds brand blue */
}

/* Forces the dropdown menu list to be a normal size, overriding the huge input font */
.select-fix option {
    font-size: 16px; 
    color: #333; 
    font-family: 'Montserrat', sans-serif; 
}

/* --- Form Validation States --- */
.gate-input.error-field {
    border: 3px solid #ff3366 !important; /* Bold red/pink border */
    background-color: #fff0f5 !important; /* Light pink background */
    color: #ff3366 !important;
}

.gate-input.error-field::placeholder {
    color: #ffaa99 !important;
}

/* Error state for the custom checkbox */
.checkbox-group input[type="checkbox"].error-field {
    border: 3px solid #ff3366 !important;
    background-color: #fff0f5 !important;
}

/* Error state for the checkbox text */
.opt-in-text.error-field {
    color: #ff3366 !important;
}

.multi-input-row input{
    font-size: 28px !important;
}

.social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    transform: scale(1.2);
}

.social-icons img {
    width: 45px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

/* =========================================================
   DESKTOP HOLDING PAGE (RESPONSIVE - NO CLIPPING)
========================================================= */

#desktopView {
    display: none; 
}

@media screen and (min-width: 1024px) {
    
    /* Hide Mobile App */
    main, #introPage {
        display: none !important;
    }

    /* Full Screen Setup */
    #desktopView {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(to right, #4bb3fd 50%, #eb5da7 50%);
        overflow: hidden;
        z-index: 9999;
    }

    /* Net Background */
    .desktop-bg-net {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0.8) 5px, transparent 5px),
            linear-gradient(to bottom, rgba(255,255,255,0.8) 5px, transparent 5px);
        background-size: 80px 80px; 
        background-position: center top;
        z-index: 1;
    }

    /* Central Wrapper (Flexbox for perfect spacing) */
    .desktop-center-wrapper {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly; /* Distributes items perfectly */
        width: 100%;
        height: 100vh;
        padding: 3vh 0;
        box-sizing: border-box;
    }

    /* Center Content Sizing (Scales with window height) */
    .desk-logo-lockup {
        height: 10vh; /* Scales down if window is short */
        min-height: 60px;
        width: auto;
        object-fit: contain;
    }

    .desk-lucky-winner {
        height: 38vh; 
        min-height: 200px;
        width: auto;
        object-fit: contain;
    }

    .qr-container {
        background: white;
        padding: 2vh;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }

    .desk-qr {
        height: 22vh;
        width: 22vh;
        min-height: 150px;
        min-width: 150px;
        display: block;
        object-fit: contain;
    }

    .desk-social-links {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .desk-social-icon {
        height: 5vh;
        min-height: 40px;
        width: auto;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .desk-social-icon:hover {
        transform: scale(1.1);
    }

    /* --- Side Art Assets --- */
    
    .desk-mascot {
        position: absolute;
        bottom: 0;
        left: 2vw;
        height: 75vh;          /* Locks to 75% of screen height */
        max-width: 40vw;       /* Prevents overlapping center text on narrow screens */
        object-fit: contain;
        object-position: bottom left;
        z-index: 5;
    }

    .desk-soccer-ball {
        position: absolute;
        top: -2vh;
        right: 0;
        height: 55vh;          /* Locks to 55% of screen height */
        max-width: 40vw;
        object-fit: contain;
        object-position: top right;
        z-index: 5;
    }

    /* Floating Gummies */
    .desk-gummy {
        position: absolute;
        z-index: 6;
        filter: drop-shadow(0px 8px 12px rgba(0,0,0,0.2));
        object-fit: contain;
    }
    
    .desk-g1 { top: 5%; left: 20%; height: 12vh; }
    .desk-g2 { bottom: 12%; left: 30%; height: 9vh; }
    .desk-g3 { top: 40%; right: 20%; height: 11vh; }
    .desk-g4 { bottom: 25%; right: 28%; height: 8vh; }
    .desk-g5 { bottom: 5%; right: 5%; height: 16vh; }
}