:root {
    --var-orange-color: rgb(252, 119, 71);
    --var-red-color: rgb(250, 57, 57);
    --var-transparent-black: rgba(0, 0, 0, 0.7);
    --var-green-color: rgb(72, 241, 72);
}
@font-face {
    font-family: boldFont;
    src: url("../assets/fonts/CANegroni-Black.woff2");
}
@font-face {
    font-family: lightFont;
    src: url("../assets/fonts/CANegroni-Light.woff2");
}
html {
    font-family: lightFont, Arial, Helvetica, sans-serif;
    color: white;
    background: url("../assets/images/cloud.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
    padding-top: 5px;
}


.board {
    /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
    /* border: 1px solid rgb(243, 10, 119); */
    display: flex;
    flex-wrap: wrap;
    /* height: 20px; */
    margin: auto;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 14px;
    font-family: boldFont;
}
header div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.highestScoreContainer,
.scoreContainer {
    padding: 5px 15px;
    background: var(--var-transparent-black);
    border-radius: 5px;
    border: 1px solid black;
}
.highestScoreContainer span,
.scoreContainer span {
    font-weight: bold;
}
.highestScoreContainer span:nth-child(3),
.scoreContainer span:nth-child(2) {
    color: var(--var-orange-color);
}

.highestScoreContainer {
    position: relative;
}
.highestScoreContainer img {
    position: absolute;
    width: 37px;
    height: 37px;
    left: -20px;
    rotate: -10deg;
}

.generalButton button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 5px 8px; */
    width: 40px;
    height: 34px;
    max-width: 40px;
    max-height: 34px;
    border-radius: 5px;
    border: 1px solid black;
    box-shadow: inset 1px -3px 2px rgba(0, 0, 0, 0.3),
        1px 1px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.menuButtons button:first-child {
    background-color: rgb(128, 0, 128);
}
.menuButtons button:nth-child(2) {
    background-color: rgb(201, 201, 5);
}
.menuButtons button:nth-child(3) {
    background-color: var(--var-red-color);
}
@media (max-width: 640px) {
    .highestScoreContainer span:nth-child(2) {
        display: none;
    }
}
.game div:first-child {
    position: relative;
}
.game {
    display: flex;
    justify-content: center;
}

.specialItems {
    padding-top: 10px;
    /* gap: calc((40px * 10 / 3) - 50px); */
    height: calc(40px * 10);
    justify-content: space-between;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.specialItems div {
    background-color: var(--var-transparent-black);
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 25px;
    gap: 7px;
    flex-direction: column;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    position: relative;
    /* border: 1px solid black; */
}

.specialItems div span {
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.specialItems button:first-child {
    border: none;
    background-color: var(--var-transparent-black);
    padding: 0px;
    min-height: 27px;
    min-width: 27px;
    max-height: 27px;
    max-width: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}
.specialItems button img {
    width: 25px;
    height: 25px;
}

.itemInfo {
    position: absolute;
    right: -7px;
    top: -7px;
    border-radius: 50%;
    height: 17px;
    width: 17px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    background: green;
    font-size: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    /* box-shadow: -3px -3px rgba(0, 0, 0, 0.7), 3px -3px rgba(0, 0, 0, 0.7),
        3px 3px rgba(0, 0, 0, 0.7); */
}

.specialItems div:first-child img {
    transform: translateY(2px);
}

.specialItems div:nth-child(2) img,
.specialItems div:nth-child(3) img {
    width: 20px;
    height: 20px;
}
@media (min-height: 620px) {
    .game {
        flex-direction: column;
        align-items: center;
    }
    .specialItems {
        flex-direction: row;
        height: auto;
        width: calc(40px * 10);
        padding: 20px 10px;
        box-sizing: border-box;
        /* transform: translateY(-20px); */
        /* gap: calc((40px * 10 / 3) - 70px); */
    }
    .specialItems div {
        flex-direction: row;
        /* padding: 4px; */
        /* padding: 2px; */
        padding: 0px 10px 0px 5px;
        width: 82px;
        justify-content: space-between;
    }
}

.audios {
    display: none;
}