/* baggrund  */
body {
  background-color: black;
  background-image: url("../img/lille-juletre.webp");
}

main {
  display: flex;
  flex-wrap: wrap;
}

/* billeder */
.juletrae {
  width: 100%;
  height: auto;
  z-index: -1;
}

.laagen {
  width: 300px;
  height: 300px;
}

/* typografi */
h1 {
  font-size: 2rem;
  font-family: "Great Vibes", cursive;
}

/* justering/placering af kasser/billeder */

.julekugle-box {
  width: 30%;
  box-sizing: border-box;
  margin-top: -26px;
}

.julekugle-kalender {
  width: 100%;
  height: auto;
}

.main {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  padding: 20px;
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.box-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Desktop (min-width: 769px) */
@media only screen and (min-width: 769px) {
  /* layout */
  .main {
    flex-direction: row;
  }

  .julekugle-box {
    width: 30%;
  }

  .box-1 {
    width: 70%;
  }
}

/* Tablet (min-width: 481px and max-width: 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* layout */
    .main {
      flex-direction: column;
    }
  
    /* placering/justering af kasser  */
    .julekugle-box,
    .box-1 {
      width: 100%;
      max-width: 500px;
      margin-bottom: 30px;
    }

    .box-1 {
      padding: 0px;
      margin-bottom: 190px;
    }

    .main {
      padding: 0px;
    }
  
    /* font */
    h1 {
      font-size: 1.8rem;
    }

    /* billeder */
    .julekugle-kalender {
      height: 580px;
      width: 380px;
      padding-top: 12px;
      margin-bottom: 0;
    }

}


/* Telefon (max-width: 480px) */
@media only screen and (max-width: 480px) {
  /* layout på siden */
  .main {
    flex-direction: column;
  }

  /* skrift */
  h1 {
    font-size: 1.5rem;
    text-align: center;
  }

  /* billeder */
  .laagen {
    max-width: 280px;
  }

  .julekugle-kalender {
    height: 290px;
    width: 200px;
    padding-top: 20px;
  }

  .julekugle-box,
  .box-1 {
    width: 100%;
    margin-bottom: 20px;
  }
}