*{
    box-sizing: border-box;
    margin:0;
}

img{
    max-width: 100%;
    max-height: 15em;
}

p{
  font-size: 1.2em;
}

h1{
    font-size:2em;
    color:#010101;
}

h2{
    font-size: 1.5em;
    color: #050505;
    font-style: italic;
}

h3{
    font-size: 1.4em;
    color: #000000;
}

.footertekst{
  color: #052821;
  text-align: end;
  padding-top: 4em;
  padding-right: 2em;
}

h4{
  font-size: 1.3em;
}

.li{
  color: #0a3c37;
  text-decoration: none;
  list-style-type: none;
  text-decoration: underline;
}



h5{
  font-size: 1.6em;
  color:#050505
}

/* navbar*/

/*hovedside*/

body{
    min-height: 100vh;
    font-family: sans-serif;
}

header{
  margin-left: 1em;
  margin-right: 1em;
}

.navigation-container{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  justify-content: center;
}

.felt1{
  padding: 1.5em;
  background-color: #e4f1eb;
  text-decoration: none;
  
  
}

.felt2{
  padding: 1.5em;
  background-color: #1ea186;

}

.felt3{
  padding: 1.5em;
  background-color: #a8b29f;

}


.emne{
  font-style: italic;
  background-color: #ffffff;
  display: flex;
  text-align: center;

}

i{
  font-size: 4.5em;
  color: #53957d;
}

.vanskeligheder{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #ffffff;
  justify-items: center;
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 0.5em;
}

.billede{
  display: flex;
  background-color: #ffffff;
  justify-content: center;
}



.om{
  background-color: #ffffff;
  color: #06241a;
}

.CRAP-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #252928;
}


/*sectioner*/


.afkodning{
  background-color: #d2d5ca;
  color: #031e1a;
  margin-top:2em;
}

.design{
    background-color: #3c8573;
    color: #101816;
}

.rwd{
  background-color: #aad8d4;
  color: #101918;
  margin-top:2em;
  margin-bottom: 2em;
  
}

.brugertest{
  background-color: #ccd3cc;
  color: #031e1a;

}

footer{
  background-color: #ffffff;
  color: #2a302d;
  height:12em;
}



  @media screen and (max-width: 780px) {
    body{
      font-size: 1em;
      background-color: #ffffff;
    }
    header{    
      margin-top: 2.5em;
    }

    .emne{
      margin-right: 2em;
      margin-left: 2em;
      margin-top: 2em;
    }
    .billede{
      margin-right: 1em;
      margin-left: 2em;
    }

    .sammeforuds{
      margin-right: 2em;
      margin-left: 2em;
    }

    .vanskeligheder{
      margin-top: 2em;
      margin-bottom: 2em;
      margin-right: 3em;
      margin-left: 3em;
      
    }

    .om{
      margin-right: 2em;
      margin-left: 2em;
    }

    .afkodning{
      padding-right:2em ;
      padding-left: 2em;
      padding-top: 2em;
      padding-bottom: 2em;

    }

    .CRAP-container{
      display: grid;
      grid-template-columns: 1fr;
    }

    .design{
      padding-right:2em ;
      padding-left: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
     
    }
    .brugertest{
      padding-right:2em ;
      padding-left: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
    }
  }

  @media screen and (min-width: 780px) {
    body{
      font-size: 1.3em;
    }

    header{    
      margin-top: 2.5em;
      font-size: x-large;
    }
    .emne{
      margin-right: 4em;
      margin-left: 4em;
      margin-top: 4em;
      display: flex;
      text-align: center;
    }

    .sammeforuds{
      margin-right: 4em;
      margin-left: 4em;
    }
    .billede{
      margin-right: 4em;
      margin-left: 4em;
    }

    .vanskeligheder{
      margin-right: 3em;
      margin-left: 3em;
      font-size: 1em;
      
    }

    .afkodning{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;

    }

    

    .om{
      margin-right: 4em;
      margin-left: 4em;
    }

    

    .design{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;
     
    }
    .brugertest{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;
    }
  }
   
  @media screen and (min-width: 1000px) {
    body{
      font-size: 1.3em;
      padding-left: 7em;
      padding-right: 7em;
      

    }

    header{    
      margin-top: 2.5em;
      font-size: x-large;
    }
    .emne{
      display: flex;
      justify-content: center;

    }

    .sammeforuds{
      margin-right: 4em;
      margin-left: 4em;
    }
    .billede{
      margin-right: 4em;
      margin-left: 4em;
    }

    .vanskeligheder{
      margin-right: 8em;
      margin-left: 8em;
      font-size: 1em;
      
    }

    .afkodning{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;

    }

    

    .om{
      margin-right: 4em;
      margin-left: 4em;
    }

    

    .design{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;
     
    }
    .brugertest{
      padding-right:4em ;
      padding-left: 4em;
      padding-top: 4em;
      padding-bottom: 4em;
    }
  }
    

      /* Medierneforespørgsler for at ændre layout til en kolonne ved mindre skærmstørrelser */