body{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #f5e8ba;
}
h1{
    color: crimson;
    text-align: center;
}
.game{
    display: grid;
    grid-template-columns: repeat(4,120px);
    grid-row-gap: 2em;
    align-items: center;
    justify-content: center;
}
#gameBoard div{
    height: 150px;
    width: 80px;
    background-color: whitesmoke;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: brown;
    font-size: 2em;
    background-color: whi;
}
#gameBoard div:hover{
    cursor: pointer;
}
.cardback{
    border:1px #444cf7 solid;
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image:  linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(30deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(150deg, #444cf7 12%, transparent 12.5%, transparent 87%, #444cf7 87.5%, #444cf7), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777), linear-gradient(60deg, #444cf777 25%, transparent 25.5%, transparent 75%, #444cf777 75%, #444cf777);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}
.won{
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    color: blue;
    width: 500px;
    margin: 0px auto;
    font-family: monospace;
    font-weight: bolder;
}