body {
  padding: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  width: 50%;
  background-color: #121212;
  cursor: crosshair;
  overflow-x: hidden;
  background-blend-mode: screen;
  background: url("https://1-background.com/images/stars-1/star-space-tile.jpg"), url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F78%2Ffe%2Fc7%2F78fec78382def35577de453cc0eedce6.jpg&f=1&nofb=1&ipt=c6b47b6f8c9551d782c887f01bb162582c55bc5acd16332bc6c26c1defb51247");
}

main {
  background-color: #c7c7c7;
  padding: 0.5em 1em;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #00C853, #B2FF59);
  font-family: "Georgia";
}

a:link {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

a:hover {
  opacity: 75%;
}

.prompt {
  animation: blinker 1s linear infinite;
  font-family: sans-serif;
  margin-right: 0.5em;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.title-card {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.chip {
  padding: 0.5em;
  background-color: #ff8000;
  color: #FFF;
  border-radius: 12%;
  margin-right: 1em;
  opacity: 100%;
}

.chip:hover {
  opacity: 90%;
}

.floating {
  transform: translateY(0px);
  animation: float 1.2s ease-in-out infinite;
}

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

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

main h1,
#more {
  font-family: monospace;
}

#more {
  background-color: #c7c7c7;
  margin-top: 1em;
  padding: 0.5em 1em;
  border: 10px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

#links {
  display: flex;
  flex-direction: row;
}

#links a {
  margin-right: 2em;
}

@media only screen and (max-width: 820px) {
  body {
    width: 85%;
    padding: 2em 0;

  }
}
