* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

.container {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: rgb(10, 10, 10);
  color: white;
}

.container ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.container ul li {
  list-style: none;
  margin: 0 -20px;
}

.flask {
  position: relative;
  cursor: pointer;
  text-align: center;
  width: 100%;
  height: 100%;
}

.flask h2 {
  flex-wrap: wrap;
  text-transform: capitalize;
  font-size: 25px;
  font-family: 'Russo One', sans-serif;
  letter-spacing: 1px;
  font-weight: lighter;
  cursor: pointer;
}

.bubble1, .bubble2, .bubble3, .bubble4 {
  position: absolute;
  bottom: 200px;
  display: block;
  border-radius: 200px;
  background: gradient(radial, center center, 0, center center, 100, from(rgb(29 65 239 / 20%)), to(rgba(255, 255, 255, 0.7)));
  animation: bubbles 5s infinite;
}

.glow {
  width: 100%;
  height: 100%;
  background: radial-gradient(#00adff, #45c4ff, transparent);
  position: relative;
  display: block;
  border-radius: 200px;
  animation: redPulse 2s infinite;
}

.bubble1 {
  width: 100px;
  height: 100px;
  left: 120px;
  animation-delay: 0.5s;
}

.bubble2 {
  width: 80px;
  height: 80px;
  left: 120px;
  animation-delay: 1s; 
}

.bubble3 {
  width: 40px;
  height: 40px;
  left: 150px;
  animation-delay: 1.5s;
}

.bubble4 {
  width: 20px;
  height: 20px;
  left: 190px;
  animation-delay: 2s;
}

.flask-img {
  transition: 1s;
  filter: brightness(100%);
  filter: contrast(100%);
  filter: grayscale(10%);
  filter: invert(100%);
}

.renameButton {
  position: absolute;
  bottom: 75px;
  width: 275px;
  height: 65px;
  border-radius: 25px;
  background: white;
  color: #000000;
  font-size: 45px;
  text-align: center;
  text-shadow: black 1px 2px 1px;
  outline: none;
  cursor: pointer;
  text-transform: capitalize;
}

.renameButton:active, .repaintButton:active {
  background: black;
  color: white;
}

.repaintButton {
  position: absolute;
  bottom: 0;
  width: 275px;
  height: 65px;
  border-radius: 25px;
  background: white;
  color: #000000;
  font-size: 45px;
  text-align: center;
  text-shadow: black 1px 2px 1px;
  outline: none;
  cursor: pointer;
  text-transform: capitalize;
}

@keyframes bubbles {
  from {
    bottom: 110px;
    transform: scale(.3);
    opacity: 0;
    animation-timing-function: ease-in-out;
  }

  1% {
    bottom: 110px;
    transform: scale(.3);
    opacity: 0;
    animation-timing-function: ease-in-out;
  }

  30% {
    bottom: 110px;
    transform: scale(.8);
    opacity: .5;
    animation-timing-function: ease-in-out;
  }

  95% {
    bottom: 545px;
    transform: scale(.3);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  99% {
    bottom: 550px;
    transform: scale(3);
    opacity: 0;
    animation-timing-function: ease-in-out;
  }

  to {
    bottom: 110px;
    transform: scale(.9);
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
}

@keyframes redPulse {
  from {box-shadow: 0 0 30px #c4c7ca;}
  50% {box-shadow: 0 0 80px rgb(240, 228, 228);}
  to {box-shadow: 0 0 30px #000000;}
}

@media screen and (min-width: 300px) and (max-width: 800px) {
  .container ul {
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }

  .container {
    height: 100%;
    width: 100%;
  }

  body {
    background: rgb(10, 10, 10);
  }

  .repaintButton, .renameButton {
    position: fixed;
  }

  .flask {
    margin-top: 150px;
  }

  .flask h2 {
    font-size: 30px;
  }

  /* .flask-img {
    width: 350px;
  } */

  .bubble1, .bubble2, .bubble3, .bubble4 {
    animation: none;
    visibility: hidden;
  }
}