style.css

/*
    <Memory Game: Classic memory game where you need to find pair of cards.>
    Copyright (C) <2022>  <Cromega>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

:root {
    --main: #04009A;
    --second: #77ACF1;
    --third: #3EDBF0;
    --contrast: #C0FEFC;
}

body {
    overflow: hidden;
    min-width: 99vw;
    min-height: 99vh;
    background-color: var(--main);
    color: var(--contrast);
    display: grid;
    place-items: center;
}

h1 {
    width: 50vw;
    border-radius: 1em;
    background-color: var(--third);
    text-align: center;
    font-size: 3.5em;
    padding: .25em;
    margin-bottom: -1.5em;
}

main {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
}

button {
    aspect-ratio: 1/1;
    width: 20vw;
    border-radius: 1em;
    border: none;
    background-color: var(--second);
    color: var(--contrast);
    font-size: 2.5em;
    margin: 1em;
}

button:hover {
    transition-property: border;
    transition-duration: 300ms;
    border: solid;
    border-width: .25em;
    border-color: var(--contrast);
}

img {
    max-width: 18vw;
    background-color: var(--second);
    border-radius: 1em;
    padding: 1em;
    margin: .5vw;
}

footer {
    border-radius: 1em;
    background-color: var(--second);
    font-size: 1.1em;
    padding: 1vw;
    color: var(--main);
}

a,
a:visited {
    color: var(--contrast);
    text-decoration: none;
}

.guessed {
    width: 16.55vw;
    border: solid;
    border-color: var(--third);
    border-width: .75vw;
    pointer-events: none;
}

.win {
    color: var(--main);
    border: solid;
    border-radius: 1em;
    border-color: var(--third);
    border-width: .25em;
    background-color: var(--contrast);
    font-size: 4em;
    padding: .5em 1em;
}

@media (orientation: landscape) {
    img {
        max-width: 11vw;
    }
}

@media (max-height: 600px) {
    img {
        max-width: 13vw;
    }
}