:root {
  --background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 8, 90, 0.863) 70%, rgba(9, 36, 124, 0.868) 90%, rgb(0, 67, 238) 100%), url("./img/background.gif")
}

@font-face {
  font-family: 'undertale';
  src: url('./undertale-font/undertaledeltarunetextfontextended.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

#container,
body {
  cursor: url("./cursor.png"), auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  image-rendering: pixelated;
}

#container {
  border: 8px ridge #2196f3;
  padding: 23px;
  background-image: var(--background);
  animation: 20s glow ease-in-out infinite
}

#banana {
  height: 500px;
  width: 500px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#banana img {
  height: 500px;
  object-fit: contain;
}

#potassium img {
  width: 500px
}

#ohno {
  padding: 15px;
  width: 88%;
  border: 5px ridge;
  background-color: black;
  color: white;
  text-align: center;
  font-family: "undertale";
  display: flex;
  flex-direction: column;
}

.bobbing {
  animation: bobbing 2s ease-in-out infinite;
  animation-direction: alternate
}

@keyframes glow {
  0% {
    box-shadow: 0 0 14px 0 #ffffff7a
  }

  50% {
    box-shadow: 0 0 100px 0 #ffc800
  }

  100% {
    box-shadow: 0 0 14px 0 #ffffff7a
  }
}

@keyframes float {
  0% {
    transform: translateY(20px)
  }

  100% {
    transform: translateY(-20px)
  }
}