/* Kode skrevet av Kenneth Gjermstad */

/* Fjerner margin og padding på alle elementer fra starten så det ikke flytter på elementer */
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

/* Setter main til flex for å kunne sentrere alt innhold */

main {
  display: flex;
  justify-content: center;
}

body {
  background-color: rgb(99, 99, 99);
}

/* Standard-innstillinger for nye bilder før de endres manuelt */

img {
  position: relative;
  box-sizing: border-box;
  top: 0px;
  max-width: 100%;
  max-height: 100vh;
}

/* Container for alt i skjermvinduet til bruker */

.container {
  display: flex;
  position: relative;
  box-sizing: border-box;
  justify-content: center;
  width: 100vw;
  height: auto;
  max-width: 1456px;
}

/* Beholder for selve bildene og hvor %-størrelse justeres fra */

.picholder {
  position: absolute;
  margin: 0;
  padding: 0;
}
.button {
  z-index: 2;
  position: absolute;
  top: 75%;
  left: 5%;
  border: 0.4em solid #ffff00;
}

/* Hovedbakgrunn - Sky og natur */

.sky {
  z-index: 0;
  position: relative;
  object-fit: contain;
}

/* CSS for solen og animasjonen av sola */

.sun {
  z-index: 1;
  position: absolute;
  top: 27%;
  left: 55%;

  height: auto;
  padding-top: 2%;
  width: 2%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

  background-color: rgb(249, 222, 102);
  box-shadow: 0 0 40px 10px rgb(249, 222, 102);
  animation: sunset 60s linear infinite, sunshine 4s ease-in-out infinite; /* animerer solen*/
}
/* Animasjonen av soloppgang og -nedgang */
@keyframes sunset {
  0% {
    top: 32%;
    left: 55%;
    opacity: 1;
  }
  33% {
    top: 6%;
    left: 65%;
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  66% {
    top: 6%;
    left: 43%;
    opacity: 1;
  }
  100% {
    top: 32%;
    left: 55%;
    opacity: 1;
  }
}
/* Animasjon av solen som gløder med solskinn */
@keyframes sunshine {
  0% {
    box-shadow: 0 0 40px 10px rgb(249, 222, 102);
  }
  50% {
    box-shadow: 0 0 40px 20px rgb(249, 222, 102);
    /* in order: x offset, y offset, blur size, spread size, color */
  }
  100% {
    box-shadow: 0 0 40px 10px rgb(249, 222, 102);
  }
}

/* CSS for fjellet som solen skjuler seg bak */

.mountain {
  z-index: 2;
  position: absolute;
  object-fit: contain;
}

/* CSS for skyene og animasjonen av skyer utenfor vinduet */

.clouds {
  z-index: 3;
  position: absolute;
  width: 100%;
  height: 100vh;
  max-width: 5440px;
  max-height: 100%;
  background: url(images/cloud.png);
  animation: clouds-drift 250s linear infinite; /* setter hastighet på skyen, høyere tall på tid = saktere */
  opacity: 0.3; /* Setter hvor gjennomsiktig skyen skal være */
}
@keyframes clouds-drift {
  0% {
    background-position: 180px;
  }
  100% {
    background-position: 5440px;
  }
}

/* CSS for at mørket senker seg når sola går opp og ned bak fjellet */

.night {
  z-index: 4;
  position: absolute;
  background-color: rgb(26, 13, 109);
  width: 100%;
  height: 100%;
  animation: dark-night 60s linear infinite;
}
@keyframes dark-night {
  0% {
    opacity: 0.6;
  }
  15% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}

/* Bakgrunnsbilde av rommet med transparente vindu */

.room {
  z-index: 5;
  position: absolute;
  object-fit: contain;
}

/* CSS for håndkle, flytende tekstboks og div-knapp*/

.towel-pic {
  z-index: 6;
  position: absolute;
  width: 10%;
  top: 58%;
  left: 71%;
  cursor: grabbing;
}

.towel-pic + .towel-card {
  display: none;
}

.towel-pic:hover + .towel-card {
  display: block;
}

.towel-card {
  /* Utseende av infokortet med bilde */
  z-index: 20;
  position: absolute;
  width: 400px;
  height: auto;
  transform: translate(-50%, -50%);
  top: 45%;
  left: 50%;

  align-items: center;
  justify-content: center;
  background-color: rgb(211, 211, 211);
  padding: 10px;
  margin: 20px;

  border-radius: 10px;
  font-family: sans-serif;
  box-shadow: 0px 0px 30px 8px rgb(0, 0, 0);
  animation: floating-card 20s linear infinite;
}
@keyframes floating-card {
  0% {
    top: 40%;
    left: 50%;
  }
  13% {
    top: 42%;
    left: 53%;
  }
  25% {
    top: 37%;
    left: 49%;
  }
  50% {
    top: 35%;
    left: 53%;
  }
  75% {
    top: 45%;
    left: 48%;
  }
  89% {
    top: 43%;
    left: 51%;
  }
  100% {
    top: 40%;
    left: 50%;
  }
}

.towel-card > img {
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid rgb(76, 76, 76);
  width: 400px;
  max-width: 100%;
  max-height: 100%;
}
.towel-card > h1 {
  font-size: 1.5em;
  margin: 5px 20px;
}
.towel-card > p {
  margin: 0px 20px;
}
.author {
  text-align: right;
  padding-top: 15px;
  margin: 0px 20px;
}

/* CSS for mobil på bordet og påskeegghamster */

.phone-off {
  z-index: 6;
  position: absolute;
  width: 4%;
  top: 73.5%;
  left: 5%;
}
.phone-on {
  z-index: 7;
  position: absolute;
  width: 4%;
  top: 73.5%;
  left: 5%;
  opacity: 0;
  cursor: pointer;
  animation: ringring 3s linear 15s infinite;
}
.phone-on + .rodent {
  display: none;
}
.phone-on:hover + .rodent {
  display: block;
}
@keyframes ringring {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.rodent {
  z-index: 10;
  position: absolute;
  width: 20%;
  top: 25%;
  left: 33%;
}

/* CSS for vannflasken */

.bottle {
  z-index: 10;
  position: absolute;
  width: 1.4%;
  top: 54%;
  left: 30%;
}

.bottle:hover {
  animation: pulsebottle 1.5s linear infinite;
  animation-play-state: running;
  cursor: grabbing;
}
@keyframes pulsebottle {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
}

/* CSS for marihønen på planten og sengekanten */

.ladybug {
  z-index: 11;
  position: absolute;
  width: 1.4%;
  top: 32%;
  left: 74.5%;
  transform: rotate(-120deg);
  animation: ladybug-trip 25s linear 0s infinite;
  animation-play-state: running;
}
@keyframes ladybug-trip {
  0% {
    /* Gjemmer seg under planten */
    top: 42%;
    left: 62%;
    transform: rotate(150deg);
  }
  4% {
    top: 46%;
    left: 63.5%;
    transform: rotate(120deg);
  }
  6% {
    /* Starter å bevege seg over bladet*/
    top: 47%;
    left: 64%;
    transform: rotate(60deg);
  }
  9% {
    top: 42%;
    left: 66%;
    transform: rotate(80deg);
  }
  11% {
    /* klar til å hoppe til andre bladet */
    top: 43%;
    left: 69%;
    transform: rotate(110deg);
  }
  12% {
    top: 43%;
    left: 69%;
    transform: rotate(70deg);
  }
  13% {
    top: 43%;
    left: 69%;
    transform: rotate(90deg);
  }
  16% {
    /* Toppen av hoppet */
    top: 31%;
    left: 69.5%;
    transform: rotate(70deg);
  }
  18% {
    /* Landet på andre bladet */
    top: 36%;
    left: 71.5%;
    transform: rotate(110deg);
  }
  19% {
    top: 35%;
    left: 74%;
    transform: rotate(100deg);
  }
  20% {
    top: 35%;
    left: 77%;
    transform: rotate(70deg);
  }
  22% {
    top: 32%;
    left: 75.5%;
    transform: rotate(-110deg);
  }
  24% {
    /* På toppen av runden*/
    top: 32%;
    left: 74.5%;
    transform: rotate(-120deg);
  }
  27% {
    top: 35.5%;
    left: 77%;
    transform: rotate(115deg);
  }
  30% {
    /* Klar til å hoppe til tredje bladet */
    top: 39%;
    left: 78%;
    transform: rotate(150deg);
  }
  32% {
    top: 35%;
    left: 79.5%;
    transform: rotate(130deg);
  }
  34% {
    top: 44%;
    left: 79.5%;
    transform: rotate(150deg);
  }
  40% {
    top: 48%;
    left: 76%;
    transform: rotate(290deg);
  }
  44% {
    top: 40%;
    left: 71%;
    transform: rotate(240deg);
  }
  48% {
    top: 53%;
    left: 69%;
    transform: rotate(250deg);
  }
  55% {
    top: 55%;
    left: 64%;
    transform: rotate(280deg);
  }
  58% {
    /* På toppen av hoppet ned til gulvet */
    top: 46%;
    left: 60%;
    transform: rotate(280deg);
  }
  59% {
    top: 48%;
    left: 58%;
    transform: rotate(210deg);
  }
  62% {
    /* Landet på gulvet */
    top: 75%;
    left: 58%;
    transform: rotate(150deg);
  }
  70% {
    top: 80%;
    left: 62%;
    transform: rotate(150deg);
  }
  73% {
    top: 83%;
    left: 60%;
    transform: rotate(220deg);
  }
  76% {
    /* Kommet frem til senga*/
    top: 85%;
    left: 59%;
    transform: rotate(250deg);
  }
  78% {
    transform: rotate(290deg);
  }
  80% {
    transform: rotate(250deg);
  }
  82% {
    transform: rotate(290deg);
  }
  85% {
    /* Gjemmer seg under senga */
    top: 85%;
    left: 57%;
    transform: rotate(270deg);
  }
  100% {
    top: 85%;
    left: 57%;
    transform: rotate(270deg);
  }
}
.ladybug:hover {
  animation-play-state: paused;
  cursor: pointer;
}

.bed-edge {
  /* utklipp av sengen for å skjule marihønen */
  z-index: 13;
  position: absolute;
  width: 9.2%;
  top: 72.4%;
  left: 50.1%;
}
.plant-leaf-edge {
  /* utklipp av plante for å skjule marihønen */
  z-index: 13;
  position: absolute;
  width: 2.6%;
  top: 40.5%;
  left: 61.6%;
}

/* CSS for kofferten */

.suitcase {
  z-index: 10;
  position: absolute;
  width: 12%;
  top: 71%;
  left: 80%;
}

.suitcase + .go-back-text {
  display: none;
}

.suitcase:hover + .go-back-text {
  display: block;
}

.go-back-text:hover {
  display: block;
}

.go-back-text {
  z-index: 11;
  position: absolute;
  align-items: center;
  font-size: 1.4vw;
  font-family: sans-serif;
  top: 82%;
  left: 82%;
  font-style: oblique;
  color: white;
  max-width: 9%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: rgb(255, 227, 207);
  object-fit: contain;
  transform: skewY(1deg);
  text-shadow: rgba(0, 0, 0, 0.693) 3px 2px 3px;
  transition: 0.3s;
}