@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

body {
    overflow: hidden;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(1);
    transition: transform 0.5s ease;
}

@media screen and (max-width: 1100px),
(max-height: 900px) {
    .menu {
        transform: scale(0.8);
    }
}

@media screen and (max-width: 850px),
(max-height: 650px) {
    .menu {
        transform: scale(0.6);
    }
}

@media screen and (max-width: 650px),
(max-height: 500px) {
    .menu {
        transform: scale(0.4);
    }
}

.background {
    position: fixed;
    top: 0;
    z-index: -1;
    background: url("../assets/background.png");
    width: 100vw;
    height: 100vh;
    transition: background-position-x 35s linear;
    filter: blur(6px);
}

.main-menu-title {
    display: flex;
    position: relative;
    margin-bottom: 7rem;
}

@keyframes main-menu-title-background-animation {
    0% {
        background-position-x: 0%;
    }

    100% {
        background-position: 100%;
    }
}

.main-menu-title .main-title {
    font-size: 8rem;
    letter-spacing: 0.2rem;
    font-weight: 500;
    background: linear-gradient(90deg, hsl(354, 100%, 85%), hsl(32, 100%, 85%), hsl(60, 100%, 85%), hsl(133, 100%, 85%), hsl(206, 100%, 85%));
    background-clip: text;
    -webkit-background-clip: text;
    /* Webkit, get with the times */
    background-size: 300%;
    animation: main-menu-title-background-animation 4.5s linear 0s infinite alternate;
    color: transparent;
    user-select: none;
}

@keyframes main-menu-online-title-animation {
    0% {
        transform: rotate(-27deg);
    }

    50% {
        transform: rotate(-33deg);
    }

    100% {
        transform: rotate(-27deg);
    }
}

.main-menu-title .online-title {
    position: absolute;
    right: -7rem;
    bottom: -3rem;
    font-size: 4rem;
    transform: rotate(-30deg);
    color: gold;
    animation: main-menu-online-title-animation 6s ease-in-out 0s infinite;
    user-select: none;
}

.sliding-menu {
    --width: 30rem;
    --height: 35rem;
    width: var(--width);
    height: var(--height);
}

.sliding-submenu {
    width: var(--width);
    position: absolute;
    color: white;
    transition: all 0.5s ease;
}

.no-transition {
    transition: none;
}

.sliding-submenu.hidden-left {
    transform: translateX(calc(var(--width) * -1)) scale(0.5, 0.5);
    opacity: 0%;
    visibility: hidden;
}

.sliding-submenu.hidden-right {
    transform: translateX(var(--width)) scale(0.5, 0.5);
    opacity: 0%;
    visibility: hidden;
}

.menu-btn {
    --background: linear-gradient(80deg, #2ecc71, #3498db);
    width: 100%;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15rem;
    background: var(--background);
    background-size: 200%;
    color: white;
    padding: 1.3rem 0;
    margin: 1rem 0;
    border-radius: 0.5rem;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-btn:hover {
    background-position-x: 100%;
    transform: scale(1.1, 1.1);
}

.menu-btn:active {
    transition: 0.2s ease;
    transform: scale(0.95, 0.95);
}

.submenu-title {
    text-align: center;
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3rem;
    width: 100%;
    user-select: none;
}

.title-with-back-btn {
    display: flex;
    align-items: center;
}

.back-btn {
    background: none;
    outline: none;
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    width: 1.1rem;
    position: absolute;
    left: 0.5rem;
    fill: #ddd;
    opacity: 60%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.back-btn:hover {
    fill: white;
    opacity: 100%;
    transform: scale(1.1, 1.1);
}

.back-btn:active {
    transform: scale(0.9, 0.9);
}

.easy-btn {
    --background: linear-gradient(80deg, #1abc9c, #2ecc71);
}

.medium-btn {
    --background: linear-gradient(80deg, #f1c40f, #e67e22);
}

.hard-btn {
    --background: linear-gradient(80deg, #ff7e22, #e74c3c);
}

.custom-difficulty-btn {
    --background: linear-gradient(80deg, #3498db, #9b59b6);
}

.custom-difficulty-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    justify-content: center;
    justify-items: center;
    /* justify-items: flex-end; */
}

.custom-difficulty-grid label {
    margin-right: 1rem;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #bff;
    user-select: none;
}

.custom-difficulty-grid label:nth-of-type(1),
.range-slider-container:nth-of-type(1) p,
.range-slider-container:nth-of-type(1) {
    --color: hsl(30, 100%, 75%);
    color: var(--color);
}

.custom-difficulty-grid label:nth-of-type(2),
.range-slider-container:nth-of-type(2) p,
.range-slider-container:nth-of-type(2) {
    --color: hsl(133, 100%, 75%);
    color: var(--color);
}

.custom-difficulty-grid label:nth-of-type(3),
.range-slider-container:nth-of-type(3) p,
.range-slider-container:nth-of-type(3) {
    --color: hsl(206, 100%, 75%);
    color: var(--color);
}

.range-slider-container {
    --thumb-width: 1rem;
    --thumb-height: 2rem;

    --slider-width: 20rem;
    --track-height: 2px;

    --current-value-size: 4rem;
    --current-value-border-width: 2px;

    --filled-percentage: 0;

    --color: #fff;

    margin: calc(var(--thumb-height) * 0.5) 0;

    position: relative;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(2, max-content);

    transition: all 0.3s ease;
    user-select: none;

    display: flex;
    align-items: center;
}

.range-slider {
    width: var(--slider-width);
    height: var(--track-height);
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.range-slider-current-value {
    margin-left: 1rem;
    font-size: 2rem;
    width: 4rem;
}

.range-slider::-webkit-slider-runnable-track {
    box-shadow: none;
    background: var(--color);
    height: var(--track-height);
}

.range-slider::-webkit-slider-thumb {
    --scale: 1;

    -webkit-appearance: none;
    background-color: var(--color);
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);

    width: var(--thumb-width);
    height: var(--thumb-height);
    border-radius: calc(var(--thumb-width) * 0.5);
    transform: translateY(calc(var(--thumb-height) * -0.5 + var(--track-height))) scale(var(--scale));
    transition: transform 0.35s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    --scale: 1.2;
}

.range-slider::-moz-range-track {
    background: var(--color);
    border: none;
    outline: none;
    height: var(--track-height);
}

.range-slider::-moz-range-thumb {
    outline: none;
    border: none;
    background-color: var(--color);
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s ease;

    width: var(--thumb-width);
    height: var(--thumb-height);
}

.range-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}