*{
    margin: 0;
}

main, footer{
    margin: 0px 16px;
}

body{
    background-color: #f2f2f2;
}

h1, h2, h3, p, a{
    color: #2d2d2d;
}

h1, h2, h3{
    text-align: center;
    font-family: "playfair-display", serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
  font-size: 4rem;   
  margin: 0;         
}

h2{
    margin-bottom: 35px;
}

p, a, button{
    font-family: "komet", sans-serif;
    font-weight: 400;
    font-style: normal;
}

img {
  display: block;
  margin: auto;
  width: auto;
}

section{
    margin-top: 100px;
    scroll-margin-top: 100px;
}

/*header*/
.header__menu{
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    background-color: #812631;
    flex-direction: column;
    padding: 25% 15%;
    gap: 10%;
    transform: translateX(100%);
    transition: transform 350ms ease-out;
}

.header{
    position: sticky;
    top: 0;
    background-color: #812631;
}

.header__nav{
    padding: 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header__logo img{
    width: 45px;
    height: auto;
}

.header__menu[data-visible="true"]{
    transform: translateX(0%);
}

.header__item{
    margin-bottom: 1rem;
}

.header__item a{
    color: #f2f2f2;
}

.header__item a:hover{
    text-decoration: underline;
    text-decoration-color: #f2f2f2;
} 

.mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    z-index: 9999;
    width: 40px;
    height: 30px;
    background: transparent;
    border: none;
}

.burger-line {
    display: block;
    height: 4px;
    width: 100%;
    background-color: #f2f2f2;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger-line.cross:nth-child(1) {
    transform: rotate(45deg) translate(9px, 9px);
}

.burger-line.cross:nth-child(2) {
    opacity: 0;
}

.burger-line.cross:nth-child(3) {
    transform: rotate(-45deg) translate(9px, -9px);
}

.header__link{
    text-decoration: none;
    font-size: 20px;
}

.header__menu{
    list-style: none;
}

/*hero*/

.hero{
    margin: 0% 5%;
    height: 90vh;
}


.headline-top .top {
    justify-self: flex-start;
}
.headline-top .bottom {
    justify-self: flex-start;
    margin-top: -0.85em;
}

.hero img{
    margin-top: 5%;
    margin-bottom: 5%;
    width: 100%;
}

.headline-bottom {
    justify-self: flex-end;
}

/*projects*/
.projects{
    display: flex;
    flex-direction: column;
}

.projects__cards{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.projects h3{
        padding: 7% 0%;
    }

.projects--button{
    display: flex;
    margin-left: auto;
    background-color: #812631;
    color: #f2f2f2;
    padding: 8px 10px;
    border-radius: 10px;
    border-color: #812631;
    cursor: pointer;
}

.projects--button:hover{
    background-color: #f2f2f2;
    color: #812631;
}

.projects img, .about img{
    width: 80%;
    height: auto;
}


/*contact*/
.contact__content{
     margin: 0% auto 3%;
}

.contact__info{
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
}

.contact__info img{
    display: inline-block;
    width: 30px;
}

.contact__info a{
    text-decoration: none;
}

.contact__info a:hover{
    text-decoration: underline;
}

.contact__info--phone, .contact__info--mail{
    display: flex;
    gap: 10px;
    align-items: center;
}

.contact__info--phone{
    margin: 5% 0% 3%;
}

.contact__social--icons{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1% auto 5%;
}

.contact__social--icons a:hover{
    color: #812631;
}


@media (min-width: 769px) {    
        .header__menu{
        position: static;        /* ikke fixed */
        transform: none;         /* fjern slide */
        inset: auto;             /* nulstil */
        background: none;        /* fjern baggrund */
        padding: 0;
        flex-direction: row;     /* vandret menu */
        display: flex;
        gap: 3rem;
        align-items: center;
    }

    .header__item{
        margin-bottom: 0%;
    }

    .mobile-nav-toggle{
        display: none;           /* skjul burger */
    }
    
    h1{
        font-size: 6rem;
    }

    .hero{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0% 0%;
    }

    .hero-top{
        margin: 0;
    }

    .headline-top{
        writing-mode: sideways-lr;
        text-orientation: mixed;
        margin-left: 7%;
    }

    .headline-bottom{
        margin-right: 7%;
        font-size: 7rem;
    }

    .headline-top .bottom{
        margin-left: -5rem;
    }

    .hero img{
        width: 25%;
        margin: 0;
    }


    .projects__cards{
        flex-direction: row;
        justify-content: space-around;
        gap: 0rem;
    }

    .projects--button{
        margin: auto;
    }

    .about__content{
        display: flex;
        margin: 0% 7%;
        
    }

    .about__content--text{
        width: 50%;
    }

    .about img{
        height: min-content;
        width: 25%;
    }

    .contact__content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 1000px;
    }

    .contact__info{
        order: 1;
    }

    .contact__content p{
        order: 2;
        padding-right: 10%;
    }

    .contact__info--phone{
        margin: 0% 0% 3% 0%;
    }

    .contact__info--phone, .contact__info--mail{
    gap: 30px;
}
}










/*.header{
    background-color: #405046;
}

.mobile-nav-toggle{
    display: none;
}*/