/********************** Variables **********************/
:root {
    /*Colors*/
    --color-main: #FD420A;
    --color-main-hover: #d43404;

    --color-black-blue: #10151C;
    --color-dark-blue-1: #161B23;
    --color-dark-blue-2: #1B212B;
    --color-dark-blue-3: #1E242C;
    --color-dark-blue-4: #2d3238;

    --color-bright-blue: #2979FF;
    --color-teal: #2EC4B6;
    --color-green: #16A34A;
    --color-lime-green: #A3E635;
    --color-orange: #FF8c42;
    --color-red: #DC2626;
    --color-red-salmon: #FF6B6B;
    --color-yellow-light: #FFD166;

    --color-gray-light: #D9D9D9;
    --color-gray-bluish: #B0BEC5;

    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-backdrop: #1b212b80;
    --color-background-player: #1e242cda;

    /*Font*/
    --font-firacode: 'Fira Code', monospace;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 600;

    --fs-xxxsmall: 11px;
    --fs-xxsmall: 14px;
    --fs-xsmall: 16px;
    --fs-small: 18px;
    --fs-regular: 20px;
    --fs-medium: 22px;
    --fs-big: 24px;
    --fs-xbig: 28px;
    --fs-xxbig: 32px;
    --fs-xxxbig: 36px;
    --fs-xxxxbig: 48px;
}

/********************** General **********************/
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-weight: normal;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    color: var(--color-white);
    font-family: var(--font-firacode);
    background-color: var(--color-black-blue);
}

/********************** Coming Soon **********************/
.content {
    width: 100%;
    height: 80vh;

    gap: 35px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    padding: 0px 10px;
}

.content-logo {
    gap: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.content-icon {
    width: 130px;
}

.content-title {
    font-size: var(--fs-xxxxbig);
    font-weight: var(--fw-bold);
}

.content-description {
    max-width: 520px;
    text-align: center;


    gap: 25px;
    display: flex;
    flex-direction: column;
}

.content-description-important {
    font-size: var(--fs-big);
    font-weight: var(--fw-bold);
}

.content-description-important span {
    color: var(--color-main);
    font-weight: var(--fw-bold);
}