/* General style */

@font-face {
    font-family: 'AmigaTopaz';
    src: url('fonts/AmigaTopaz.eot');
    src: url('fonts/AmigaTopaz.eot?#iefix') format('embedded-opentype'),
        url('fonts/AmigaTopaz.woff2') format('woff2'),
        url('fonts/AmigaTopaz.woff') format('woff'),
        url('fonts/AmigaTopaz.ttf') format('truetype'),
        url('fonts/AmigaTopaz.svg#AmigaTopaz') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'AmigaTopaz', sans-serif;
}

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    background-color: #0052b0;
    flex-direction: column;
}

/* --------- Heading */

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    flex: 1 0 auto;
}

h1 {
    margin-top: 4px;
    color: white;
    text-shadow: 2px 3px black;
    text-decoration-line: underline;
}

/* ---------- Main Div, the frame which will contain the game and messages */

.main-div {
    border: 2px solid white;
    box-shadow: 6px 6px black;
    margin: 10px 40px;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1 0 auto;
}

button {
    font-family: 'AmigaTopaz', sans-serif;
    font-size: 18px;
    padding: 3px;
    display: flex;
    margin: 17px;
    background-color: #f0f0f0;
    box-shadow: 2px 2px black;
    cursor: pointer;
}


/*The transform property set on this value makes the button
"move" if you click on it*/
button:active {
    transform: translateY(2px);
}

/* Styles for the actual board game */
.board {
    padding: 2px;
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    width: 100%;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
    justify-items: center;
    align-items: center;
}

/* Styles for the victory message */
.win {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 400px;
}

.win-text {
    color: white;
    text-align: center;
}

/* Styles for the instructions */
.text-how {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;
    padding: 10px;
}

/* Styles for the click counter and the timer */
.stats {
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex: 1 0 auto;
    margin: 10px 40px;
    color: #f0f0f0;
}

.card {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
}

/*The transform-style property "inserts" our memory card element inside the 3d space which is created in the 
#real-game container with the perspective property.
We also add a property called transition and a value of
transform .3s, otherwise we wouldn't see any flip.*/
.card-front {
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: #282A3A;
    transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.card-front>img {
    display: block;
    width: 100%;
    height: 100%;
}

/*We have to create this style class
and there's no space between the two classes
because both belongs to the same element.
When the .flip class is present we want
to rotate it on the Y axis 180 degrees.*/
.card.flipped .card-front {
    transform: rotateY(180deg) rotateZ(50deg);
}

.card-back {
    transform: rotateY(180deg) rotateZ(50deg);
    font-size: 28pt;
    user-select: none;
    text-align: center;
    line-height: 100px;
    background: #FDF8E6;
    position: absolute;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: #282A3A;
    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.card-back>img {
    display: block;
    width: 100%;
    height: 100%;
}

.card.flipped .card-back {
    transform: rotateY(0) rotateZ(0);
}

/* Class created to dynamically set the display property to "none" */
.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

/* --------- Footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #f0f0f0;
    border-top: 2px solid black;
    height: 50px;
    width: 100%;
    text-align: center;
}

#copyright {
    text-align: center;
    font-size: small;
    padding-top: 5px;
}

#social-media {
    display: flex;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1.2em;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

footer ul li a {
    color: black;
}

/* ----- Media queries for tablets -------*/
@media screen and (min-width: 768px) {

    h1 {
        font-size: 70px;
    }

    .main-div {
        margin: 10px 170px
    }

    button {
        font-size: 20px;
    }

    .card {
        height: 130px;
        width: 130px;
    }

    .stats {
        margin: 50px 200px;
    }

    footer {
        height: 80px;
        border-top: 3px solid black;
    }

    #copyright {
        font-size: medium;
    }

    #social-media {
        padding-top: 6px;
        font-size: 2.2em;
    }
}

/* -------- Media queries for bigger screens --------- */
@media screen and (min-width: 1024px) {

    h1 {
        font-size: 90px;
    }

    .main-div {
        margin: 10px 335px;
    }

    button {
        font-size: 20px;
    }

    .card {
        height: 100px;
        width: 100px;
    }

    .stats {
        margin: 50px 300px;
        position: relative;
        bottom: 26px;
    }

}