/* start of font family declaration */

@font-face {
  font-family: "Teachers";
  src: url("./fonts/Teachers.ttf");
}

/* end of font family declaration */

/* start of variable declarations */

:root {
  --primary-color: black;
  --secondary-color: royalblue;
  --tertiary-color: darkorange;
  --shadow-color: #4169e132;

  --color-black: black;
  --color-white: white;

  --color-blue-1: royalblue;
  --color-blue-2: cornflowerblue;
  --color-blue-3: lightskyblue;

  --color-brown-1: sienna;
  --color-brown-2: peru;
  --color-brown-3: rosybrown;

  --color-gray-1: slategray;
  --color-gray-2: gray;
  --color-gray-3: silver;
}

/* end of variable declarations */

/* start of global styles */

body,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

html {
  font-family: Arial, Helvetica, sans-serif; /* fallback */
}

body {
  font-size: 20px;
  font-family: Teachers;
  color: var(--primary-color);
  background-color: white;

  @media (width <= 768px) {
    font-size: 17px;
  }
}

a {
  color: var(--color-blue-1);
  text-decoration: none;

  &:hover {
    color: var(--color-blue-2);
    text-decoration: underline;
  }
}

hr {
  margin: 0;
  border: 0.5px solid var(--color-gray-3);
}

address {
  font-style: normal;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

/* end of global styles */