.background{
position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../img/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;

}

/* Button farvelæg spil */
.button-container {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translateX(-50%);
  width: 22vw;
  height: 22vw;
  z-index: 20;
}

.color-fish {
    position: absolute;
    bottom: 0%;  
    left: 50%;
    transform: translateX(-50%);
    width: 25vw;   
    height: 25vw;
    background-image: url("../img/color-fish.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10;
}

.button-text {
  position: absolute;
  left: 50%;
  bottom: 17%; 
  transform: translateX(-50%);
  color: white;
  font-size: 35px;
  font-family: poppins;
  font-weight: bold;
  text-shadow: 0 2px 4px black;
  pointer-events: none; 
  z-index: 20;
}


.overskrift {
    position: absolute;
    color: white;
    text-align: center;
    font-family: "luckiest guy" ;
    letter-spacing: 2px;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-size: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px 40px;
    border-radius: 15px; 
}


.english {
    position: absolute;
    bottom: 0%;
    left: 1%;
    z-index: 5;
    width: 3vw;
    height: 3vw;
    background-image: url("../img/english.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.german {
    position: absolute;
    bottom: 0%;
    left: 5%;
    z-index: 5;
    width: 3vw;
    height: 3vw;
    background-image: url("../img/german.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.danish {
    position: absolute;
    bottom: 0%;
    left: 9%;
    z-index: 5;
    width: 3vw;
    height: 3vw;
    background-image: url("../img/danish.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
}


.green-seaweed {
    position: absolute;
    top:10%;
    left: 1%;
    z-index: 4;
    width: 11vw;
}

.green-seaweed-small {
    position: absolute;
    top:35%;
    left: 10%;
    z-index: 4;
    width: 7vw;
    
}

.green-seaweed-big {
    position: absolute;
    top:10%;
    right: 14%;
    z-index: 4;
    width: 10.5vw;
    
}

.green-seaweed-big-2 {
    position: absolute;
    top:12%;
    right: 1%;
    z-index: 4;
    width: 10vw;
    
}

.purple-seaweed {
    position: absolute;
    top:50%;
    left: 30%;
    z-index: 3;
    width: 6vw;
}

.yellow-seaweed {
    position: absolute;
    z-index: 4;
    top:33%;
    left: 24%;
    z-index: 2;
    width: 8vw;
}

.purple-seaweed-big {
    position: absolute;
    z-index: 4;
    top:17%;
    left: 13%;
    z-index: 2;
    width: 12vw;
}

.yellow-seaweed-big {
    position: absolute;
    top:30%;
    right: 7%;
    z-index: 3;
    width: 11.5vw;
}

.stone-big {
    position: absolute;
    top:55%;
    left: 4%;
    z-index: 5;
    width: 12vw;
}

.stone-big-2 {
    position: absolute;
    top:59%;
    right: 17%;
    z-index: 5;
    width: 7vw;
}

.stone-small {
    position: absolute;
    top:57%;
    left: 27%;
    z-index: 5;
    width: 6vw;
}

.stone-small-2 {
    position: absolute;
    top:57%;
    right: 23%;
    z-index: 5;
    width: 5vw;
}


.pink-shell {
    position: absolute;
    top:55%;
    right: 32%;
    z-index: 5;
    width: 3vw;
}

.blue-ring {
    position: absolute;
    top:80%;
    right: 25%;
    z-index: 5;
    width: 2.5vw;
}

.blue-shell-small {
    position: absolute;
    top:70%;
    right: 10%;
    z-index: 5;
    width: 2vw;
}

.pink-shell-cone {
    position: absolute;
    top: 90%;
    right: 13%;
    z-index: 5;
    width: 2vw;
}

.pink-ring {
    position: absolute;
    top:75%;
    left: 5%;
    z-index: 5;
    width: 2vw;
}

.blue-shell-big {
    position: absolute;
    top:65%;
    left: 15%;
    z-index: 5;
    width: 3vw;
}

.blue-shell-round {
    position: absolute;
    top:80%;
    right: 2%;
    z-index: 5;
    width: 3vw;
}



.pink-shell-small {
    position: absolute;
    top:75%;
    left: 28%;
    z-index: 5;
    width: 2vw;
}

.aquarist {
    position: absolute;
    top: 31%;
    left: 43%;
    z-index: 6;
    width: 13vw;
}

.bobbel {
    position: absolute;
    top: 45%;
    right: 32%;
    z-index: 5;
    width: 4vw;
}

.bobbel-2 {
    position: absolute;
    top: 43%;
    right: 20%;
    z-index: 10;
    width: 4vw;
}

.nemo {
    position: absolute;
    top:25%;
    left: 20%;
    z-index: 6;
    width: 4vw;
    animation: nemo 10s 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);
  }
}

.crab {
    position: absolute;
    top:55%;
    right: 18%;
    z-index: 10;
    width: 4vw;
    animation: crab 5s linear infinite;
}
@keyframes crab {
     0% {
    transform: translateX(0) scaleX(1);
  }
  50% {
    transform: translateX(-10px) scaleX(1);
  }
  100% {
    transform: translateX(0) scaleX(1);
  }

}

.purple-fish {
    position: absolute;
    top:15%;
    right: 10%;
    z-index: 6;
    width: 5vw;
    animation: purple-fish 10s 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); 
  }
}

.pink-blue-fish {
    position: absolute;
    top:35%;
    right: 20%;
    z-index: 3;
    width: 4vw;
    animation: pink-blue-fish 18s linear infinite;
}

@keyframes pink-blue-fish {
  0% {
    transform: translate(0, 0) scaleX(-1);
  }
  20% {
    transform: translate(-200px, -40px) scaleX(-1);
  }
  40% {
    transform: translate(-400px, 20px) scaleX(-1);
  }
  50% {
    transform: translate(-600px, 0) scaleX(-1);
  }
  51% {
    transform: translate(-600px, 0) scaleX(1);
  }
  60% {
    transform: translate(-400px, 40px) scaleX(1);
  }
  80% {
    transform: translate(-200px, -20px) scaleX(1);
  }
  100% {
    transform: translate(0, 0) scaleX(1);
  }
}

.yellow-fish {
    position: absolute;
    top:45%;
    left: 25%;
    z-index: 6;
    width: 4vw;
    animation: yellow-fish 10s linear infinite;
}

@keyframes yellow-fish {
  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) 
  }
}

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

@keyframes brown-fish {
  0% {
    transform: translate(0, 0) scaleX(-1);
  }
  20% {
    transform: translate(100px, -40px) scaleX(-1);
  }
  40% {
    transform: translate(200px, 20px) scaleX(-1);
  }
  50% {
    transform: translate(300px, 0) scaleX(-1);
  }
  51% {
    transform: translate(300px, 0) scaleX(1);
  }
  60% {
    transform: translate(200px, 40px) scaleX(1);
  }
  80% {
    transform: translate(100px, -20px) scaleX(1);
  }
  100% {
    transform: translate(0, 0) scaleX(1);
  }
}