:root {
  --blue-100: #eaecf8;
  --blue-200: #c0c6e9;
  --blue-300: #96a1db;
  --blue-400: #6c7bcc;
  --blue-500: #4255bd;
  --blue-600: #334293;
  --blue-700: #242f69;
  --blue-800: #161c3f;
  --blue-900: #070915;
}

body {
  background-color: var(--blue-800);
  color: white;
  font-family: "Montserrat";
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  text-align: center;
  margin: 0;
  min-height: 100vh;
}

.qr-codes-container {
  display: flex;
  width: 800px;
  justify-content: space-around;
  margin: 16px;
}

.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code-image {
  width: 240px;
  height: 240px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.os-image {
  object-fit: scale-down;
  width: 140px;
}

.badge-image {
  object-fit: scale-down;
  width: 200px;
}

.footer {
  background-color: black;
  padding-top: 80px;
  padding-bottom: 80px;
  width: 100%;
  bottom: -120;
  left: 0;
}

@media only screen and (max-width: 800px) {
  .qr-codes-container {
    width: 100%;
    flex-direction: column;
  }
  .os-image {
    display: none;
  }

  .qr-code-image {
    display: none;
  }

  .badge-image {
    object-fit: contain;
    width: 120px;
    margin: 8px;
  }
}