/* Variables */
:root {
  --color-blue: rgb(0, 0, 172);
  --color-turquoise: rgb(0, 198, 255);
  --color-gray: rgb(225, 225, 225);

  --padding: 2.34vw;
}

/* Font declarations */
@font-face {
  font-family: Arachne;
  font-weight: 400;
  font-style: normal;
  src: local("Arachne Demigod"),
    url("../assets/Arachne-Demigod.ttf") format("truetype");
}

@font-face {
  font-family: "Ambiant Light";
  font-weight: 400;
  src: local("Ambiant Light"),
    url("../assets/Ambiant-Light.ttf") format("truetype");
}

/* Base styles */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-gray);
  background-color: black;
  font-family: "Ambiant Light", sans-serif;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
  overflow-x: hidden;
}

/* Title styles */
h1,
h2,
h3 {
  font-family: Arachne, serif;
  font-size: 5.333em;
  font-weight: 100;
  line-height: 0.92;
}

blockquote {
  font-family: Arachne, serif;
  font-size: 4.5em;
  line-height: 1.1;
  text-align: center;
}