/*
    CSS file created by Lars Skjærbæk
*/

img {
    filter: grayscale(100%);
}

body {
    width: 90%;
    margin: auto;
    background-color: #faf0e6;
    font-family: Arial, sans-serif;
}

#header {
  width: 100%;
  margin: auto;
  padding: 20px 0;
  text-align: center;
  color: black;

  
  background: linear-gradient(to right, #8b7355 0%, #d2b48c 40%, #f5deb3 70%, #faf0e6 90%);
}


#nav {
    width: 100%;
    margin: auto;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #faf0e6;
    text-align: center;
}

#section {
    float: left;
    text-align: left;
    width: 50%;
    margin: 1%;
    border: 2px solid #d2b48c;
    padding: 5px;
    background-color: #fff;
}

#aside {
  float: right;
  text-align: center;
  width: 40%;
  margin: 1%;
  border: 2px solid #d2b48c;
  padding: 5px;
  background-color: #fff;
}

#footer {
    clear: both;
    width: 100%;
    margin: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #8b7355;
    color: white;
    text-align: center;
}

#menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #8b7355;
}

.menuPunkt {
    float: left;
}

.menuPunkt a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #8b7355;
}

.menuPunkt a:hover {
    background-color: #d2b48c;
    transform: scale(1.2); 
}

/* mobil optimeret design */
@media screen and (max-width: 800px) {

    #section {
      width: 48%;
      margin: 1%;
    }

    #aside {
      width: 48%;
      margin: 1%;
    }

}