body {
    background-color: #F4F1EB;

     min-height: 100vh;

    margin: 0;
    padding: 0;
    

    display: grid; 
    grid-template-columns: 
        1fr
        repeat(4,minmax(0,272px))
        1fr 
    ;
    grid-gap: 0px; 
    grid-template-rows: 
      99dvh     /* MainSection */
        auto      /* menu */
        auto      /* info */
        auto      /* program */
        auto      /* about */
        auto      /* parkering */
        auto      /* taler */
        auto      /* contact */
    ;
    grid-template-areas: 
        "MainSection MainSection MainSection MainSection MainSection MainSection"
        "menu menu menu menu menu menu"
        "info info info info info info"
        "program program program program program program"
        "about about about about about about"
        "parkering parkering parkering parkering parkering parkering"
        "taler taler taler taler taler taler"
        "contact contact contact contact contact contact"
        ;
        
    border-width: 15px;
    border-style: solid;
    border-image: linear-gradient(to right, #DCB282, #88674B) 1;
}

h1 {
  font-family: Imperial Script;
  font-size: 90px;
  margin: 0;
  padding: 0;
}

h2 {
  font-family: Imperial Script;
  font-size: 40px;
  margin: 0;
  padding: 0;
}

    h1, h2, h3, h4 {
    font-weight: lighter;
    }  

main {
    grid-area: MainSection;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
      height: 1fr;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    background-image: url(images/72127879-bb77-4657-9a1c-ad6e46e22b88.jpg);
    }

    #hero {
        text-align: center;
        display: flex;
        flex-direction: column;
        color: #F4F1EB;
        margin-bottom: 20px;
    }

        #hero h1 {
    text-shadow: 0 0 10px #91d4eecc;
    animation: gentleGlow 3s infinite alternate;
}

@keyframes gentleGlow {
    from { text-shadow: 0 0 10px 91 #d8ebf3; }
    to { text-shadow: 0 0 20px #d8ebf3; }
}

#menu {
    grid-area: menu;
    height: 80px;
    background-color: #F4F1EB;
    display: flex;
    justify-content: center;
    position: sticky;
    align-items: center;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Desktop menu links */
#menu a {
    margin: 0 20px;
    font-family: Imperial Script;
    font-size: xx-large;
    color: #000;
    text-decoration: none;
}

#menu a:hover {
    text-decoration: underline 1px;
}

/* Mobile styles */
@media screen and (max-width: 770px) {
    #menu {
        justify-content: space-between;
        padding: 0 20px;
    }
    
    /* Hide regular menu links */
    #menu nav {
        display: none;
    }
    
    /* Mobile menu button */
    .mobile-menu-button {
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #000;
        font-family: Imperial Script;
    }
    
    /* Mobile menu overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #F4F1EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(-500%);
        transition: transform 0.3s ease;
        z-index: 99;
    }
    
    .mobile-menu-overlay.active {
        transform: translateY(-0%);
    }
    
    .mobile-menu-overlay a {
        font-family: Imperial Script;
        font-size: 2rem;
        color: #000;
        text-decoration: none;
        margin: 15px 0;
    }
    
    /* Show mobile menu button */
    .mobile-menu-button {
        display: block;
    }
}

/* Tablet styles (optional adjustments) */
@media screen and (min-width: 771px) and (max-width: 1024px) {
    #menu a {
        margin: 0 15px;
        font-size: x-large;
    }
    
    .mobile-menu-button {
        display: none;
    }
}

/* Desktop - hide mobile button */
@media screen and (min-width: 1025px) {
    .mobile-menu-button {
        display: none;
    }
}


#basisInfo {
    grid-area: info;
   display: flex;
    justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(images/g6.png);
    padding: 50px; 
}


        .box {
            width: 50%;
                color: #F4F1EB;
                margin-right: 50px;
        }
            .box img {
                width: 100%;
                border: 1px solid white;
            }




#program {
    grid-area: program;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #F4F1EB;
    padding: 50px;
}
    #program h2 {
        margin-bottom: 50px;
        color: #3B5166;
    }


#omOs {
    grid-area: about;
    display: flex;
    justify-content: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(images/g6.png);
    padding: 50px;
}

    .EkstraInfo {
        margin-top: 70px;
    }




#contact-section {
    grid-area: contact;
    background-color: #506D88;
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

    #double-contact-container {
        width: 100%;
        display: flex;
    }

    .contactBox {
        width: 50%;
        margin: 0 20px;
    }

    #contact-form-container {
        background-color: #8a96a1;
        padding: 30px;
    }

        .contact-form {
            height: fit-content;
            display: flex;
            padding: 30px;
            flex-direction: column;
            background-color: #fff;
            color: #000;
        }


                label {
                    margin: 0;
                    font-size: medium;
                }

                input {
                    padding: 15px;
                    margin: 10px 0;
                    border: none;
                    background-color: #E2E8EE;
                    font-size: small;
                }

                .margintop {
                    margin-top: 20px;
                }

                    .button {
                        width: fit-content;
                        padding: 12px 25px;
                        border: none;
                        background-image: linear-gradient(to right, #DCB282, #88674B);
                        color: whitesmoke;
                        margin-top: 20px;
                    }  

                        .button:hover {
                            text-decoration: underline;
                        }



#parkering-section {
    grid-area: parkering;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.wrapImage {
    width: 60%;
    margin-bottom: 50px;
}



#toastmastere-section {
    grid-area: taler;
    height: fit-content;
    color: #ffffff;
    background-color: #3a5167;
}

#toastmastere-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 50px;
}



@media screen and (max-width: 770px){ /*Phone*/
#basisInfo, #omOs {
    flex-direction: column;
    padding: 10px;
}

        .box {
            width: 100%;
        }

    #program img {
        width: 99%;
    }

    

#contact-section {
    padding: 10px;
    height: fit-content;
}

    #double-contact-container {
        flex-direction: column;
        height: fit-content;
    }

    .contactBox {
        width: auto;
        margin: 20px 0px;
    }


    .wrapImage {
        width: 100%;
    }

}


@media screen and (min-width: 771px) and (max-width: 1020px) { /*Tablet*/
#basisInfo, #omOs {
    flex-direction: column;
    padding: 10px;
}

        .box {
            width: auto;
        }

#program img {
    width: 90%;
}
}