html {
    font-display: swap
}

.badge {
    position: absolute;
    z-index: 10;
    right: 20px;
    top: 10px;
    background-color: white;
}

.header-row img {
    filter: invert();
    padding: 5px;
}

.header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.header-row div,
.header-row a {
    height: 100%;
    width: 100%;
    align-items: center;
    vertical-align: middle;
}

.header-row img {
    width: 100%;
    height: 100%;
}

.header-row a:hover,
a.sidenav-trigger:hover {
    background-color: #ff1744;
}

.grid div {
    border: 5px solid white;
}

.row .col {
    height: 300px;
}

.grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    cursor: pointer;
    padding: 0 !important;
    transition: scale 0.2s ease;
    position: relative;
}

.logo-box {
    margin: 5%;
}

.logo-box img {
    max-width: 100%;
}

.content:hover {
    scale: 1.1;
    z-index: 100;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
}

#mobile-nav a:hover {
    background-color: #64dd17;
}

#mobile-nav img.left {
    height: 36px;
    width: 36px;
    margin-top: 6px;
    margin-right: 6px;
}

#mobile-nav img.logo {
    width: 50%;
    margin-left: 25%;
    margin-top: 5%;
}