@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+SC&family=Lato&display=swap');


/* LANDING & GAME PAGE */
html {
    /* Height used to push the footer to the bottom of the screen. Contribution from following 
    YouTube Link: https://www.youtube.com/watch?v=yc2olxLgKLk */
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
body
{
    /* Flex and height used to push the footer to the bottom of the screen. Contribution from following 
    YouTube Link: https://www.youtube.com/watch?v=yc2olxLgKLk */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    font-family: 'Encode Sans SC', sans-serif;
    background-color: #E4EFE7;
    color: #171010;
}

/* NAVBAR */
.bg-blue {
    background-color: #3cb7ff; 
    
 }

.game-brand {
    height: 4rem;
    width: auto;
    background-color: #f8f9fa;
}

/* FOOTER */
footer {
    background-color: #3cb7ff;
    margin-top: auto;
}

.social-link {
    font-size: 2rem;
    color: #e4efe7;
}

.social-link:hover {
    color: #bcc2bd;
}

/* --------------------------------LANDING PAGE */
.list-item {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.list-link {
    text-decoration: none;
    font-size: 1.7rem;
}

.list-link:hover {
    color: #9BA4B4;
}

/* --------------------------------GAME PAGE */
/* Override custom bootstrap navbar-light font color */
.navbar-light .navbar-nav .nav-link {
    color: rgb(248 249 250);
}

.navbar-light .navbar-nav .nav-link:hover{
    color: rgb(188,194,189);
}

.navbar-toggler {
    background-color: #f8f9fa;
}

.nav-link {
    display: inline-block;
}
.game-buttons {
    font-size: 4.5rem;
}

.game-buttons:hover {
    color: #444447;
}

h1 {
    font-size: 3.5rem;
}

.start-button {
    background-color: #39b7ff;
    border-color: #39b7ff;
    color: #f8fafc;
}

.start-button:hover {
    background-color: #3292ca;
    color: #E4EFE7;
    border-color: #3292ca;
} 

@media screen and (max-width: 320px) {
    .game-buttons {
        padding-left: 0;
        padding-right: 0;
    }
}   
/* --------------------------------FOOTER */

/* MODALS */
.modal {
    font-family: 'Lato', sans-serif;
}

.modal-btn {
    font-family: 'Encode Sans SC', sans-serif;
}
.btn-color {
    background-color: #39b7ff;
    border-color: #39b7ff;
    color: #f8fafc;
}

.btn-color:hover {
    background-color: #3292ca;
    color: #E4EFE7;
    border-color: #3292ca;
}