@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    background-color: #000;
    background-image: url('./bg.jpg');
    background-size: cover;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    font-size: 16px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

h2 {
    margin-top: 0.25rem;
    font-size: 2.1rem;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: light;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.montserrat-extrabold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.montserrat-extralight {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.montserrat-light {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.container {
    margin: 0 auto;
    padding-top: 10vh;
    width: 20vw;
}

@media (max-width: 1024px) {
    .container {
        width: 80%;
    }
    html, body {
        background-size: auto;
    }
}

p {
    font: 1rem/1.5rem "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #ddd;
}

.contact {
    font-size: 0.8rem;
    margin-top: 2rem;
}