/* the body has text select turned off to make improve user experience */
body {
    overflow: hidden;
    display: block;
    background-image: url("../images/back.webp");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#title {
    width: 99%;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

#title img {
    max-width: 100%;
}

.container {
    position: relative;
    border: 10px;
    border-style: double;
    bottom: 140px;
    border-width: 5px;
    border-color: rgb(63, 63, 63);
}

#menu {
    display: flex;
    width: 100%;
    font-size: larger;
    background-color: #888;
    justify-content: space-between;
    padding-bottom: 10px;
}

.timer {
    display: flex;
    border-style: inset;
    justify-content: center;
    font-size: larger;
    width: 35px;
    color: red;
    background-color: #000000;
    border-color: rgb(165, 165, 165);
}

#flags-left {
    display: flex;
    border-style: inset;
    justify-content: center;
    font-size: larger;
    width: 35px;
    color: red;
    background-color: #000000;
    border-color: rgb(165, 165, 165);
}

.main {
    display: grid;
    grid-template-rows: 100vh;
    align-items: center;
    justify-content: center;
}

/* game board styling */
.grid {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    height: 400px;
    background-color: rgb(173, 173, 173);
    text-align: center;
    line-height: 2;
    color: rgb(255, 0, 0);
    font-weight: bold;
    font-size: larger;
}

.grid div {
    height: 34px;
    width: 34px;
    margin: 1px;
    border-style: groove;
    border-radius: 11%;
    border-top-color: rgb(238, 238, 238);
    border-right-color: rgb(153, 153, 153);
    border-bottom-color: rgb(153, 153, 153);
    border-left-color: rgb(238, 238, 238);
    padding: 0;
    margin: 0;
}

.checked {
    background-color: rgb(224, 224, 224);
}

.one {
    color: blue;
}

.two {
    color: green;
}

.three {
    color: red;
}

.four {
    color: purple;
}

/* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #222222;
    line-height: 33px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: larger;
}

#note {
    font-size: x-large;
    font-weight: bolder;
}

/* Modal Body */
.modal-body {
    padding: 2px 16px;
}

/* Modal Content */
.modal-content {
    z-index: 3;
    display: inline-block;
    background-color: #222222;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    animation-name: animatetop;
    animation-duration: 0.4s;
    width: 400px;
    mix-blend-mode: hard-light;
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-items: center;
    border: 1px solid;
    justify-content: space-around;
}

/* Add Animation */
@keyframes animatetop {
    from {
        top: -200px;
        opacity: 0
    }

    to {
        top: 55%;
        opacity: 1
    }
}

/* Social-networks */
.social-networks {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-evenly;
    bottom: 0;
    padding: 1%;
}

.social-networks>li {

    display: inline;
}

.social-networks i {
    font-size: 160%;
    color: #ffffff;
}

/* level select */
#level {
    display: flex;
    justify-content: space-evenly;

}

#easy {
    font-size: larger;
    font-weight: bold;
    mix-blend-mode: hard-light;
}

#medium {
    font-size: larger;
    font-weight: bold;
    mix-blend-mode: hard-light;
}

#hard {
    font-size: larger;
    font-weight: bold;
    mix-blend-mode: hard-light;

}

/* media queries for phones */
@media (max-width: 600px)
 {
    #hard {
        display: none;
    }
}

@media (max-width: 475px)
 {
    #medium {
        display: none;
    }
}

@media  (max-width: 800px) and
(-webkit-max-device-pixel-ratio: 2.3) {
    #hard {
        display: none;
    }
}

@media (max-width: 640px) and (-webkit-max-device-pixel-ratio: 2.3)
{
    #medium {
        display: none;
    }
}

#guide {
    font-size: larger;
    font-weight: bold;
    mix-blend-mode: hard-light;
}

/* close button stylingadd */
.close {
    color: #ffffff;
    font-size: x-large;
    font-weight: bolder;
    display: block;
    text-align: left;
}

.close:hover {
    color: #ff0000;
}

#myBtn {
    display: flex;
    border-style: inset;
    justify-content: center;
    font-size: larger;
    width: 35px;
    background-color: #000000;
    border-color: rgb(165, 165, 165);
}

#myBtn:hover span {
    display: none;
}

#myBtn:hover:before {
    content: "?";
    color: red;
    font-size: 25px;
    border-color: rgb(165, 165, 165);
}