@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-Light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-LightItalic.ttf") format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-Regular.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-Italic.ttf") format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-Medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-MediumItalic.ttf") format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-SemiBold.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url("/fonts/IBMPlexSerif-SemiBoldItalic.ttf") format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3';
  src: url("/fonts/SourceSans3-Light.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3';
  src: url("/fonts/SourceSans3-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3';
  src: url("/fonts/SourceSans3-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SourceSans3';
  src: url("/fonts/SourceSans3-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --text-color-white: #fff;
  --font-body: 'IBMPlexSerif', Georgia, 'Times New Roman', Times, serif;
  --font-heading: 'SourceSans3', Arial, Helvetica, sans-serif ;
  --header-height: 6rem;
  --home-primary-color: #8355CA;
  --home-secondary-color: #7366C4;
  --home-highlight-color: #4796BC;
}

button {
  cursor: pointer;
  border-radius: 4px;
}

footer {
  background: var(--home-primary-color);
  color: var(--text-color-white);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  width: 100vw;
  box-sizing: border-box;
}

footer img {
  display: block;
  width: 100px;
  margin: 20px auto;
}

footer a {
  text-decoration: underline;
  color: var(--text-color-white);
}