/* Container holding the image and the text */
.label-container {
  position: relative;
  color: white;
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  text-shadow:
        0.05em 0 10px dimgrey,
        0 0.05em 10px dimgrey,
        -0.05em 0 10px dimgrey,
        0 -0.05em 10px dimgrey,
        -0.05em -0.05em 10px dimgrey,
        -0.05em 0.05em 10px dimgrey,
        0.05em -0.05em 10px dimgrey,
        0.05em 0.05em 10px dimgrey;
}
@media (max-width:40px) {
  .label-container {
    width: 100%;
  }
}

/* Bottom left text */
.details {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 45%;
}
.details p {
  display: inline;
  font-size: xx-large;
}

/* Top left text */
.title {
  position: absolute;
  top: 8px;
  left: 16px;
  width: 50%;
}
.title h1 {
  display: inline;
  font-size: xxx-large;
}
.title h2 {
  display: inline;
  font-size: xx-large;
}
/* Bottom right area */
.badge-container {
  position: absolute;
  bottom: 8px;
  right: 16px;
  width: 70%;
}
.badge-container::after {
  content: "";
  clear: both;
  display: table;
}
.badge {
  width: 15%;
  float: right;
  padding: 5px;
  img {
    width: 100%;
  }
  p {
    font-size: x-large;
    margin-top: auto;
    text-align: center;
  }
}
.big-badge {
  width: 20%;
  margin-top: -10px;
  p {
    font-size: xx-large;
  }
}
.best {
  text-shadow:
        0.05em 0 10px green,
        0 0.05em 10px green,
        -0.05em 0 10px green,
        0 -0.05em 10px green,
        -0.05em -0.05em 10px green,
        -0.05em 0.05em 10px green,
        0.05em -0.05em 10px green,
        0.05em 0.05em 10px green;
}
.worst {
  text-shadow:
        0.05em 0 10px SaddleBrown,
        0 0.05em 10px SaddleBrown,
        -0.05em 0 10px SaddleBrown,
        0 -0.05em 10px SaddleBrown,
        -0.05em -0.05em 10px SaddleBrown,
        -0.05em 0.05em 10px SaddleBrown,
        0.05em -0.05em 10px SaddleBrown,
        0.05em 0.05em 10px SaddleBrown;
}
.best-overall {
  text-shadow:
        0.05em 0 10px gold,
        0 0.05em 10px gold,
        -0.05em 0 10px gold,
        0 -0.05em 10px gold,
        -0.05em -0.05em 10px gold,
        -0.05em 0.05em 10px gold,
        0.05em -0.05em 10px gold,
        0.05em 0.05em 10px gold;
}
.worst-overall {
  text-shadow:
        0.05em 0 10px red,
        0 0.05em 10px red,
        -0.05em 0 10px red,
        0 -0.05em 10px red,
        -0.05em -0.05em 10px red,
        -0.05em 0.05em 10px red,
        0.05em -0.05em 10px red,
        0.05em 0.05em 10px red;
}

/* Top right area */
.notes {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: xxx-large;
  text-align: right;
}

/* Center area */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: white;
}