/* Kodet av Ruben Vareide */

/* Nullstille noen standard nettleserstiler */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* flex, for å sentrere alt */
main {
  display: flex;
  justify-content: center;
}

/* container, med gitt størrelse for å ha alt innhold inne i */
.container {
  display: flex;
  position: relative;
  width: 1456px;
  height: 100%;
  overflow: hidden;
  /* Målet var å få teksten til å scale riktig i forhold til containeren, vg.no brukte font-size: cqw. og jeg researchet dette. For at font-size container query width skal fungere må jeg definere hva som er container */
  /* cwq og container-type er såpass nytt at dette valideres ikke i css validator, jeg vet det, men eneste løsningen som fungerer som jeg vil :) */
  container-type: inline-size;
}

/* bakgrunnsbilde, over container og spres seg width og height til å fylle container */
#background-back {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
#background-front {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
}
.text {
  font-family: sans-serif;
}

/* Tekst i bakgrunnen */
.text h1 {
  z-index: 2;
  color: rgb(215, 137, 116);
  /* font-size for å scale seg etter container */
  font-size: 10cqw;
  top: 5%;
  left: 30%;
  text-shadow: 1px 1px 1px rgb(1, 1, 1);
  position: absolute;
}
.text p {
  z-index: 2;
  color: rgb(215, 137, 116);
  /* font-size for å scale seg etter container */
  font-size: 2cqw;
  width: 25%;
  top: 25%;
  left: 29%;
  position: absolute;
}

/* Skjule bakgrunnsteksten som standard */
.txt-display {
  display: none;
}

/* Bok på sengen */

#book-beach {
  position: absolute;
  top: 74.5%;
  left: 56%;
  width: 12%;
  z-index: 5;
}

/* For å se bakgrunnsteksten ved hover på boken */
#book-beach:hover + .txt-display {
  display: block;
}

/* Håndkle */

#towel {
  position: absolute;
  top: 16.7%;
  left: 24%;
  height: 100%;
  transform: scale(0.25);
  z-index: 3;
  filter: brightness(0.95);
}

#towel:hover {
  filter: hue-rotate(180deg) brightness(0.95);
}

/* palmetre */
#palmtree {
  position: absolute;
  height: 100%;
  top: -14%;
  left: 59%;
  z-index: 2;
  /* flytter anchor punkt til helt nede i midten */
  transform-origin: 50% 100%;
}

/* palmetree animasjon settings */
#palmtree {
  animation-name: palmtreeSway;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

/* palmetree animasjon */
@keyframes palmtreeSway {
  from {
    transform: scale(0.7) rotate(-2deg);
  }
  to {
    transform: scale(0.7) rotate(-5deg);
  }
}

/* persienne */
#blinds {
  position: absolute;
  top: -83%;
  left: 26.7%;
  height: 85%;
  z-index: 4;
  filter: brightness(1.1);
}

/* persienne transition */
#blinds {
  transition: transform 6s;
}

/* tablet blinds controller */
#tablet {
  position: absolute;
  height: 20%;
  width: 6%;
  top: 20%;
  left: 91.5%;
  filter: brightness(0.9);
  z-index: 3;
}
/* checkbox for å ta ned persiennene */
#checkbox-1 {
  position: absolute;
  height: 2.5%;
  width: 2.5%;
  top: 26.5%;
  left: 94.4%;
  z-index: 4;
  accent-color: rgb(18, 40, 43);
}

#checkbox-2 {
  position: absolute;
  height: 2.5%;
  width: 2.5%;
  top: 30.5%;
  left: 94.4%;
  z-index: 4;
  accent-color: rgb(18, 40, 43);
}

#checkbox-3 {
  position: absolute;
  height: 2.5%;
  width: 2.5%;
  top: 34.5%;
  left: 94.4%;
  z-index: 4;
  accent-color: rgb(18, 40, 43);
}

#checkbox-1:hover,
#checkbox-2:hover,
#checkbox-3:hover {
  transform: scale(1.1);
}

#checkbox-1:checked ~ #blinds {
  transform: translateY(22%);
}
#checkbox-2:checked ~ #blinds {
  transform: translateY(50%);
}
#checkbox-3:checked ~ #blinds {
  transform: translateY(95%);
}

/* Boombox bilde og Audio */
#boombox {
  position: absolute;
  height: 18%;
  top: 81%;
  left: 82%;
  filter: brightness(0.8);
  z-index: 4;
}

audio {
  position: absolute;
  top: 95.2%;
  left: 76.6%;
  height: 4%;
  width: 22%;
  z-index: 5;
  display: none;
  opacity: 40%;
}

/* audio kontroller vises når hover over boombox */

audio:hover {
  display: block;
}

#boombox:hover + audio {
  display: block;
}

