:root {
  --color-bg: #69F7BE;
  --color-text-m goain: #000000;
  --color-primary: #FFFF00;
  --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 0rem;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}


/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

a {
  color: #FE5100;
  font-size:20px;
  margin:5px;
  text-decoration:none;
  font-weight: bold;
}

a:hover {
  text-decoration:underline;
}

body {
  font-family: HK Grotesk;
  background-color: #FFD000;
}

/* Page structure */
.wrapper {
  min-height: var(--wrapper-height);
  display: grid;
  place-items: center;
  margin: 0 
  0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.illustration {
  max-width: 100%;
  max-height: var(--image-max-width);
  margin-top: var(--image-margin);
}

.illustration:active {
  transform: translateY(5px);
}

#iframecontainer {
  display: flex;
  align-items: center;
  justify-content: center;\
}

iframe {
  border: 5px solid black;
  box-shadow: 8px 10px #575357;
}