:root {
  --green-ish: #e0e28c;
  --pink: #ff5099;
  --purple: #cdaedf;
  --yellow-ish: #facb4f;
  --faq-width: 80%;
  --substack-background: var(--green-ish);
}

@font-face {
  font-family: Gliker;
  src: url(fonts/Gliker-Regular.ttf);
}

@font-face {
  font-family: Gliker-Black;
  src: url(fonts/Gliker-Black.ttf);
}

@font-face {
  font-family: Inter;
  src: url(fonts/Inter.tff);
}

body {
    font-family: Gliker;
    font-size: large;
}

a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

#container {
    max-width: 1000px;
    margin: auto;
}

article, section h2 {
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
}

section.logo {
    text-align: center;
    padding-bottom: 0px;
}

section.logo img {
    width: 50%;
}

section h2 {
    font-size: xx-large;
    font-weight: bold;
    width: 350px;
}

section.events h2 {
    background-color: var(--yellow-ish);
}

article.event {
    background-color: var(--yellow-ish);
    width: 80%;
}

.event-info {
    font-family: Gliker-Black;
}

article.call-to-action {
    background-color: var(--green-ish);
    width: 90%;
    font-size: x-large;
}

section.faqs {
    background-color: var(--purple);
    padding: 10px;
}

section.faqs h2 {
    background-color: var(--green-ish);
}

article.faq {
    background-color: var(--green-ish);
    width: var(--faq-width);
    font-size: xx-large;
}

article.faq-answer {
    background-color: white;
    font-family: Inter;
    text-align: left;
    width: var(--faq-width);
}

section.image {
    background-color: var(--pink);
    text-align: center;
    padding: 20px;
}

section.image img {
    border-radius: 40px;
}

section.image img.horizontal {
    width: 90%;
}

section.image img.vertical {
    width: 60%;
}

section.contact {
    padding-top: 20px;
}

article.contact {
    background-color: var(--pink);
    color: white;
    text-shadow: 1px 1px 5px black;
    width: 80%;
}

article.contact a {
    color: white;
}

iframe.instagram-media, section.instagram-media blockquote, section.substack {
    margin: auto !important;
    margin-bottom: 20px !important;
}

section.substack {
    background-color: var(--substack-background);
    max-width: 60%;
    border-radius: 20px;
}

section.substack h2 {
    width: 100%;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.substack-feed-widget {
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
}

section.press {
    background-color: var(--green-ish);
    margin-bottom: 0px;
    padding: 10px;
}

section.press h2 {
    background-color: var(--purple);
}

section.press article {
    background-color: var(--purple);
    width: 60%;
}