/* boombox høytalere som eget bilde over for å kunne animere de til å scale */

#speaker-1 {
  position: absolute;
  top: 86.8%;
  left: 82.2%;
  height: 7.5%;
  z-index: 5;
}

#speaker-2 {
  position: absolute;
  top: 87.5%;
  left: 88.5%;
  height: 7.5%;
  z-index: 5;
}

#speaker-1:hover ~ audio {
  display: block;
}

#speaker-2:hover ~ audio {
  display: block;
}

#speaker-1 {
  animation: speakerScale 0.4s infinite alternate;
}

#speaker-2 {
  animation: speakerScale 0.4s infinite alternate;
}

@keyframes speakerScale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
/* Boombox screen */
#boom-screen {
  position: absolute;
  height: 18%;
  top: 81%;
  left: 82%;
  z-index: 5;
}

#boom-screen:hover ~ audio {
  display: block;
}

/* boombox screen animasjon */

#boom-screen {
  animation-name: screenColor;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes screenColor {
  from {
    filter: hue-rotate(0deg) saturate(1);
  }
  to {
    filter: hue-rotate(120deg) saturate(8);
  }
}

/* Båt */

#boat {
  position: absolute;
  height: 20%;
  top: 39%;
  left: 25%;
  z-index: 2;
}

/* båt animasjon */
#boat {
  animation: sailing 80s ease-in-out infinite forwards;
}

@keyframes sailing {
  0% {
    transform: translateX(0%) scaleX(1) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(600%) scaleX(1) scale(0.8) rotate(-3deg);
  }
  51% {
    transform: translateX(600%) scaleX(-1) scale(0.8) rotate(-3deg);
  }
  100% {
    transform: translateX(0%) scaleX(-1) scale(1) rotate(0deg);
  }
}

/* bilde av kofferten */

#luggage-home {
  height: 20%;
  top: 79%;
  left: 3%;
  position: absolute;
  z-index: 5;
}

/* tekst over kofferten, gjemmes som standard */

#txt-home {
  top: 85%;
  left: 7%;
  font-size: 2vw;
  /* For å wrappe teksten til 2 linjer */
  max-width: 9%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 227, 207);
  font-family: sans-serif;
  position: absolute;
  z-index: 5;
  object-fit: contain;
  transform: skewY(-10deg);
  text-shadow: rgba(0, 0, 0, 0.693) -3px -2px 3px;
  opacity: 0;
  transition: 0.3s;
}

/* For å kunne se teksten når hover over koffert og teksten */

#txt-home:hover {
  opacity: 1;
  transform: skewY(-10deg) scale(1.1);
}

#luggage-home:hover + #txt-home {
  opacity: 1;
}

/* ramme rundt ølglasset for å få overflow hidden når glasset tømmes */
#beer-container {
  overflow: hidden;
  position: absolute;
  height: 18%;
  width: 6%;
  top: 55%;
  left: 8%;
  z-index: 6;
}

#beer-glass {
  position: absolute;
  overflow: visible;
  cursor: s-resize;
  height: 99.5%;
  top: 19%;
  left: 10%;
  z-index: 5;
}
/* siden overflow er hidden på beer-container må denne ligge utenfor container for å kunne se bunnen av glasset og skyggen */
#beer-glass-2 {
  position: absolute;
  overflow: visible;
  height: 18%;
  top: 58.4%;
  left: 8.57%;
  z-index: 5;
}

#beer-content {
  position: absolute;
  height: 100%;
  top: 19%;
  left: 10%;
  z-index: 4;
  transition: transform 4s;
}

#beer-glass:hover + #beer-content {
  transform: translateY(65%);
}

/* knapp, med png bilde som bakgrunn, solbrillen */
#button-sunglass {
  cursor: grab;
  position: absolute;
  height: 8%;
  width: 16%;
  top: 71%;
  left: 11%;
  z-index: 4;
  border: none;
  overflow: hidden;
  background-image: url(/images/sunglasses.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* dette fyller hele bildet(container) med farge (helt gjennomsiktig her) */
#night {
  position: absolute;
  top: 0;
  object-fit: none;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  z-index: 10;
  display: none;
}

/* Endrer gjennomsiktig til farge, når solbrillen klikkes active */
#button-sunglass:active + #night {
  display: block;
  background-color: rgba(2, 8, 0, 0.65);
}

/* Animasjon av solbrillen, pauset */
#button-sunglass {
  animation-name: sunglassScale;
  animation-duration: 0.7s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
}

/* aktiverer animasjonen med hover */
#button-sunglass:hover {
  animation-play-state: running;
}

/* animasjonen er active når den klikkes også */
#button-sunglass:active {
  animation-play-state: running;
}

/* animasjonen */
@keyframes sunglassScale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}