:root {
    --blue0: #0e4377;
    --blue1: #1669ba;
    --blue2: #1a7cdc;
    --blue3: #358fe7;
    --blue4: #56a1eb;
    --blue5: #78b4ef;
    --blue6: #78b4ef;
    --blue7: #9ac7f3;
    --blue8: #bcdaf7;
    --blue9: #ddecfb;
    --primary: #374140;
    --secondary: #D9CB9E;
    --highlight: #BDC3C7;
}

nav {
    background-color: var(--blue2);
    font-weight: bold;
}

body {
    background-color: #0e4377;
    color: #EEE;
    font-family: 'Dosis', sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.card .card-content {
    background-color: var(--blue3);
}

.card .card-action {
    background-color: var(--blue1);
    color: var(--secondary);
    text-align: center;
    font-weight: bold;
}

.card.game-card .card-image img {
    aspect-ratio: 640 / 480;
    object-fit: cover;
}

strong {
    font-weight: 700;
}

.btn {
    font-weight: bold;
}

.btn-primary {
    background-color: var(--primary);
}

.w-100 {
    width: 100%;
}

.logo {
    font-family: 'Luckiest Guy', cursive;
    color: white;
    text-transform: uppercase;
    margin-left: 8px;
    margin-right: 8px;
}