@font-face 
{ 
    font-family: Fredoka; src: url('Fonts/Fredoka-SemiBold.ttf'); 
}

h1
{
    font-family: Fredoka;
    font-size: 40px;
    margin: 0%;
    padding: 10px 0px;
}

body 
{
    background: #0097B2;
    color: white;
    font-size: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 85vh;
}

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

ul
{
    margin: 0;
    padding: 0;
}

button.easy, button.medium, button.hard {
    border-style: solid;
    border-width: 0.2cm;
    border-radius: 10px;
    color: white;
    display: block;
    font-family: Fredoka;
    font-size: 100px;
    padding: 10px 20px;
    margin: 10px auto;
}

button.easy {
    background: #FFDE59;
    border-color: #FFBD59;
}

button.medium {
    background: #7ED957;
    border-color: #00BF63;
}

button.hard {
    background: #FF5757;
    border-color: #FF3131;
}

button.menu {
    background: #5CE1E6;
    border-color: #0CC0DF;
    border-style: solid;
    border-width: 0.2cm;
    border-radius: 10px;
    color: white;
    display: block;
    font-family: Fredoka;
    font-size: 40px;
    padding: 10px 20px;
    margin: 10px auto;
}

button.easy:hover {
    background: #FFBD59;
    border-color: #FFDE59;
}

button.medium:hover {
    background: #00BF63;
    border-color: #7ED957;
}

button.hard:hover {
    background: #FF3131;
    border-color: #FF5757;
}

button.menu:hover {
    background: #0CC0DF;
    border-color: #5CE1E6;
}

.difficulty-buttons {
    align-items: center;
    justify-content: center;
    text-align: center;
}

ul.header
{
    background-color: #0CC0DF;
    color: white;
    display: flex;
    list-style-type: none;
    text-align: center;
    font-family: Fredoka;
    margin: 0%;
    padding: 5px;
    font-size: 20px;
}

li.header
{
    display: inline;
    margin: 0 15px;
}

a
{
    color: inherit;
    text-decoration: none;
}

.card-container {
    perspective: 1000px;
}

.card {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    border-radius: 10px;
}

.card-front {
    transform: rotateY(180deg);
}

.card-back {
    background-color: #0CC0DF;
}

.card.flipped {
    transform: rotateY(180deg);
}

.card-grid {
    display: grid;
    gap: 5px;
    justify-content: center;
}

img {
    border-radius: 10px;
}

img.easy {
    width: 100px;
    height: 100px;
}

img.medium {
    width: 100px;
    height: 100px;
}

img.hard {
    width: 100px;
    height: 100px;
}

.card-container.easy {
    width: 100px;
    height: 100px;
}

.card-container.medium {
    width: 100px;
    height: 100px;
}

.card-container.hard {
    width: 100px;
    height: 100px;
}

.card-grid.easy {
    grid-template-columns: repeat(4, 100px);
}

.card-grid.medium {
    grid-template-columns: repeat(6, 100px);
}

.card-grid.hard {
    grid-template-columns: repeat(8, 100px);
}