@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
@import url('https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css');

:root {
  --background-color: rgb(252, 250, 248);
  --background-color-alpha: rgba(252, 250, 248, 0.9);
  --overlay-color: rgba(255, 255, 255, 0.85);
  --accent-color: rgba(238, 1, 72, 1.0);
  --accent-color-alpha: rgba(238, 1, 72, 0.8);
  --title-font-family: 'Roboto Slab', serif;

  /* dark mode */
  @media screen and (prefers-color-scheme: dark) {
    --background-color: rgb(20, 20, 20);
    --background-color-alpha: rgba(20, 20, 20, 1.0);
    --overlay-color: rgba(20, 20, 20, 0.9);
    --accent-color: rgba(238, 1, 72, 1.0);
    --accent-color-alpha: rgba(238, 1, 72, 0.8);
    
  }
}

html {
  background-color: var(--background-color);
}

body {
  color: var(--bulma-text);
  text-align: center;
}

.title {
  font-family: var(--title-font-family);
  font-weight: 700;
}

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.5px;
}

header {
  padding-bottom: 4rem;
}

section {
  padding: 6rem 0rem;
}

section:first-of-type {
  padding-top: 4rem;
}

section > * { 
  max-width: 60rem;
  padding: 0 2rem;
  margin: 0 auto;
}

section.light {
  background-color: transparent;
  * {
    color: var(--bulma-text);
  }
}

section.white {
  background-color: white;
  * {
    color: var(--bulma-text);
  }
}

section.dark {
  background-color: black;
  * {
    color: white !important;
  }
}

@media (max-width: 980px) {
  header {
    padding-bottom: 0rem;
  }
  section:not(:first-of-type) {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}