/* background color for body */
body {
    background-color: #00394c;
}

/* padding overall content */
.container-fluid {
    padding: 3% 5%;
}

/* styling game title(h1) */
.game-title {
    font-size: 7rem;
    font-family: "Jersey 10", sans-serif;
    color: rgb(233 224 151);
    text-align: center;
    line-height: 0.8;
}


/* styling high-score(p) tag */
.high-score {
    font-size: 1.2rem;
    color: rgb(233 224 151);
    margin-top: 0.5rem;
    font-family: "Jersey 10", sans-serif;
    text-align: center;
}


/* padding for game content*/
.game-content {
    padding: 2% 20% 0% 20%;
}

.col {
    padding: 1.5rem;
}


/* sizing, positioning  and styling square tiles  */
.square {
    width: 12rem;
    height: 12rem;
    border-radius: 2.2rem;
    border: 8px solid rgb(0, 0, 0);
}


/* color for individual tiles */
#red {
    background-color: red;
}

#yellow {
    background-color: yellow;
}

#green {
    background-color: green;
}

#blue {
    background-color: blue;
}


/* responsive adjustment */
@media (max-width:991px) {

    /* reducing font size of title(h1) and square tile sizes also reducing pading in smaller screens */
    .game-title {
        font-size: 5rem;
    }

    .game-content {
        padding: 5% 10% 0% 10%;
    }

    .square {
        height: 10rem;
        width: 10rem;
        border-radius: 1.7rem;
    }

    .col {
        padding: 1.2rem;
    }

    .container-fluid {
        padding: 5% 7%;
    }

    p.credits {
        padding-top: 1.2rem;
    }
}

@media (max-width:578px) {

    /* reducing font size of title(h1) and square tile sizes also reducing pading  in mobile */
    .game-title {
        font-size: 4.2rem;
    }

    .game-content {
        padding: 15% 7% 0% 7%;
    }

    .square {
        height: 7rem;
        width: 7rem;
        border-radius: 1.5rem;
    }

    .col {
        padding: 0.7rem;
    }

    .container-fluid {
        padding: 10% 5%;
    }
}

@media (max-width:350px) {

    /* reducing square tile sizes also reducing pading  in very small screens */

    .square {
        height: 6rem;
        width: 6rem;
        border-radius: 1.3rem;
    }

    .col {
        padding: 0.6rem;
    }

}

/* credit section styling */
p.credits {
    font-family: "Itim", cursive;
    color: #b9b9b7;
    font-size: 1.5rem;
    text-align: center;
}

.simon {
    height: 1.2rem;
}


/* shadow effect when button is clicked */
.pressed {
    box-shadow: 0px 0px 20px 7px #ffffff;
    opacity: 0.8;
    background-color: #a09d9d;
}


/* start button styling*/
button:focus {
    outline: none;
}

.btn {
    font-family: "Jersey 10";
    font-size: 1.5rem;
    position: absolute;
    display: none;
}

/* Enabling Start Button in mobile or tablet view */
@media (max-width:1280px) {
    .btn {
        display: block;
        position: static;
    }

    .start {
        height: auto;
        padding: 1.5rem 0;
    }
}