@media (max-width: 600px) {

    body, main {

        max-width: 500px;

    }

    .card {

        min-height: 250px;
        justify-content: space-evenly;
        font-size: 1.2em;
        width: 100%;

    }

    .tier-container {

        margin-left: 40px;
        max-width: 450px;
        flex-wrap: wrap;
        font-size: 0.9em;
        margin-top: 40px

    }

    .profile {

        position: absolute;
        bottom: 150px;

    }

    .place {

        margin: 0;
        position: absolute;
        bottom: 30px;
        left: 40px

    }

    #template {

        display: none;

    }

    .gamemodes {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 15px;
        padding: 0.5rem 0;
        align-items: center;
        max-width: 100vh;
    }

    .gamemodes::-webkit-scrollbar {
        height: 8px;
    }
    .gamemodes::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
    }
    
    #search {

        width: 75px;

    }

}