@font-face {
  font-family: 'metropolis-black';
  src: url('fonts/metropolis.black.otf') format('opentype');
  font-display: swap;
}

@font-face {
    font-family: 'metropolis-bold';
    src: url('fonts/metropolis.bold.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'metropolis-semibold';
    src: url('fonts/metropolis.semi-bold.otf') format('opentype');
    font-display: swap;
}


@font-face {
    font-family: 'metropolis-extrabold';
    src: url('fonts/metropolis.extra-bold.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'metropolis-light';
    src: url('fonts/metropolis.light.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'metropolis-medium';
    src: url('fonts/metropolis.medium.otf') format('opentype');
    font-display: swap;
}

.font-light {
    font-family: 'metropolis-light', serif;
}

.font-medium {
    font-family: 'metropolis-medium', serif;
}

body {
  font-family: 'metropolis-black', serif;
  background: linear-gradient(-45deg, #ee7752, #984463, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 60s ease infinite;
  height: 100vh;
}

.header {
  background-color: #f8f9fa;
  padding: 10px;
  text-align: center;
}

.content {
  padding: 20px;
}

.footer {
  background-color: #343a40;
  color: white;
  text-align: center;
}

.transparent-white {
    background: rgba(255, 255, 255, 0.4);
    text-shadow: 0 2px 7px #00000082;
}

h3, h2 {
    margin-top: 1.3rem;
    margin-bottom: 0.5rem;
}