body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
/* font-family: "Lucida Console", sans-serif; */
font-family: "Varela Round", sans-serif;
background-color: #4e4e4e;
}
html, body {
    margin: 0;
    height: 99%;
    width: 99%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.tracker {
    max-height: 3%;
    max-width: 50%;
    flex-grow: 1;
    aspect-ratio: 30;
    display: flex;
    align-items: center;
}
.bar {
    min-height: 1px;
    height: 7vw;
    display: inline-block;
    min-width: 1px;
    width: 10vw;
    display: flex;
    flex-grow: 1;
    aspect-ratio: 1 / 10;
    justify-content: center;
    background-color: rgb(82 82 82);
    align-content: space-between;
    /* margin: 1%; */
    border-radius: 20% / 40%;
    border: 3px solid rgb(78 78 78);
}
#scoreWrap {
    max-height: 10%;
}
#scoreWrap .bar.active {
    background-color: rgb(167, 220, 255);
}
#movesLeftWrap .bar.active {
    background-color: rgb(254, 255, 167);
}
#gridWrap {
    max-height: 90%;
    max-width: 90%;
    flex-grow: 1;
    aspect-ratio: 1;

}
img {
    max-width: 85%; 
    object-fit: cover;
}
#grid {
    max-height: 99%;
    max-width: 99%;
    flex-grow: 1;
    aspect-ratio: 1;
    /* background-color: rgb(44, 44, 44); */
    /* border: 5px solid rgb(44, 44, 44); */
    border-radius: 15px/15px;
    margin-left: auto;
    margin-right: auto;
    font-size: 10vmin;
    text-align: center;
    color: white;
    /* text-shadow: 0px 0px 10px #000, 0px 0px 5px #000, 0px 0px 1px #000; */
    /* text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000; */
}
.row {
    display: flex;
    width: 100%;
    justify-content: center;
}
.row div {
    min-height: 1px;
    display: flex;
    min-width: 1px;
    border-radius: 30%;
    flex-grow: 1;
    aspect-ratio: 1;
    flex: 1 1 0;
    width: 0;
    align-items: center;
    justify-content: center;
    border: solid;
}
.row div.scored{
    animation: scored 1s;
}
.row div.newOne{
    animation: newOne 1s;
}

@keyframes scored {
from {background-color: rgb(126, 240, 255);}
to {}
}
@keyframes newOne {
    from {background-color: rgb(251, 255, 0); }
    to {}
}
/* .row div[state="0"] {
background-color: rgb(44, 44, 44);
}
.row div[state="1"] {
background-color: rgb(236, 236, 236);
} */