@font-face {
  font-family: "Kirsty";
  src: url("../fonts/Kirsty Rg.otf");
}

@font-face {
  font-family: "Kirsty";
  src: url("../fonts/Kirsty Rg It.otf");
  font-style: italic;
}

@font-face {
  font-family: "Kirsty";
  src: url("../fonts/Kirsty Bd.otf");
  font-weight: bold;
}

@font-face {
  font-family: "Kirsty";
  src: url("../fonts/Kirsty Bd It.otf");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: "Smokum";
  src: url("../fonts/Smokum.ttf") format(truetype);
  font-style: normal;
  font-weight: normal;
}

:root {
  --background-color: rgb(245, 234, 207);
  --color: rgb(238, 213, 153);
  --stroke-color: rgb(36, 28, 20);
  --text-color-dark: rgb(36, 28, 20);
  --text-color-light: rgb(219, 227, 235);
  --background-color-dark: rgb(119, 73, 35);

  --background-image:
    linear-gradient(
      color-mix(in srgb, var(--background-color) 60%, transparent),
      color-mix(in srgb, var(--background-color) 60%, transparent)
    ),
    url("../images/background.jpg");
}

* {
  scroll-margin-top: 9em;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
  color: var(--color);
  font-family: "Kirsty", sans-serif;
  background-image: var(--background-image);
  font-size: 14pt;
  text-align: justify;
  line-height: 1.4;
}

#main {
  margin: 5em min(5%, 5em);
  margin-top: 10em;
  color: var(--stroke-color);
}

a {
  color: rgb(75, 90, 87);
  text-shadow: 0 0 0 white;
  transition: text-shadow 0.2s;
}

a:hover {
  text-shadow: 0 0 5px white;
}

small {
  font-size: 70%;
}

hr {
  border: 2px solid var(--stroke-color);
}

table {
  border-spacing: 10px;
}

footer {
  width: min(calc(100vw - 1em), 8.5in);
  margin: 0 auto;
  padding-bottom: 2em;
  text-align: center;
  color: rgb(111, 93, 64);
  font-family: sans-serif;
}

footer #previous-years a {
  display: inline-block;
  margin: 0 0.25em;
}

footer #socials {
  margin-bottom: 0.25em;
}

footer #socials a {
  text-decoration: none;
  margin: 0 0.25em;
}

.stroke {
  -webkit-text-stroke: 8px var(--stroke-color);
  paint-order: stroke fill;
}

.card {
  background-color: rgb(0, 0, 0, 0.1);
  padding: 0.2em 0.5em;
  border: 0.125em solid var(--stroke-color);
  border-radius: 0.25em;
  paint-order: stroke fill;
}

.btn {
  background-color: var(--background-color-dark);
  color: var(--color);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 24pt;
  padding: 0.2em 0.5em;
  border: 0.125em solid var(--stroke-color);
  border-radius: 0.25em;
  -webkit-text-stroke: 0.125em var(--stroke-color);
  paint-order: stroke fill;
}

.no-justify {
  text-align: left;
}

.profile-card {
  display: grid;
  grid-template-columns: 100px auto;
  /*grid-template-columns: 200px auto;*/
  gap: 10px;
  margin: 1em 0;
}

.profile-card .profile-card-picture {
  width: 100%;
}

.profile-card .profile-card-name {
  font-size: 24pt;
  margin: 0;
}

.profile-card .profile-card-species {
  margin: 0;
  font-style: italic;
}

.profile-card .profile-card-position {
  margin-top: 0;
}

/* Mobile styling */
@media (max-width: 820px) {
  * {
    scroll-margin-top: 7em;
  }

  #main {
    margin-top: 8em;
  }
}