/* Kode av Katrine Sture Næss */

/* fjerner margin og padding så de ikke flytter på elementer */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* setter main til felx for å sentrere innholdet */
main {
  display: flex;
  justify-content: center;
}

/* container for å plassere bakgrunner og elementer innenfor */
.container {
  display: flex;
  position: relative;
  width: 1456px;
  height: 100%;
  overflow: hidden;
}

/* bakgrunnen til hele nettsiden */
.background-city {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
}

/* bakgrunn nummer to, ligger et element mellom background og forground */
.foreground-city {
  z-index: 3;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* css for audio bar*/
audio {
  z-index: 4;
  position: absolute;
  top: 92%;
  left: 75%;
  height: 5%;
  width: 25%;
  opacity: 30%;
  transform: scale(0.8);
}

/* css for flyet */
.airplane {
  position: absolute;
  z-index: 2;
  top: 25%;
  left: 90%;
  width: 6%;
  animation: background-plane 70s infinite linear;
}

/* animasjon for hvordan flyet beveger seg */
@keyframes background-plane {
  0% {
    transform: translateX(300%) translateY(0) scaleX(1);
  }
  20% {
    transform: translateX(-1700%) translateY(-270%) scaleX(1);
  }
  60% {
    /* flyet snur seg rundt og kommer tilbake samme vei */
    transform: translateX(-1700%) translateY(-270%) scaleX(-1);
  }
  80% {
    transform: translateX(300%) translateY(0) scaleX(-1);
  }
  100% {
    transform: translateX(300%) translateY(0) scaleX(-1);
  }
}

/* css for vesken som også er en link til hovedsiden */
.home-link-handbag {
  position: absolute;
  z-index: 5;
  width: 7%;
  top: 74.5%;
  left: 42%;
}

.home-link-handbag:hover {
  transform: scale(1.1);
}

.home-link-handbag:active {
  transform: scale(1);
}

/* css for drink-scotch element */
.drink-scotch {
  z-index: 5;
  position: absolute;
  width: 3%;
  top: 70%;
  left: 63%;
}

/* hover effekt som linker til animasjonen */
.drink-scotch:hover {
  animation: wiggle-drink 500ms;
  animation-iteration-count: infinite;
  animation-direction: normal;
  cursor: pointer;
}

/* posisjon og css til skjult hover tekst */
.hover-scotch-output {
  position: absolute;
  z-index: 5;
  opacity: 0;
  font-family: sans-serif;
  color: rgb(137, 137, 137);
  font-size: medium;
  top: 78%;
  left: 70%;
  transition-delay: 300ms;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* hover-scotch-output blir synlig når man hovrer over drink-scotch */
.drink-scotch:hover + .hover-scotch-output {
  opacity: 1; 
}

/* animasjon til drink-scotch:hover */
@keyframes wiggle-drink {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* skjermlys som ligger bak alle gif elementer*/
.tv-screen-light {
  z-index: 4;
  position: absolute;
  top: 51.4%;
  left: 54.8%;
  width: 9.4%;
  height: 13%;
  border-radius: 7px;
  background-color: rgb(255, 255, 255);
  /* google er smart, skygge rundt boksen for å lage glow effekt*/
  box-shadow: 0 0 5px rgb(194, 252, 252), 0 0 25px rgb(194, 252, 252),
    0 0 50px rgb(194, 252, 252);
}

/* fire gif elemtene ligger oppå tv-screen-light*/
.static-gif {
  z-index: 8;
  position: absolute;
  top: 52%;
  left: 55%;
  width: 9%;
  height: 12%;
  border-radius: 6px;
}

/* hover for å vise det som spiller bak*/
.static-gif:hover {
  opacity: 0;
  cursor: pointer;
}

/* css for første gif */
.tv-tesla {
  z-index: 7;
  position: absolute;
  top: 52%;
  left: 55%;
  width: 9%;
  height: 12%;
  border-radius: 6px;
  animation: tesla-tv 8s linear infinite;
}

@keyframes tesla-tv {
  /* den første gifen viser fra 0-33% */
  /* bruker opacity for å gjemme gifen når de andre skal vises*/
  0% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.tv-sponge {
  z-index: 6;
  position: absolute;
  top: 52%;
  left: 55%;
  width: 9%;
  height: 12%;
  border-radius: 6px;
  animation: sponge-tv 8s linear infinite;
}

@keyframes sponge-tv {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  /* denne gifen vises fra 34-66% */
  34% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* siste gif, spiller hele tiden bak de andre og trenger derfor ingen animasjon */
.tv-friends {
  z-index: 5;
  position: absolute;
  top: 52%;
  left: 55%;
  width: 9%;
  height: 12%;
  border-radius: 6px;
  animation: friends-tv 8s linear infinite;
}

/* css til vinglasset */
.drink-wine {
  z-index: 5;
  position: absolute;
  width: 2.2%;
  top: 58.6%;
  left: 42%;
  cursor: pointer;
  transition-duration: 500ms;
}

.drink-wine:hover {
  transform: scale(1.1);
}

/* css til skjult tekst */
.hover-output {
  position: absolute;
  z-index: 9;
  opacity: 0;
  font-family: sans-serif;
  color: white;
  font-size: medium;
  top: 51%;
  left: 30%;
  transition-duration: 500ms;
}

/* h1 vises med hover */
.drink-wine:hover + .hover-output {
  opacity: 1;
}

/* css for bordet */
.side-table {
  z-index: 4;
  position: absolute;
  width: 12%;
  top: 74%;
  left: 57%;
}

/* css og animasjon til solen */
.sun-light {
  animation: sun-movement 17s linear infinite;
  position: absolute;
  z-index: 2;
  top: 40%;
  left: 59.3%;
  width: 3%;
  height: 5%;
  border-radius: 50%;
  background-color: rgb(255, 255, 71);
  box-shadow: 0 0 5px rgb(255, 255, 36), 0 0 25px rgb(255, 255, 36),
    0 0 50px rgb(255, 255, 36), 0 0 75px rgb(255, 255, 36),
    0 0 100px rgb(255, 255, 36);
}

/* solen scaler ut og inn med infinite */
@keyframes sun-movement {
  0% {
    transform: scale(0.4);
  }
  50% {
    transform: scale(1);
    /* solen får en dypere farge når den er størst */
    background-color: rgb(251, 200, 49);
  }
  100% {
    transform: scale(0.4);
  }
}

/* felles klasse for å få samme størrelse på flaskene */
.bottles {
  position: absolute;
  width: 2.5%;
}

/* posisjonerer wine-bottle */
#wine-bottle {
  z-index: 4;
  left: 16%;
  top: 77%;
}

#wine-bottle:hover {
  animation: shake-wine-bottle 350ms;
  animation-iteration-count: infinite;
  animation-direction: normal;
  cursor: pointer;
  transform-origin: bottom;
}

 /* animasjon for å tippe flasken fram og tilbake */
@keyframes shake-wine-bottle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* posisjonerer whiskey-bottle*/
#whiskey-bottle {
  z-index: 4;
  left: 17.6%;
  top: 78.2%;
}

/* hover for å starte animasjon */
#whiskey-bottle:hover {
  animation: shake-whiskey-bottle 355ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
  cursor: pointer;
  transform-origin: bottom;
}

/* animasjonn for whiskey-bottle */
@keyframes shake-whiskey-bottle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* denne animasjonen kan ikke ligge i hover, den vil da 
resette seg når man går av hover */
#champagne-bottle {
  animation: drop-champagne-bottle 800ms;
  z-index: 5;
  left: 13%;
  top: 78.2%;
  transition-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-direction: normal;
  transform-origin: bottom;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

#champagne-bottle:hover {
  animation-play-state: running;
  cursor: pointer;
}

/* animasjon for champagne-bottle */
@keyframes drop-champagne-bottle {
  0% {
    transform: rotate(0deg);
  }
  6% {
    transform: rotate(4deg);
  }
  12% {
    transform: rotate(0deg);
  }
  18% {
    transform: rotate(-4deg);
  }
  24% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(6deg);
  }
  36% {
    transform: rotate(0deg);
  }
  42% {
    transform: rotate(-7deg);
  }
  /* flasken faller i bakken transition: transform 0.3s ease;*/
  48% {
    transform: rotate(90deg);
  }
  54% {
    transform: rotate(82deg);
  }
  60% {
    transform: rotate(90deg);
  }
  66% {
    transform: rotate(85deg);
  }
  72% {
    transform: rotate(90deg);
  }
  78% {
    transform: rotate(87deg);
  }
  84% {
    transform: rotate(90deg);
  }
  90% {
    transform: rotate(89deg);
  }
  100% {
    transform: rotate(90deg);
  }
}