@font-face {
    font-family: "AveriaSerif";
    src: url("fonts/averia_serif/AveriaSerif-Bold.ttf");
    /* src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"), */
    /* url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"), */
    /* url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg"); */
}

html {
    margin: 0;
    /* line-height: 0; */
}

body {
    text-align: center;
    font-family: "AveriaSerif";
    font-weight: bold;
    background-color: rgb(178, 193, 138);
    /* transform: scale(0.5, 0.5); */
    margin: 0;
}

#gameCanvas {
    transform-origin: top left;
    background-color: rgba(30, 200, 30, 0.7);
    background-image: url("images/bg.png");
}

#progressionBarContainer {}

#progressionBar {
    margin: auto;
    width: 800px;
    height: 15px;
    border: 1px solid black;
    background-color: red;
}

/* #progressionBar.animateProgressionBar {
    background-color: green;
} */

#progresionBarSub {
    transition: width 0.3s;
    width: 0px;
    height: 15px;
    background-color: blue;
}

#imagesContainer {
    display: flex;
    flex-wrap: wrap;
}

.tutorialImage {
    margin: 0;
    line-height: 64px;
}

#cardsContainer {
    /* background-color: orange; */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

.lowOpacity {
    opacity: 0.3;
}

.card {
    margin: 8px;
    width: 700px;
    height: 150px;
    background-color: brown;
    background-image: url("images/card_background.png");
    background-size: 100% 100%;
    filter: grayscale(100%);
}

.card:hover {
    position: relative;
    box-shadow: 1px 1px 5px 0px rgba(117, 117, 117, 1);
    transform: scale(1.05, 1.1);
    filter: grayscale(0%);
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}

.cardTitle {
    margin-top: 10px;
    color: white;
}

.cardDescription {
    color: black;
    margin: 0px;
}

.historyContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 700px;
    height: 292px;
    background-color: rgb(151, 169, 87);
    margin-top: 8px;
    border: 2px solid black;
}

.soundElement,
.hdElement,
.eyeElement {
    cursor: pointer;
    border: 3px solid black;
    margin: 4px;
}

#leaderboardContainer {
    background-color: beige;
    color: black;
}

#playAgain {
    box-sizing: border-box;
    padding: 8px;
    height: 80px;
    line-height: 64px;
}

.scoreElement {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgb(178, 193, 138);
}

.playerRank,
.playerName,
.playerScore {
    box-sizing: border-box;
    display: inline-block;
    padding: 8px;
    height: 80px;
    line-height: 64px;
}

.thisPlayerSCore {
    background-color: black;
    color: beige;
}

img {
    /* display: none; */
}

.hide {
    display: none !important;
}