/* MOBILE */

@media only screen and (min-width: 400px) and (max-width: 1000px) {
    :root {
        --column-count: 1;
    }

    header {  
        display: flex;
        flex-direction: row;
    }
    
    .header-title {
        font-size: 2em;
        color: #0F0F0F;
        font-family: 'Indie Flower', cursive;
    }

    .header-img {
        visibility: hidden;
        max-height: 0px;
    }

    .grid, #socials-grid {
        display: flex;
        flex-direction: column;
    }

    .flip-card, .flip-card-small {
        display: flex;
        flex-direction: column;
    
        z-index: 1;
        
        color: #173830;
        border: 3px solid #65B891;
    
        text-align: center;
        
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 25px;
    
        width: 50vw;
        height: 50vw;
    
        max-width: 300px;
        max-height: 300px;
    
        aspect-ratio: 1;
    
        justify-items: center;
        justify-content: center;
        align-items: center;
    
        perspective: 1000px;
        background-color: transparent;
    }

    .flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:active .flip-card-inner {
        transform: rotateY(180deg);
    }
    
    .flip-card-small:hover .flip-card-inner, .flip-card-small:focus .flip-card-inner, .flip-card-small:active .flip-card-inner {
        transform: rotateY(180deg);
    }

    .flip-card-title {
        font-size: 1em;
    }
    
    .flip-card-tagline {
        font-size: 1em;
    }

    footer {
        font-size: .75em;
    }
}