html {
  scroll-behavior: smooth;

}


body {
  background-image: url(../../images/awoap.png), url(../../images/awoab.jpg);
  background-repeat: no-repeat, repeat;
  background-position: center top, center top; /* en bild uppe, en nere */
  background-size: contain, contain; /* eller cover om de ska fylla */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
}


header {
 
  text-align: center;
}

header img {
  justify-content: center;
  align-items: auto;
  padding-top: 15vw;
  width: 25vw;
  height: auto;

}

@keyframes swing {
      0% { transform: scale(0); } /* Startposition */
      50% { transform: scale(1); } /* Mittposition - en liten vinkel */
      100% { transform: scale(1); } /* Slutposition - återgå till start */

    }

.logga-animerad {
      animation-name: swing; /* Namnet på @keyframes-regeln */
      animation-duration: 1s; /* Hur lång tid animationen tar */
      animation-timing-function: ease-in-out; /* Hur animationen ska tona in/ut */
      animation-iteration-count: 1; /* Hur många gånger animationen ska köras */

    }

ul {
  background: linear-gradient(to bottom,#000000,#000000 60%, #00000000);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 2vw;
  padding-bottom: 4;
  margin: 0;
  list-style-type: none;
  z-index: 1000;


}



li a{

  display: block;
  top: 0;
  opacity: .5;
  font-family: berylium;
  font-size: 1vw;
  text-align: center;
  color: white;
  transition: 1s;
  text-decoration: none;
  letter-spacing: .08vw;
  padding-right: 1.9vw;

}



li a:hover{
  opacity: 1;
  color: white;
  padding-right: 1.9vw;

}

div.a{

 /*
  justify-content: center;
  background-color: #381c08;*/
  border-radius: 2vw;
  padding-top: 5vw;
  padding-bottom: 2vw;
  width: 70%;
  height: 100%;
  margin: 0 auto;

}


div.b{
  padding-top: 2vw;
  padding-bottom: 2vw;
  width: 70vw;
  display: flex;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div.c{
  padding-top: 2vw;
  padding-bottom: 2vw;
  width: 70vw;
  height: 30vw;
  display: flex;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div.d{
  padding-top: 2vw;
  padding-bottom: 9vw;
  width: 70vw;
  height: 50vw;
  display: flex;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div a img.music {
  border-radius: 1vw;
  padding: 1vw;
  width: 6vw;
  height: auto;
  transition: .5s;

}

div a img.mus {
  border-radius: 1vw;
  width: 6vw;
  height: auto;
  transition: .5s;


}

div a img.music:hover {
  transform: scale(1.1);

}

div a img.mus:hover {
  transform: scale(1.1);

}

h1 {
  font-family: berylium;
  color: #f5f5dc;
  text-align: center;
}


h2 {
  border-top: 0.1vw solid white;
  padding-top: 2vw;
  font-family: berylium;
  font-size: 1vw;
  color: #f5f5dc;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: left;
  letter-spacing: .1vw;

}
p {
  /*background: linear-gradient(to bottom, #00000000 20%, #000000, #00000000 90%);
  background: linear-gradient(to right, #00000000 20%, #000000, #00000000 90%);*/
  border-bottom: 0.1vw solid white;
  font-family: berylium;
  font-size: .8vw;
  color: #f5f5dc;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: left;
  padding-bottom: 2vw;
  letter-spacing: .1vw;

}

div iframe.a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 80%;

  
}

iframe {
  border-radius: 2vw;
  overflow: hidden;
  overflow-x: 20px;



}


footer {
  
  margin: 0 auto;
  height: 4vw;


}

footer p{
  text-align: center;
}


/* ====== Mobilanpassning ====== */






@media (max-width: 768px) {

html {
  scroll-behavior: smooth;

}


body {
  background-image: url(../../images/awoap.png);
  background-repeat: no-repeat, repeat;
  background-position: center top, center top; /* en bild uppe, en nere */
  background-size: cover; /* eller cover om de ska fylla */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
}


header {
 
  text-align: center;
}

header img {
  justify-content: center;
  align-items: auto;
  padding-top: 15vw;
  width: 60vw;
  height: auto;

}

@keyframes swing {
      0% { transform: scale(0); } /* Startposition */
      50% { transform: scale(1); } /* Mittposition - en liten vinkel */
      100% { transform: scale(1); } /* Slutposition - återgå till start */

    }

.logga-animerad {
      animation-name: swing; /* Namnet på @keyframes-regeln */
      animation-duration: 1s; /* Hur lång tid animationen tar */
      animation-timing-function: ease-in-out; /* Hur animationen ska tona in/ut */
      animation-iteration-count: 1; /* Hur många gånger animationen ska köras */

    }

ul {
  background: linear-gradient(to bottom,#000000,#000000 60%, #00000000);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 2vw;
  padding-bottom: 4;
  margin: 0;
  list-style-type: none;
  z-index: 1000;


}



li a{

  display: block;
  top: 0;
  opacity: .5;
  font-family: berylium;
  font-size: 2.5vw;
  text-align: center;
  color: white;
  transition: 1s;
  text-decoration: none;
  letter-spacing: .08vw;
  padding-right: 1.9vw;

}



li a:hover{
  opacity: 1;
  color: white;
  padding-right: 1.9vw;

}

div.a{

 /*
  justify-content: center;
  background-color: #381c08;*/
  border-radius: 2vw;
  padding-top: 5vw;
  padding-bottom: 2vw;
  width: 70%;
  height: 100%;
  margin: 0 auto;

}


div.b{
  padding-top: 2vw;
  padding-bottom: 2vw;
  width: 70vw;
  display: flex-box;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div.c{
  padding-top: 2vw;
  padding-bottom: 2vw;
  width: 70vw;
  height: 30vw;
  display: flex;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div.d{
  padding-top: 2vw;
  padding-bottom: 9vw;
  width: 100vw;
  height: 100vw;
  display: flex;
  align-items: center;
  align-content: space-evenly;
  margin: 0 auto;
  justify-content: space-around;
  justify-items: space-evenly;

  }

div a img.music {
  border-radius: 1vw;
  padding: 1vw;
  width: 15vw;
  height: auto;
  transition: .5s;

}

div a img.mus {
  border-radius: 1vw;
  width: 15vw;
  height: auto;
  transition: .5s;


}

div a img.music:hover {
  transform: scale(1.1);

}

div a img.mus:hover {
  transform: scale(1.1);

}

h1 {
  font-family: berylium;
  color: #f5f5dc;
  text-align: center;
}


h2 {
  border-top: 0.1vw solid white;
  padding-top: 2vw;
  font-family: berylium;
  font-size: 3vw;
  color: #f5f5dc;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: left;
  letter-spacing: .1vw;

}
p {
  /*background: linear-gradient(to bottom, #00000000 20%, #000000, #00000000 90%);
  background: linear-gradient(to right, #00000000 20%, #000000, #00000000 90%);*/
  border-bottom: 0.1vw solid white;
  font-family: berylium;
  font-size: 2.5vw;
  color: #f5f5dc;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: left;
  padding-bottom: 2vw;
  letter-spacing: .1vw;

}

div iframe.a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 80%;
  translate: 50%;

  
}

iframe {
  border-radius: 2vw;
  overflow: hidden;
  overflow-x: 20px;



}


footer {
  
  margin: 0 auto;
  height: 4vw;


}

footer p{
  text-align: center;
}