#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;
  color: red;
  font-family: Impact, fantasy;
  text-transform: uppercase;
}

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

/* Main result body */
#result-container {
  position: relative;
  width: 100%;
  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;
  min-height: 100vh;
  font-family: cursive;
}

/* Cards */
.card-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 450px;
  border: 2px solid rgb(255, 50, 50);
  border-radius: 15px;
  box-shadow: 0px 0px 15px 0px #5a5a5a;
}

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

.card-name {
  padding: 4px;
  padding-top: 8px;
  font-size: 1.4rem;
}

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

/* Stats */
#stats-container {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100%;
}

#stat-names {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding-right: 10px;
}

#stat-names span {
  display: block;
  padding: 5px;
  padding-left: 15px;
}

#stat-bars {
  width: 90%;
  font-size: 0.9rem;
}

.bar-container {
  background-color: rgba(0, 0, 0, 0);
  width: 82%;
  padding: 2px 0px 2px 0px;
  margin-top: 3px;
}

.bar {
  background-color: red;
  border-radius: 10px;
  padding: 2px 0px 2px 0px;
  padding-left: 5px;
}

/* 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;
  }
}