:root {
    --orange: #DC5F00;
    --dark-grey: #373A40;
    --light-grey: #686D76;
    --dimmed-white: #EEEEEE;
}


h1,
h2 {
    font-family: "Rubik", sans-serif;
    color: var(--dark-grey);
}

h2 {
    font-size: 3em;
    font-weight: 600;
    margin-bottom: 30px;
}


p {
    font-family: "DM Mono", monospace;
    margin: 0;
    margin-bottom: 30px;
    color: var(--light-grey);
    font-size: 18px;
}

button.btn {
    font-family: "Rubik", sans-serif;
    border: none;
    border-radius: 0;
}

.hidden {
    display: none;
    opacity: 0 !important;
}

.show {
    display: block;
    opacity: 1 !important;
}

#header .row,
#about .row,
#gallery .row,
#experience .row,
#lets-play-a-game .row {
    align-content: center;
    justify-content: center;
    height: 900px;
}


/* Navigation */

nav {
    .navbar-brand {
        font-family: "Rubik", sans-serif;
        font-weight: bold;
        color: var(--dark-grey);
        font-size: 25px;
    }

    .nav-link {
        font-family: "Rubik", sans-serif;
        margin: 0 10px;
    }
}



/* Header */

#header {


    .header-hello {
        color: var(--light-grey);
        font-size: 30px;
        font-weight: 500;
        margin: 0;
    }

    .header-title {
        font-size: 8em;
        margin-left: -10px;
    }

    .header-p {
        font-size: 25px;
        margin: 0 0 50px 0;
    }

    button {
        color: white;
        background-color: var(--orange);
        padding: 15px 35px;
    }


}

/* About */

#about {

    background-color: var(--dimmed-white);

    .social-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        column-gap: 20px;
        margin-top: 50px;


        .icon {
            height: 80px;
            width: 80px;
            border-radius: 100%;
            background-color: var(--orange);

            display: flex;
            justify-content: center;
            align-items: center;


            img {
                height: 50%;
                filter: invert(100%);
            }
        }
    }

    .winnings-list {
        width: 60%;
        font-family: "DM Mono", monospace;

        .badge {
            --bs-badge-font-size: 15px;
            --bs-badge-font-weight: 500;
            background-color: var(--orange) !important;
        }
    }
}

/* Gallery */

#gallery {

    .gallery-box {
        height: 635px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;

        img {
            width: 100%;
        }

    }
}

/* Expereince */

#experience {

    .table-container {
        width: 75%;

        table,
        th,
        td {
            border: 1px solid var(--light-grey);
        }

        th {
            background-color: var(--orange);
            color: white;
            font-family: "Rubik", sans-serif;
            font-weight: 500;
        }

        td {
            font-family: "DM Mono", monospace;
        }

        tr {
            text-align: center;
        }
    }
}

/* Play a Game Section */

#lets-play-a-game {

    h1 {
        color: white;
        font-size: 5em;
        margin-bottom: 15px;
    }

    p {
        color: white;
        font-size: 25px;
        margin: 0;
    }

    input {
        border: none;
        outline: 0;
        font-family: "Rubik", sans-serif;
        text-align: center;
        width: 400px;
    }

    input[type="number"] {
        padding: 15px 0;
        margin: 50px 0 20px 0;
        font-size: 20px;
    }

    input[type="number"]::placeholder {
        text-align: center;
    }

    input[type="submit"] {

        background-color: white;
        color: var(--orange);

        font-weight: 500;
        padding: 15px 0;
        font-size: 25px;

    }

    .gameResult {
        font-family: "Rubik", sans-serif;
        color: white;
        font-size: 2.5em;
        margin: 60px 0 60px 0;

        border: 1px solid white;
        padding: 15px 25px;

        opacity: 0;
        transition: opacity 0.2s ease-in-out;


        h3 {
            font-weight: 400;
        }
    }

    background-color: var(--orange);
}



/* ---------------------- */
/* RESPONSIVE STYLES */
/* ---------------------- */


/* View Below xxl */
/* `xxl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1399.98px) {

    #gallery {
        .gallery-box {
            height: unset;
        }
    }

}

/* View below xl */
/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {


    #header,
    #about,
    #gallery,
    #experience,
    #lets-play-a-game {
        .row {
            height: unset;
            padding: 50px 0 30px 0;
        }
    }

    #header {
        .header-right .header-image {
            display: block;
            margin: 0 auto;
        }

        .header-left {
            text-align: center;
            margin-top: 50px;

            .header-title {
                margin: 0;
            }
        }

    }


    #gallery {

        .gallery-box {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);

            img {
                height: 100%;
                object-fit: cover;
            }
        }
    }

}

/* View below lg */
/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    #about {
        #contact.social-icons {
            .icon {
                height: 50px;
                width: 50px;
            }
        }

    }

    #experience {
        .table-container {
            width: 100%;
        }
    }
}

/* View below md */
/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    h2 {
        font-size: 2.5em;
    }

    p {
        font-size: 16px;
    }

    .container {
        --bs-gutter-x: 2.5rem
    }

    #header {

        .row {
            padding: 30px 0;
        }

        .header-image {
            width: 100%;
        }

        .header-hello {
            font-size: 20px;
        }

        .header-title {
            font-size: 4.5rem;
        }

        .header-p {
            font-size: 16px;
            margin: 10px 0 30px 0;
        }

        .header-left {
            margin-top: 50px;
        }

        button {
            padding: 10px 30px;
            font-size: 15px;
        }

    }

    #about {

        #contact.social-icons {

            .icon {
                height: 35px;
                width: 35px;

            }
        }

        .winnings-list {
            width: 100%;
        }
    }

    #lets-play-a-game {
        h1 {
            font-size: 3em;
        }



        input {
            width: 100%;
        }

        p,
        input[type="number"],
        input[type="submit"] {
            font-size: 16px;
        }

        .gameResult h3 {
            font-size: 0.5em;
        }
    }

}