@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&family=Roboto+Mono&display=swap");
@import "./colors.css";

body {
  margin: 0;
  overflow: hidden;
  background-color: var(--background-color-light);
}

main {
  margin-top: 40px;
}

div.scroll {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 100px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--font-color-dark);
}

h2 {
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  color: var(--font-color-dark);
}

h3 {
  font-family: "Roboto Mono", monospace;
  font-size: 25px;
  color: var(--font-color-dark);
}

p {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--font-color-dark);
}

a.links {
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 30px;

  font-family: "Roboto Mono", monospace;
  font-size: 30px;
  color: var(--font-color-dark);
}

/*RESPONSIVE*/
@media screen and (max-width: 1060px) and (max-height: 1000px) {
  h1 {
    font-size: 70px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  h2 {
    font-size: 35px;
  }

  p {
    font-weight: 100;
  }

  a.links {
    font-weight: 100px;
    font-size: 15px;
  }
}