:root {
        --background-gradient: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 40%, rgba(26, 143, 227, 1) 100%);

        --font-Nunito: 'Nunito', Helvetica, sans-serif;
        --font-Roboto: 'Roboto', sans-serif;

        --star: "★";

        --black: #020024;
        --blue: #090979;
        --light-blue: #1A8FE3;
        --yellow: #E6C229;
        --orange: #F17105;
        --red: #D11149;

        --box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    }


/* ############################################## */

/* #region      @@@ H T M L */

    * {
        transition: 0.1s;
    }

    html {
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 42px;
        font-family: var(--font-Nunito);
        background-image: var(--background-gradient);
    }

/* #endregion   @@@ H T M L */

/* ############################################## */

/* ############################################## */

/* #region      @@@ T I T L E */

    .title {
        z-index: 9999;
        display: inline-block;
        padding: 20px 40px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 3px;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        box-shadow: var(--box-shadow);
    }

        .title > span {
            display: block;
            font-weight: 600;
        }

        .title span:first-of-type {
            font-size: 0.6em;
            margin-bottom: -10px;
        }
    
        .title span:last-of-type {
            font-size: 1.3em;
        }

/* #endregion   @@@ T I T L E */

/* ############################################## */

/* ############################################## */

/* #region      @@@ N A V I G A T I O N */

    .navigation {
        z-index: 9999;
        display: inline-block;
        padding: 10px 40px;
        background-color: var(--black);
        font-size: 0.5em;
        font-weight: 600;
        text-align: center;
        border-radius: 3px;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 135%);
        box-shadow: var(--box-shadow);
    }

        .navigation > a {
            cursor: pointer;
            display: inline-block;
            margin: 0 10px;
            padding: 5px 10px;
            color: #FFF;
            text-decoration: none;
            border-bottom: 1px transparent solid;
        }

            .navigation > a:hover, 
            .navigation > a:active, 
            .navigation > a:focus {
                transform: translateY(-3px);
                color: var(--yellow);
                border-bottom: 1px var(--yellow) solid;
            }

/* #endregion   @@@ N A V I G A T I O N */

/* ############################################## */

/* ############################################## */

/* #region      @@@ C O N T A I N E R */

    .content-container {
        z-index: 4500;
        width: 90vw;
        height: 90vh;
        overflow: hidden;

        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

/* #endregion   @@@ C O N T A I N E R */

/* ############################################## */

/* ############################################## */

/* #region      @@@ S T A R S */

    .star {
        position: absolute;
        animation: rotateStars 1s forwards;
        width: 20px;
        height: 20px;
        font-size: 20px;
        opacity: 0.5;
    }

        .star::before {
            content: "★";
            width: 20px;
            height: 20px;
            font-size: 20px;
            line-height: 19px;
        }
    
/* #endregion   @@@ S T A R S */

/* ############################################## */

/* ############################################## */

/* #region      @@@ A N I M A T I O N S */

    @keyframes rotateStars {

        0% {
            transform: rotate(0deg) scale(0);
            opacity: 1;
        }

        33% {
            opacity: 0;
        }

        50% {
            transform: rotate(180deg) scale(.8);
            opacity: 1;
        }

        100% {
            transform: rotate(360deg) scale(0);
            opacity: 1;
        }

    }

/* #endregion   @@@ A N I M A T I O N S */

/* ############################################## */