@import url("https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&display=swap");

:root {
  --color-dark-blue: #003168;
  --color-blue: #0060a9;
  --color-gray-blue: #87afbf;
  --color-golden: #ffc72c;
  --color-orange: #f26531;
  --color-light-blue: #6bccef;
  --color-teal: #307d84;
  --color-green: #b0ba25;
  --color-light-brown: #c2b47d;
  --color-dark-brown: #4f545c;
  --color-light: #c9c2b8;
  --font-size: 1.3rem;
  --font-family-serif: "Bitter", serif;
  --font-family-sans: "Raleway", sans-serif;
  --serif-font: "Old Standard TT";
  --sans-serif-font: "Oswald";
  --handwriting-font: "Covered By Your Grace";
  --h1-font-size: 3rem;
  --h2-font-size: 1.75rem;
  --handwriting-font-size: 1.25rem;
}

html {
  box-sizing: border-box;
  min-width: 405px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  all: unset;
  font-family: var(--serif-font);
  font-size: var(--font-size);
  overflow-x: hidden;
  overflow-y: scroll;
}

h1,
h2,
h3,
p {
  margin: unset;
}

a {
  color: var(--color-golden);
}

a:hover {
  text-decoration: none;
}

.display-none {
  display: none;
}

.capitalize {
  text-transform: uppercase;
}

.accent {
  font-style: italic;
}

.make-space {
  height: 100px;
}

button:disabled {
  pointer-events: none;
}

.large-accent {
  font-size: 64px;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
  font-family: var(--sans-serif-font);
}