body{
 background-color: blanchedalmond;
 margin: 0;
 padding: 0;
}
h4{
  margin: auto;
  font-size: 2em;
  width: 550px;
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 300;
  padding: 8px;
  background-color: rgb(171, 117, 72);
  border: 2px solid black;
  border-radius: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: white;
  border-radius: 2px;
}

.meny {
  display: none;
  flex-direction: column;
  background-color: rgb(183, 98, 46);
  position: fixed;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  z-index: 250;
  padding: 60px 16px 16px 16px;
  gap: 10px;
  box-sizing: border-box;
}

.meny.open {
  display: flex;
}

.meny button {
  width: 100%;
  height: 44px;
  background-color: rgb(171, 117, 72);
  color: white;
  border: 2px solid black;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}
h6{
  margin: auto;
  font-size: 1em;
  width: 500px;
  overflow-wrap: break-word;
}
#container{ 
  width:100%;
}
aside{
  justify-content:center;
  position: relative;
  top: 0;
  left: 0;
  right: 0; 
  display: flex;
  gap: 50px;
  padding: 5px;
  background-color:rgb(183, 98, 46);
}
button {
  padding: 10px;
  width:80px;
  height:50px;
  border: 2px solid black;
  border-radius: 4px;
  background-color:rgb(171, 117, 72);
  color: white;
  cursor: pointer;
   transition: transform 0.3s ease, border 0.3s ease, border-radius 0.3s ease;
}
button:hover {
    transform: scale(1.2);
			border-radius: 10%;
			border: 3px solid lightyellow;
			z-index: 100;
			position: relative;
}
button:active{
  border: 3px solid black;
  transition: border 0s;
}

div  div {
  display:flex;
  margin-top: 12vh;
  height: 20vh;
  position:relative;
  width:100%;
  background-color:rgb(123, 72, 28);
  font-size: 8em;
  font-weight:bold;
  color:white;
  font-family:arial;
  align-items: center;
  justify-content: center;
}
@media (max-width: 840px) {
  h4 {
    width: 90%;
    font-size: 1.7em;
  }

  h6 {
    width: 90%;
    font-size: 0.95em;
  }

  aside {
    gap: 20px;
    flex-wrap: wrap;
  }

  button {
    width: 70px;
    height: 45px;
    font-size: 0.85em;
  }
}
@media (max-width: 540px) {
  aside {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  h4 {
    width: 95%;
    font-size: 1.4em;
    text-align: center;
  }

  h6 {
    width: 95%;
    font-size: 0.9em;
    text-align: center;
  }

  #välkommen {
    font-size: 4em;
  }
}
@media (max-width: 400px) {

  .hamburger {
    top: 8px;
    right: 10px;
  }

  .meny {
    width: 160px;
    padding-top: 55px;
  }

  .meny button {
    height: 40px;
    font-size: 0.85em;
  }

  h4 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 0.85em;
  }

  #välkommen {
    font-size: 3em;
  }
}