@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=SN+Pro:ital,wght@0,200..900;1,200..900&display=swap');

@media (hover: hover) {
  #navbar a:hover {
    background-color: var(--fg);
    transition: 400ms background-color ease-out;
  }
}

:root {
  --red: #F64758;
  --green: #6ED05F;
  --blue: #62ACE4;
  --purple: #B072D0;
  --white: hsl(0, 0%, 100%);
  --bg: hsl(248, 29%, 7%);
  --g: hsl(255, 25%, 10%);
  --fg: hsl(263, 17%, 15%);
  --big-font: "Google Sans", sans-serif;
  --small-font: "SN Pro", sans-serif;
  --nav-height: 4rem;
}

* {
  box-sizing: border-box;
}

img {
  pointer-events: none;
}

#content {
  padding-top: var(--nav-height);
}

html, body {
  background-color: var(--g);
}

body {
  color: var(--white);
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, a { margin: 0; line-height: 1; } 

h1, h2, h3 {
  font-family: var(--big-font);
}

h4, h5, h6, p, a {
  font-family: var(--small-font);
  font-weight: 600;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.5rem; }
p { font-size: 2rem; }
a {
  font-size: 1.25rem;
  color: var(--blue);
  text-decoration: none;
}

.indent {
  background-color: var(--g);
  padding-left: 10vw;
  padding-right: 10vw;
}

.indent-float {
  background-color: var(--g);
  border-radius: 2rem;
  margin-left: 6vw;
  margin-right: 6vw;
  padding-left: 4vw;
  padding-right: 4vw;
}

.txt-center {
  text-align: center;
}

.hori-spacer {
  color: transparent;
  background-color: transparent;
  width: 2rem;
  height: 0rem;
}

.vert-spacer {
  color: transparent;
  background-color: transparent;
  width: 0rem;
  height: 2rem;
}