:root {
    --green: rgba(0, 128, 0, 0.5);
    --yellow: rgba(255, 255, 0, 0.5);
    --red: rgba(255, 0, 0, 0.5);
    --score-board-color: rgba(26, 24, 24, 0.603); 
}

body {
    /* Background pattern from Toptal Subtle Patterns */
    background-image: url("img/tic-tac-toe.png");
    margin: 0 !important;
    font-family: 'Oxygen', sans-serif;
}

#summary {
    background-color: rgba(44, 41, 41, 0.808);
    position: absolute;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#summaryBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    position: fixed;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    top: 175px;
    height: 72vh;
    width: 850px;
    background-color: rgba(26, 24, 24, 0.8);
    color: white;
    border-radius: 20px;
}

#summaryTitle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 50px;
    font-weight: 700;
    width: 100%;
    height: 72px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

#summaryMsg {
   display: -ms-grid;
   display: grid;
   width: 100%;
   height: 100%;
   -ms-grid-columns: (1fr)[2];
       grid-template-columns: repeat(2, 1fr);
   -ms-grid-rows: (6, 1fr);
       grid-template-rows: (6, 1fr);
}

#buttonArea {
    width: 150px;
    height: 50px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.closeButton {
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 2;
    grid-column-end: 3;
}

.closeButton img {
    width: 40px;
    height: 40px;
}

#summaryMsg > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 25px;
}

#progressBar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    background-color: rgba(26, 24, 24, 0.603);
}

#timeLeftStatus {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    z-index: 2;
    color: white; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 22px;
}

#progressStatus {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 50px;
}

#scoreBoard {
    background-color: var(--score-board-color);
    color: white; 
    position: fixed;
    font-size: 22px;
    height: 50px;
    top: 50px;
    left: 0px;
    padding-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px groove white;
}

#scoreBoard > div {
    width: calc(100vw / 7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-right: 1px groove white;
}

#startButton {
    height: 100%;
}

#startButton:hover {
    cursor: pointer; 
}

.green {
    background-color: var(--green);
}

.orange {
    background-color: var(--yellow);
}

.red {
    background-color: var(--red);
}

.grid {
    position: fixed;
    top: 185px;
    height: 80vh;
    width: 100%;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-grid-columns: (150px)[5];
        grid-template-columns: repeat(5, 150px);
    -ms-grid-rows: (150px)[4];
        grid-template-rows: repeat(4, 150px);
    grid-gap: 20px;
}

.card {
    cursor: pointer;
    position: relative;
    -webkit-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.card,
.back,
.front {
    height: 150px;
    width: 150px;
}

.back,
.front {
    position: absolute;
    -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.back {
    -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; 
}

.front {
    background-image: url("img/question-solid.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    border-radius: 15px;
}

.selected {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.match .front {
    background: #004477 !important;
}

.hideMe {
    visibility: hidden;
    background-color: transparent !important;
}