@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@200;300;400;600;800&display=swap");

:root {
  --main-font-color: #868075;
}

* {
  margin: 0px;
  padding: 0px;
}
html {
  scroll-behavior: smooth;
  color: var(--main-font-color);
  font-family: Montserrat Alternates, Verdana, sans-serif;
  font-size: 20px;
  font-weight: 400;
  
}
img {
  max-width: 100%;
}
body {
  background-color: #181714;
  height: 100vh;
  background-image: linear-gradient(
    to left bottom,
    #0f0e0d,
    #100f0e,
    #11110e,
    #12120f,
    #131310,
    #161612,
    #181814,
    #1b1a16,
    #201f19,
    #25231d,
    #2b2820,
    #302d24
  );
}
a {
  transition: 0.8s ease;
}
a:hover {
  transition: 0.8s ease;
}
h1 {
  font-size: 0.9em;
  font-weight: 400;
  color: var(--main-font-color);
}
@media (min-width: 300px) {
  h1 {
    font-size: 1em;
  }
}
@media (min-width: 350px) {
  h1 {
    font-size: 1.1em;
  }
}
@media (min-width: 600px) {
  h1 {
    font-size: 1.5em;
  }
}
@media (min-width: 1400px) {
  h1 {
    font-size: 2em;
  }
}

.main-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.main-graph img {
  height: 99vh;
}
@media (max-width: 1200px) {
  .main-graph img {
    width: 100%;
    height: auto;
    max-height: 75vh;
  }
}
.main-page {
  width: auto;
  height: 10vh;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-top: 45vh;
  padding-bottom: 45vh;
}
@media (max-width: 1200px) {
  .main-page {
    width: 100%;
    height: 10vh;
    text-align: center;
    vertical-align: middle;
    padding-top: 5vh;
    padding-bottom: 5vh;
  }
}
.home-buttons {
  margin: 0.8em 0;
}
.home-buttons a:link,
.home-buttons a:visited {
  color: var(--main-font-color);
  text-decoration: none;
}
.home-buttons a:hover {
  color: #bdb5a6;
  text-decoration: none;
  transition: 0.8s ease;
}