#alert {
  position: absolute;
  top: 30px;
  border-radius: 10px;
  z-index: 99;
  width: max-content;
  text-align: center;
  padding: 5px;
  float: right;
  right: 250px;
  transition-duration: 800ms;
}

.success {
  color: black;
  background-color: red;
}

.failure {
  color: black;
  background-color: yellow;
}

body,
html {
  margin: 0;
}

body {
  position: relative;
  height: 100%;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  margin: auto;
  display: inline-flex;
  justify-content: space-between;
  box-shadow: 0px 0px 15px 0px red;
  z-index: 99;
}

#header-color {
  background-image: linear-gradient(
    to right,
    #e4afcb 0%,
    #b8cbb8 0%,
    #b8cbb8 0%,
    #e2c58b 30%,
    #c2ce9c 64%,
    #7edbdc 100%
  );
}

header * {
  font-size: 1.6rem;
  text-decoration: none;
}

.favourite-router * {
  border-radius: 10px;
}

.favourite-router *:hover {
  color: red;
}

.app-name {
  padding-left: 20px;
}

.app-name a {
  text-decoration: none;
  font-family: Impact, fantasy;
  text-transform: uppercase;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

header input {
  height: 35px;
  width: 100%;
  padding: 15px;
  border: 3px solid red;
  border-radius: 25px;
  font: italic small-caps bold 1.2rem Georgia, serif;
}

header input:focus {
  border: 3px solid red;
}

header button {
  margin-right: 20px;
  border: none;
  background: none;
}

header button a {
  font-family: Impact, fantasy;
  text-decoration: none;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main result body */
#result-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  top: 80px;
  background: #f3904f;
  background: -webkit-linear-gradient(to right, #3b4371, #f3904f);
  background: linear-gradient(to right, #3b4371, #f3904f);
}

#results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-top: 30px;
  font-family: cursive;
  font-size: x-large;
}

/* Cards */
.card-container {
  display: flex;
  flex-direction: column;
  width: 220px;
  height: 280px;
  border: 2px solid rgb(255, 0, 0);
  border-radius: 15px;
  box-shadow: 0px 0px 15px 0px #646464;
  margin-bottom: 30px;
}

.card-img-container img {
  height: 180px;
  width: 180px;
  border-radius: 15px;
}

.card-name {
  padding: 5px;
}

.card-name:hover {
  color: red;
  cursor: pointer;
}

/* Style the rainbow text element. */
.rainbow-text {
  /* Create a conic gradient. */
  /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
  background: #ca4246;
  background-color: #ca4246;
  background: conic-gradient(
    #ca4246 16.666%,
    #e16541 16.666%,
    #e16541 33.333%,
    #f18f43 33.333%,
    #f18f43 50%,
    #8b9862 50%,
    #8b9862 66.666%,
    #476098 66.666%,
    #476098 83.333%,
    #a7489b 83.333%
  );

  /* Set thee background size and repeat properties. */
  background-size: 57%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-animation-rev 0.5s ease forwards;

  cursor: pointer;
}

/* Add animation on hover. */
.rainbow-text:hover {
  animation: rainbow-text-animation 0.5s ease forwards;
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
  0% {
    background-size: 57%;
    background-position: 0 0;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 300%;
    background-position: -9em 1em;
  }
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}

.change-font {
  font-family: cursive;
}