/* VARIABLES */

:root {
  /* BORDERS */
  --underline: underline;
  --border-radius: 5px;

  /* SPACING */
  --default-spacing: 2rem;
  --nested-spacing: 0.5rem;
  --zero: 0;
  --gap-spacing: var(--default-spacing);
  --ul-drop: var(--default-spacing);
  --btn-padding: var(--nested-spacing);
  --sm-spacing: var(--nested-spacing);

  /*  WIDTHS */
  --xl-paragraph: 100ch;
  --l-paragraph: 75ch;
  --mid-paragraph: 45ch;
  --sm-paragraph: 25ch;
  --sm-icon-width: var(--default-spacing);
  --mid-icon-width: 5rem;
}

body {
  font-family: sans-serif;
  font-weight: 500;
  margin: 0;
}

/* TRANSITIONS */

body.loaded,
body.loaded a,
body.loaded a.btn,
body.loaded button,
#toggleTheme ul,
#toggleTheme ul li {
  transition:
    color 0.2s,
    background-color 0.2s;
}

.socials img.icon {
  transform: scale(1);
  transition: transform 0.2s;
}

.socials img.icon:hover,
.socials img.icon:focus {
  transform: scale(1.2);
}

.socials img.icon:hover:active,
.socials img.icon:focus:active {
  transform: scale(1.1);
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Work Sans", "sans-serif";
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

p,
li,
table,
pre,
button {
  font-size: 1.5rem;
  line-height: 1.5;
}

.btn {
  border-radius: var(--border-radius);
}

#title {
  font-size: 5rem;
  max-width: 23ch;
  margin-top: 0;
}

.byline {
  font-size: 1.2rem;
  opacity: 0.5;
}

.post-item-title {
  margin: var(--zero);
  font-weight: 500;
  line-height: 1.4;
}
li h2 {
  font-size: 2.5rem;
}

h2 + small {
  opacity: 50%;
}

.mid-paragraph {
  max-width: var(--mid-paragraph);
}

.center-text {
  text-align: center;
}

.xl-paragraph {
  max-width: var(--xl-paragraph);
}

/* GENERAL */

pre {
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

iframe {
  border: none;
}

.center {
  justify-content: center;
}

.auto {
  margin-inline: auto;
}

.post ul li {
  padding: var(--nested-spacing);
}

th,
td {
  padding: var(--nested-spacing);
}

ul.flex-container,
ul.grid-container {
  padding: var(--zero);
  list-style-type: none;
}

main:not(#team):not(#donate) {
  max-width: var(--xl-paragraph);
}

main#donate {
  margin: auto;
}

.pull {
  margin-right: auto;
}

img {
  max-width: 100%;
}

/* COMPONENTS */
nav span {
  display: flex;
  margin-right: auto;
  align-content: center;
}

nav,
#home-main {
  margin-inline: var(--default-spacing);
  padding-bottom: var(--default-spacing);
}

.nav-list {
  align-items: center;
}

#toggleTheme {
  position: absolute;
  top: var(--nested-spacing);
  right: var(--default-spacing);
}

#toggleTheme ul {
  position: absolute;
  top: calc(var(--nested-spacing) + 1.2em);
  right: 0;

  display: none;
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px black;
  text-align: right;
  list-style-type: none;
  padding-left: 0;
}

#toggleTheme:hover ul,
#toggleTheme ul:hover {
  display: block;
}

#toggleTheme ul li {
  padding: 0.25em 0.5em;
  border-radius: var(--border-radius);
  cursor: pointer;
}

.footer-sponsors-list .nav-list {
  text-align: center;
}

.sec-container {
  max-width: 1300px;
  padding-bottom: var(--default-spacing);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mid-paragraph), 1fr));
  gap: var(--gap-spacing);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-spacing);
}

.sponsor-icon {
  max-width: var(--mid-icon-width);
  min-width: var(--mid-icon-width);
}

.icon {
  max-width: var(--sm-icon-width);
  padding-left: var(--nested-spacing);
}

.home-bg {
  background-image: url("../img/svg-wave-bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: 70%;
  padding-top: 1em;
}

[data-theme="light"] .home-bg footer {
  border-top-color: #0002;
}

#logo {
  width: 30vw;
}

.pagination {
  justify-content: end;
}

#advisory-members-list {
  list-style: initial;
}

footer {
  padding-top: var(--nested-spacing);
  padding-bottom: var(--default-spacing);
  width: 100vw;
  margin-left: -1em;
}

.sponsor {
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.sponsor .logo {
  height: 5rem;
}

.sponsor .name {
  margin: 0 0 0 1rem;
  font-size: 2rem;
}

.sponsors-link {
  color: var(--foreground);
  text-decoration: none;
}
.sponsors-link:hover {
  color: var(--link);
}

.callout {
  background-color: var(--callout-background);
  padding: var(--default-spacing);
}

/* MOBILE */

@media (max-width: 799px) {
  #title,
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2rem;
  }
  li h2 {
    font-size: 1.75rem;
  }

  p,
  li,
  table,
  pre,
  button {
    font-size: 1.2rem;
  }

  #logo {
    width: 100vw;
  }

  #home-bg {
    background-image: none;
  }

  .post img {
    max-width: 25rem;
  }

  nav,
  #home-main,
  .sec-container,
  .post {
    margin-inline: var(--sm-spacing);
  }
}

/* TABLETS */

@media (min-width: 800px) and (max-width: 1299px) {
  nav,
  #home-main,
  .sec-container,
  .post {
    margin-inline: var(--default-spacing);
  }

  .post {
    max-width: var(--l-paragraph);
  }
}