@font-face {
    font-family: "Digital Display", sans-serif;
    src: url('../css/DigitalDisplayRegular-ODEO.ttf');
}



.java-body span {
    font-family: 'Tiny5', sans-serif;
    font-size: 2rem;
    
}

.num-1 {
    color: blue;
}
.num-2 {
    color: green;
}
.num-3 {
    color: red;
}
.num-4 {
    color: darkblue;
}
.num-5 {
    color: maroon;
}
.num-6 {
    color: teal;
}
.num-8 {
    color: darkgray;
}

p,
p span {
    font-family: serif;
    font-size: 1rem;
    text-align: center;
}


.flex {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 0 auto;
    width: 520px;
}
.flex .flex {
    width: 510px;
    gap: 0.25rem;
    padding: 2px 0;
    margin: 0;
}
.top-bar {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 10px 0;
}

.toggle-btn {
    display: flex;
    align-content: center;
    justify-content: center;
    
}
.flag-toggle {
    width: 64px;
    padding: 1rem;
    margin: 0.5rem;
    image-rendering: pixelated;
    position: absolute;
}
.toggle-true {
    background-color: gray;
}

.flag {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    align-self: center;
}
.covered {
    display: flex;
    width: 30px;
    height: 30px;
    background-image: url('../img/covered.png');
    image-rendering: pixelated;
    justify-content: center;
    align-items: center;
    background-color: grey;
}

div.flex {
    background-color: darkgray;
    padding: 2px 5px;
    cursor: crosshair;
    
}


.covered:hover {
    background-color: rgb(147, 146, 146);
    background-image: url('../img/covered-hovered.png');
}


.safe {
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
}
.safe:hover {
    background-color: rgb(153, 200, 215);

}

.apple {
    width: 30px;
    height: 30px;
    background-image: url('../img/bomb.png');
    background-repeat: no-repeat;
    background-size: 30px;
    image-rendering: pixelated;
    background-color: red;
}

.score {
    text-align: center;
    padding:  5px;
}


.time,
.flag-number {
    font-family: 'Digital Display', sans-serif;
    font-size: 3rem;
    letter-spacing: -1px;
    color: red;
    background-color: rgb(29, 29, 29);
    padding: 0.25rem;
    border-radius: 0.2rem;
}
.main-body {
    background-color: darkgray;
    width: 550px;
    margin: auto;
}

.restartBtn {
    margin: auto 0;
}

.restartBtn img {
    width: 40px;
    height: 40px;
    padding: 10px;
    image-rendering: pixelated;
    background-image: url('../img/covered-hovered.png');
    background-repeat: no-repeat;
    background-size: contain;
}