html, body {
    margin: 0;
    padding: 0;
    color: #71797E;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@font-face {
    font-family: Montserrat;
    src: url('Montserrat-Medium.ttf');
}

#pageTitle{
    text-align:left;
    font-size:38px;
    font-family:Montserrat,Arial; /* browser will use Arial if Montserrat not available */
    margin-bottom:30px;
    padding: 20px;
}

#categoryArea{
    margin:auto;
    padding:20px;
    position:relative;
    overflow:hidden;
}

#category{
    text-align:center;
    font-size:20px;
    font-family:Montserrat,Arial;
}

/* Width and height of the cardArea should be larger than its card children by a pixel count that is twice the card's padding (e.g. 2 x 10px card padding = 20px parent heigh should be larger). */
#cardArea{
    width:620px;
    height:420px; /* If this changes, so must the 'top' properties defined in source.js that swap the current card being viewed. */
    margin:auto;
    border-radius:5px;
    position:relative;
    overflow:hidden;
}

.card{
    width:600px;
    height:400px;
    padding:10px;
    position:absolute;
    overflow-wrap:break-word;
    text-align:center;
    font-size:20px;
    color:#efefef;
    font-family:Montserrat,Arial;
    cursor:pointer;
}

#nextButton{
    width:200px;
    text-align:center;
    font-size:15px;
    padding:10px;
    cursor:pointer;
    color:#efefef;
    margin:auto;
    margin-top:30px;
    background-color:#71797E;
    border-radius:5px;
    font-family:Montserrat,Arial;
}

#nextButton:hover{
    opacity:.6;
}

#gameOver{
    text-align:center;
    font-size:30px;
    margin-top:30px;
    font-family:Montserrat,Arial;
}