@font-face {
  font-family: 'Schoolbook';
  src: url('/assets/fonts/schoolbook/schoolbook.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schoolbook';
  src: url('/assets/fonts/schoolbook/schoolbook-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-family: "Schoolbook", serif;
  --font-size: 14pt;
  --line-height: 1.5rem;
  --text-stroke: 0.2px;
  --color-primary: #250000;
  --color-secondary: #BBB7AB;
  --color-background: #fff6f4;
  --nav-padding: 1.7rem;
  --project-padding: 1.7rem 0;
  --grid-gap: 1.7rem;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color-primary);
  line-height: var(--line-height);
  -webkit-text-stroke: var(--text-stroke);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding: var(--nav-padding);
  grid-gap: var(--grid-gap);
  background-color: var(--color-background);
}

h1,
h2,
h3,
p,
a {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color-primary);
  -webkit-text-stroke: var(--text-stroke);
  font-weight: normal;
  padding: 0;
  margin: 0;
  line-height: var(--line-height);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-secondary);
}

.light {
  color: var(--color-secondary);
}

.break {
  padding-bottom: var(--line-height);
}

.col {
  padding-bottom: var(--nav-padding);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

form {
  width: 100%;
  text-align: center;
}

.italic {
  font-style: italic;
}

/* Add styles for the bee image */
.bee-image {
  max-width: 100px;
  height: auto;
  object-fit: cover;
}

@media (max-width: 880px) {
  body {
    display: block;
    padding: var(--nav-padding);
  }

  .col {
    padding-bottom: var(--nav-padding);
  }

  /* Remove space between Graphic Design and San Francisco */
  .col:nth-child(2) {
    padding-bottom: 0;
  }

  .bee-image {
    max-width: 160px;
    margin-top: var(--grid-gap);
  }
}