@font-face {
    font-family: Rodin Pro;
    src: url(../fonts/FOT-Rodin\ Pro\ DB.otf);
    font-weight: 600;
}

@font-face {
    font-family: Rodin Pro;
    font-weight: 700;
    src: url(../fonts/FOT-Rodin\ Pro\ B.otf);
}

#main {
    display: flex;
    justify-content: center;
    background: rgba(255, 0, 0, 0);
    width: 1600px;
    height: 900px;
    aspect-ratio: 16 / 9;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@property --upper {
    syntax: '<color>';
    inherits: false;
    initial-value: black;
}

@property --lower {
    syntax: '<color>';
    inherits: false;
    initial-value: black;
}

.home-upper {
    --upper: black;
    --lower: black;
    position: absolute;
    display: flex;
    align-items: end;
    justify-content: space-between;
    font-family: Rodin Pro;
    font-size: 52.5pt;
    color: white;
    width: 1000%;
    line-height: 1;
    translate: 0 -203px;
    height: 203px;
    opacity: 1;
    box-sizing: border-box;
    padding: 0 calc(450% + 28px) 5px calc(450% + 55px);
    background: linear-gradient(var(--upper), var(--lower));
    border-bottom: 3px solid #989898;
    z-index: 2;
    transition: --upper 0.1s ease-in-out, --lower 0.1s ease-in-out, border-color 0.1s ease-in-out, translate 0.4s ease-in-out;
}

.home-upper:hover,
.home-lower:hover {
    --upper: #501802 !important;
    --lower: #cc592c !important;
    border-color: #e9b8a5 !important;
}

.home-lower.settings-open {
    --upper: #0b0300;
    --lower: #180a05;
}

.home-upper.flash, .home-lower.flash {
    --upper: white !important;
    --lower: white !important;
}

.buttons {
    font-family: Rodin Pro;
    font-size: 38pt;
    position: absolute;
    width: 1000%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    padding: 0 calc(450% + 138pt);
    padding-bottom: 30px;
    display: flex;
    opacity: 0;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    color: #653420;
    transition: opacity 0.4s ease-in-out;
}

.wii-buttons {
    display: flex;
    gap: 60px;
}

@property --booger {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --bogie {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.button {
    --booger: 1;
    --bogie: 1;
    width: 508px;
    height: 210px;
    box-sizing: border-box;
    padding-bottom: 5px;
    background-image: url(../homemenu-btn.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: contrast(var(--booger)) brightness(var(--bogie)) drop-shadow(9px 12px rgba(0, 0, 0, 0.6));
    transition: scale 0.1s ease-in-out, opacity 0.4s ease-in-out, --booger 0.1s, --bogie 0.1s;
}

.button:hover {
    scale: 1.04;
}

.home-lower {
    --upper: black;
    --lower: black;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: start;
    justify-content: center;
    font-family: Rodin Pro;
    width: 1000%;
    padding: 0 450%;
    height: 182px;
    translate: 0 216px;
    box-sizing: border-box;
    background: linear-gradient(var(--lower), var(--upper));
    border-top: 3px solid #989898;
    z-index: 2;
    transition: --upper 0.1s ease-in-out, --lower 0.1s ease-in-out, border-color 0.15s ease-in-out, translate 0.4s ease-in-out;
}

.settingscont {
    display: flex;
    width: 1050px;
    height: 100%;
    translate: 0 -33px;
}

.home-lower:hover .wiimote,
.wiimote:hover {
    translate: 0 -30px;
}

.bounce {
    animation: bounce 0.4s ease-in-out, oppose 0.4s ease-in-out;
}

@keyframes bounce {
    0% {
        translate: 0 0;
    }

    50% {
        translate: 0 -13px;
    }

    100% {
        translate: 0 0;
    }
}

@property --opposebounce {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}


@keyframes oppose {
    0% {
        --opposebounce: 0;
    }

    50% {
        --opposebounce: 13px;
    }

    100% {
        --opposebounce: 0;
    }
}

@property --burger {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.wiimote {
    position: relative;
    width: 140px;
    transition: translate 0.15s ease-in-out;
    height: fit-content;
    animation-composition: accumulate;
}

.wiimote::after {
    content: '';
    font-size: 40pt;
    color: white;
    position: absolute;
    height: 90%;
    box-sizing: border-box;
    border: 3px solid white;
    border-left: unset;
    width: var(--burger);
    border-radius: 0 18px 18px 0;
    background: url(../sorrynothing.png);
    background-size: 100% 100%;
    left: calc(100% - 5px);
    top: 50%;
    z-index: -1;
    pointer-events: none;
    translate: 0 calc(-50% + var(--opposebounce));
    transition: --burger 0.2s ease-in-out;
}

#settings-span {
    transition: opacity 0.15s ease-in-out;
}

.remotebattery {
    background: rgba(0, 0, 0, 0.9);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 830px;
    height: 60px;
    border-radius: 23px;
    border: 3px solid white;
    box-sizing: border-box;
}

.remotebattery>* {
    padding: 0 30px;
    border-right: 3px solid white;
    font-size: 29pt;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.remotebattery> :not(:first-child) {
    color: rgba(255, 255, 255, 0.2);
}

.remotebattery> :not(:first-child) img {
    opacity: .2;
}

.remotebattery> :last-child {
    border: unset;
}

.wii-settings {
    flex: 1;
    height: 100%;
    padding-left: 24px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 37.5pt;
    color: white;
    user-select: none;
}

.close {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 347px;
    height: 92px;
    font-size: 41pt;
    box-sizing: border-box;
    padding-left: 60px;
    background: url(../home-close.svg);
    background-size: 100%;
    color: #4D4D4D;
}

.background-img {
    height: 100vh;
    width: 100vw;
    z-index: -1;
    background-image: url('../Dolphin_xKVkD7luhL.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
    scale: 0.97;
    translate: 0 6px;
}

.overlay {
    position: absolute;
    width: 10000%;
    height: 10000%;
    top: 50%;
    translate: 0 -50%;
    background: black;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}