.background {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  background-image: url("../img/color-fish-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* først skjuler jeg de andre runder */
.fish-2,
.paint-buttons-2,
.fish-3,
.paint-buttons-3, 
.fish-4,
.paint-buttons-4,
.third-fish-plain,
.fourth-fish-plain,
.light-purple-used,
.medium-light-purple-used,
.medium-purple-used,
.dark-purple-used,
.yellow-star-1,
.yellow-star-2,
.yellow-star-3,
.yellow-star-4,
.aquarist,
.speech-bobbel {
  display: none;
}

/* når paint buttons bliver trykket på ændres det til denne stil */
.button-pressed {
  filter: brightness(85%);
  transform: scale(0.95);
}



/* ---------------------------------------- */
/* Runde 1 buttons*/
.paint-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.orange-paint {
  position: static;
  width: 9vw;
  height: 9vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 20;
}

.orange-paint {
  background-image: url("../img/orange-paint.png");
}


/* Runde 1 Fisks farver */
.first-fish-plain,
.orange-used {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: 40%;
  height: auto;
  transform: translateX(-50%); 
}

.first-fish-plain {
  z-index: 5;
}

.orange-used {
  z-index: 10;
  display: none;
}
/* ---------------------------------------- */









/* ---------------------------------------- */
/* Runde 2 Buttons */
.paint-buttons-2 {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.light-blue-paint,
.dark-blue-paint {
  position: static;
  width: 9vw;
  height: 9vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 20;
}

.light-blue-paint {
  background-image: url("../img/light-blue-paint.png");
}

.dark-blue-paint {
  background-image: url("../img/dark-blue-paint.png");
}


/* runde 2 Fisks farver */
.second-fish-plain,
.light-blue-used,
.dark-blue-used {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: 22%;
  height: auto;
  transform: translateX(-50%);
  display: none; 
}

.second-fish-plain {
  z-index: 5;
}

.light-blue-used {
  z-index: 10;
  display: none;
}

.dark-blue-used {
  z-index: 12;
  display: none;
}
/* ---------------------------------------- */









/* ---------------------------------------- */
/* runde 3 Buttons */
.paint-buttons-3 {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.pink-paint,
.blue-paint,
.dark-pink-paint {
  position: static;
  width: 9vw;
  height: 9vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 20;
}

.blue-paint {
  background-image: url("../img/blue-paint.png");
}

.dark-pink-paint {
  background-image: url("../img/dark-pink-paint.png");
}

.pink-paint {
  background-image: url("../img/pink-paint.png");
}

/* runde 3 Fisks farver */
.third-fish-plain,
.pink-used,
.blue-used,
.dark-pink-used {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: 40%;
  height: auto;
  transform: translateX(-50%);
  display: none; 
}

.third-fish-plain {
  z-index: 5;
}

.pink-used {
  z-index: 10;
  display: none;
}

.blue-used {
  z-index: 12;
  display: none;
}

.dark-pink-used {
  z-index: 11;
  display: none;
}
/* ---------------------------------------- */







/* ---------------------------------------- */
/* Runde 4 Buttons */
.paint-buttons-4 {
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
}

.light-purple-paint,
.medium-light-purple-paint,
.medium-purple-paint,
.dark-purple-paint {
  position: static;
  width: 9vw;
  height: 9vw;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 20;
}

.light-purple-paint {
  background-image: url("../img/light-purple-paint.png");
}

.medium-light-purple-paint {
  background-image: url("../img/medium-light-purple-paint.png");
}

.medium-purple-paint {
  background-image: url("../img/medium-purple-paint.png");
}

.dark-purple-paint {
  background-image: url("../img/dark-purple-paint.png");
}

/* Runde 4 fisks farver */
.light-purple-used,
.medium-light-purple-used,
.medium-purple-used,
.dark-purple-used {
  position: absolute;
  bottom: 35%;
  left: 50%;
  width: 40%;
  height: auto;
  transform: translateX(-50%);
}

.fourth-fish-plain {
  position: absolute;
  bottom: 35%;
  left: 50%;
  width: 40%;
  height: auto;
  display: none;
  z-index: 5;
  transform: translateX(-50%);
}

.fourth-fish-plain { 
  z-index: 5; 
  display: none; 
}

.light-purple-used { 
  z-index: 10; 
  display: none; }

.medium-light-purple-used { 
  z-index: 11; 
  display: none; }

.medium-purple-used { 
  z-index: 12; 
  display: none; }

.dark-purple-used { 
  z-index: 13; 
  display: none; }
/* ---------------------------------------- */







/* ---------------------------------------- */
/* animation til at de "plain" fisk skal svømme ind fra venstre */
@keyframes moveInFromLeft {
  0% {
    transform: translateX(-150%) translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.move-in {
  animation: moveInFromLeft 1s forwards;
}



/* Animation til at de farvede fisk skal svømme ud*/
@keyframes moveRight {
  0% {
    transform: translateX(-50%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}

.move-right {
  animation: moveRight 1s forwards;
}

/* skjuler elementer */
.hidden {
  display: none !important;
}
/* ---------------------------------------- */



/* ---------------------------------------- */
/* stjernerne */
.stars {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  gap: 25px;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

.plain-star-1,
.plain-star-2,
.plain-star-3,
.plain-star-4 {
  width: 4vw;                 
  height: auto;           
}

.yellow-star-1,
.yellow-star-2,
.yellow-star-3,
.yellow-star-4 {
  width: 4vw;
  height: auto;
}




/* ---------------------------------------- */
/* slutside */
.final-stars {
  position: fixed; 
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1000;
  opacity: 0;
  animation: starsMove 1s forwards ease-out;
}

/* animation til den store stjerne på slutsiden */
@keyframes starsMove {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  
  50% {
    transform: translate(-50%, -50%) scale(8.4);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(8);
    opacity: 1;
  }
}

.aquarist {
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 17vw;
  height: auto;
  transform: translateX(-50%);
  z-index: 15;
  animation: aquaristIn 0.2s forwards ease-out;
}

@keyframes aquaristIn {
  0% {
    transform: translateX(-50%) translateY(-3%); 
    opacity: 0;
  }
  100% {
    transform: translateX(-50%) translateY(-3%); 
    opacity: 1;
  }
 
}

.speech-bobbel {
  position: absolute;
  bottom: 37%;
  right: 5%;
  width: 13vw;
  height: auto;
  transform: translateX(-50%);
  z-index: 16;
  animation: speechMove 1s forwards ease-out;
}


@keyframes speechMove {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
/* ---------------------------------------- */






/* ---------------------------------------- */
/* Arrow når man er færdig */
.arrow {
  position: relative;
  width: 14vw;
  height: 6vw;
  margin-bottom: 40px;
  border: none;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 10;
  display: none;
  background-image: url("../img/arrow.png");
}

/* Tilbage knap, jeg har placeret nede i venstre hjørne */
.back-arrow{ 
  position: absolute;
  bottom: 0%;
  left: 1%;
  width: 10vw;
  height: 10vw;
  border: none;
  background-image: url("../img/back-arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  padding: 8px;
  cursor: pointer;
  z-index: 20;
}
/* ---------------------------------------- */







/* ---------------------------------------- */
/* pynt i baggrunden */
.purple-seaweed-big {
    position: absolute;
    top: 32%;
    left: 1%;
    z-index: 2;
    width: 15vw;
}

.purple-seaweed {
    position: absolute;
    top: 72%;
    left: 1%;
    z-index: 2;
    width: 10vw;
}

.stone-big {
    position: absolute;
    bottom: 7%;
    left: 4%;
    z-index: 5;
    width: 15vw;
}

.stone-small-2 {
    position: absolute;
    bottom: 9%;
    left: 20%;
    z-index: 5;
    width: 8vw;
}

.green-seaweed-3 {
    position: absolute;
    top: 63%;
    left: 9%;
    z-index: 2;
    width: 14vw;
}

.yellow-seaweed-3 {
    position: absolute;
    top: 73%;
    left: 14%;
    z-index: 3;
    width: 10vw;
}

.seagrass {
    position: absolute;
    bottom: 12%;
    left: 22%;
    z-index: 4;
    width: 5vw;
}

.seagrass-small {
    position: absolute;
    bottom: 10%;
    left: 27%;
    z-index: 4;
    width: 4vw;
}

.seagrass-mini {
    position: absolute;
    bottom: 5%;
    right: 26%;
    z-index: 4;
    width: 4vw;
}

.pink-seaweed {
    position: absolute;
    bottom: 5%;
    right: 20%;
    z-index: 3;
    width: 9vw;
}

.seagrass-big {
    position: absolute;
    bottom: 5%;
    right: 16%;
    z-index: 4;
    width: 8vw;
}

.green-seagrass-tall {
    position: absolute;
    bottom: 3%;
    right: 0.5%;
    z-index: 4;
    width: 17vw;
}

.stone-big-round {
    position: absolute;
    bottom: 1%;
    right: 5%;
    z-index: 5;
    width: 11vw;
}

.stone-tiny {
    position: absolute;
    bottom: 4%;
    right: 17%;
    z-index: 5;
    width: 7vw;
}


/* boble gifs */
.bobbel {
  width: 5vw;
  position: absolute;
  left: 10%;
  top: 20%;
}

.bobbel-2 {
  width: 8vw;
  position: absolute;
  right: 10%;
  top: 10%;
}

/* svømmende fisk i baggrunden */
.purple-fish {
    position: absolute;
    top:15%;
    right: 10%;
    z-index: 1;
    width: 6vw;
    animation: purple-fish 20s linear infinite;
}

@keyframes purple-fish {
 0% {
    transform: translate(0, 0) scaleX(-1);
  }
  25% {
    transform: translate(-400px, 30px) scaleX(-1);
  }
  50% {
    transform: translate(-900px, 0) scaleX(-1); 
  }
  51% {
    transform: translate(-900px, 0) scaleX(1); 
  }
  75% {
    transform: translate(-400px, -30px) scaleX(1);
  }
  100% {
    transform: translate(0, 0) scaleX(1); 
  }
}

/* svømmende fisk i baggrunden */
.nemo {
    position: absolute;
    top:25%;
    left: 20%;
    z-index: 1;
    width: 4vw;
    animation: nemo 15s linear infinite;
}

@keyframes nemo {
  0% {
    transform: translate(0, 0) scaleX(-1) rotate(0deg);
  }
  25% {
    transform: translate(-100px, 20px) scaleX(-1) rotate(5deg);
  }
  50% {
    transform: translate(-200px, 0) scaleX(-1) rotate(360deg);
  }
  51% {
    transform: translate(-200px, 0) scaleX(1) rotate(0deg);
  }
  75% {
    transform: translate(-100px, -20px) scaleX(1) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) scaleX(1) rotate(0deg);
  }
}

/* svømmende fisk i baggrunden */

.brown-fish {
    position: absolute;
    top:50%;
    right: 1%;
    z-index: 1;
    width: 5vw;
    animation: brown-fish 40s linear infinite;
}

@keyframes brown-fish {
 0% {
    transform: translate(0, 0) scaleX(1);
  }
  15% {
    transform: translate(-500px, 30px) scaleX(1);
  }
  50% {
    transform: translate(-1400px, 0) scaleX(1); 
  }
  51% {
    transform: translate(-1400px, 0) scaleX(-1); 
  }
  75% {
    transform: translate(-500px, -30px) scaleX(-1);
  }
  100% {
    transform: translate(0, 0) scaleX(-1); 
  }
}

/* svømmende fisk i baggrunden */
.dory {
    position: absolute;
    top:70%;
    left: 15%;
    z-index: 1;
    width: 7vw;
    animation: dory 15s linear infinite;
}

@keyframes dory {
  0% {
    transform: translate(0, 0) scaleX(1) 
  }
  25% {
    transform: translate(100px, 20px) scaleX(1) 
  }
  50% {
    transform: translate(200px, 0) scaleX(1) 
  }
  51% {
    transform: translate(200px, 0) scaleX(-1) 
  }
  75% {
    transform: translate(100px, -20px) scaleX(-1) 
  }
  100% {
    transform: translate(0, 0) scaleX(-1) 
  }
}
/* ---------------------------------------- */