/* --------------------------------media medium--------------------- */
@media screen and (min-width: 320px) {
    

    body {
        margin: 0 auto;
        justify-content: center;
        max-width: 100%;
        /*prevent horizontal scroll*/
        overflow-x: hidden;
        /*prevent horizontal scroll*/
    }

    header {
        align-items: center;
    }

    .logo {
        max-width: 90px;
        max-height: 90px;
    }

    #menu {
        display: none;
    }

    .navigation {
        flex-direction: row;
        justify-content: space-evenly;

    }

    .navigation a {
        font-size: 6vw;
        padding: .5rem;

    }

    .navigation li {
        display: block;
    }

    #animateMe {
        grid-template-rows: 1fr;
    }

    .active::before {
        content: "✦ Home";
        text-decoration: none;

    }

    #name {
        font-size: 10vw;
    }



    /*-------------- body css --------------*/
    h1 {

        padding-left: 1rem;
        font-size: 2rem;
    }

    .hero h1 {
        font-size: 6.5vw;
        text-align: center;
    }

    .heroText p {
        display: flex;
        padding: .25rem;
        font-size: 6vw;
        text-align: center;
        color: var(--text-2ndary-color);

    }

    .description {
        padding: 1rem;
    }
    
    #reserve {
        position: static;
        margin: 2rem 0;

    }

    /*-------------- footer css --------------*/
    .socialLinks a img {
    max-width: 40px;
    height: auto;
    }

}