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

.home h1 {
    font-size:3em;
}

.home p {
    font-size:1.2em;
    text-align: center;
}

@media screen and (max-width:770px) {
    h1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    span {
        display:block;
    }
}

@media screen and (max-width:400px) {
    h1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size:2.5em !important;
    }
    span {
        display:block;
        font-size:inherit;
    }
}

.home-nav {
    margin-top:2em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1em;
}

.home-nav p {
    margin: 0;
    font-size:1.8em;  
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    position: relative; 
    font-weight: bold;
    color:rgba(255, 255, 255, 0.589);
    z-index: 2;
    user-select: none;
    transition: 0.3s ease;
}

.home-nav div {
    padding:1em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border:solid 1px  rgba(178, 144, 217, 0.313);
    cursor:pointer;
    transition: 0.3s ease;
    height:150px;
}

.home-nav div::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0.4;
    background-size: 200px 200px;
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.3s ease;
}

#matches::before {
    background-image: url('/media/images/matches.png'), linear-gradient(to right, rgba(23,26,35, 0) 0%, rgba(23,26,35, 1) 100%);

}

#top-decks::before {
    background-image: url('/media/images/decks.png?v='), linear-gradient(to right, rgba(23,26,35, 0) 0%, rgba(23,26,35, 1) 100%);
}

#top-players::before {
    background-image: url('/media/images/players.png?v='), linear-gradient(to right, rgba(23,26,35, 0) 0%, rgba(23,26,35, 1) 100%);
}

#groups::before {
    background-image: url('/media/images/groups.png?v='), linear-gradient(to right, rgba(23,26,35, 0) 0%, rgba(23,26,35, 1) 100%);
}

.home-nav div:hover {
    transform:scale(1.1);
}

.home-nav div:hover p {
    color:var(--pico-primary);
}

.home-nav div:hover .home-nav div::before {
    opacity:1;
}

@media screen and (max-width:1280px) {
    .home-nav {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:650px) {
    .home-nav {
        grid-template-columns: 1fr;
    }
}