/*farver*/
:root{
    --denBlaa: #055676;
    --denGronne: #5A7A3E;
    --denHvide:#F2E7E3;
    --denSorte: #212431;
    --denBrune: #75462F;
}

    /*fontfamily*/
.shanti-regular {
    font-family: "Shanti", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  body{
    background-color: var(--denHvide);
    margin: 0%;
    font-family: "Shanti", sans-serif;
    color: #055676;
    padding: 0%;
  }


/*burger menu*/
    @media screen and (max-width:768px) 
    {
    #computerheader {
        display: none;
    }
    
      .container {
        margin: auto;  
      }

      nav{
        top: 0;
        z-index: 1;
      }
      
      .navbar {
        width: 100%;
      }
      
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
      }
      
      .navbar .menu-items {
        display: flex;
      }
      
      .navbar .nav-container li {
        list-style: none;
      }
      
      .navbar .nav-container a {
        text-decoration: none;
        text-transform: uppercase;
        color: var(--denBlaa);
        font-weight: bold;
        font-size: 1.2rem;
        padding: 0.7rem;
      }
      
      .navbar .nav-container a:hover{
          font-weight: bolder;
      }
      
      .nav-container {
        display: block;
        position: relative;
        height: 80px;
      }
      
      .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 20px;
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
      }
      
      .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 27px;
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      
      .nav-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: var(--denBlaa);
      }
      
      .nav-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
      }
      
      .nav-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
      }
      
      .navbar .menu-items {
        padding-top: 100px;
        background-color: #F2E7E3;
        height: 130vh;
        width: 100%;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        transition: transform 0.5s ease-in-out;
        text-align: center;
        margin-top: 5%;  
      }
      
      .navbar .menu-items li {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        font-weight: 500;
      }
      nav a:hover {
        color: var(--denGronne);
      }

    /*logo*/
  
      .logo {
        position: absolute ; 
        max-width: 100%;
        height: 333px;
        margin-right: 50%;
        margin-top: -25%;
        align-items:center ;
      }   
    /*LOGO END*/
      
      .nav-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
      }
      
      .nav-container input[type="checkbox"]:checked ~ .logo{
        display: none;
        }
    
    .ikoner{
            margin-left: 15cm;
        }
    }
/*burger menu END*/

/*HEADER START*/
    /*computer*/
@media screen and (min-width:768px) {
 #burger {
    display: none;
    }
 
    /*Logo*/
header > nav > a > #logo{
        align-items:center ;
        height: 450px;
        width: 500px;
        margin-left: 6%;
        margin-top: 2%;
    }
    
header>nav{
        display:flex;
        justify-content:space-between;
        align-items:center; 
        height: 120px;  
        }
        
        header>nav>a{
            text-decoration: none;
            font-size: 35px;
            color:var(--denBlaa);
            padding-top: 10px;
            padding-bottom: 10px;
            margin-right: 20px;
            border-radius: 15px 16px;
            margin-left: 3%;
            margin-right: 1%; 
        }
        nav a:hover {
            color: var(--denGronne);
        }
          .ikoner{
            padding-right: 5%;
        }
    }
/*----------------HEADER END-------------------*/ 

/*-----INDHOLD START-----*/
/*mobil*/
@media screen and (max-width: 768px){
  .hero-ig{
      display: flex;
      object-fit: contain;
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
    }

    h1{
      text-align: center;
      font-size: 20px;
      letter-spacing: 4px;
    }
    h2{
      color: var(--denGronne);
      margin-left: 15px;
      font-size: 15px;
      letter-spacing: 4px;
      text-align: center;
    }

    p{
      margin-left: 20px;
      margin-right: 20px;
      font-size: 10px;
      letter-spacing: 4px;
    }
  }

/*computer*/
@media screen and (min-width: 768px){
  .hero-ig{
      display: flex;
      position: relative;
      object-fit: contain;
      width: 100%;
      height: auto;
      padding: 0;
      }

      h1{
        text-align: center;
        letter-spacing: 6px;
        font-size: 40px;
      }
      h2{
        color: var(--denGronne);
        margin-left: 15px;
        font-size: 30px;
        letter-spacing: 6px;
        text-align: center;
      }
  
      p{
        margin-left: 20px;
        margin-right: 20px;
        letter-spacing: 5px;
        font-size: 20px;
      }
    }

/*-----Indhold slut-----*7

/*-----------Footer start------------*/
    /*mobil*/
    @media screen and (max-width:768px) {
      footer {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:space-around;
      text-align: center;
      padding-top: 40%;
      padding-bottom: 5%;
      margin-bottom: 2%;    
    }
    footer > div > h3 {
      font-size: 10px;
  }
  
  footer>div>p{
      font-size: 8px;
  }
  }
  
  /*computer*/
  @media screen and (min-width:768px) {
      footer {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content:space-around;
          text-align: center;
          padding-top: 20%;
          margin-bottom: 2%;
          padding-bottom: 40px;
          color: #055676;
      }
  
      footer > div > h3 {
        font-size: 20px;
    }
    
    footer>div>p{
        font-size: 16px;
    }
  }
  
  footer > div > h3 {
      color: var(--denBlaa);
  }
  
  footer > div > p {
      color: var(--denBlaa);
  }
  /*FOOTER END*/