:root {
  color-scheme: light dark;
  color: light-dark(#000000, #9ca3af);
  background: light-dark(#ffffff, #16171d);
  text-rendering: optimizeLegibility;
  max-width: 100%;
  margin: auto;
  text-align: center;
  border-inline: 1px solid light-dark(#e5e4e7, #2e303a);

  font-family: Arial, Helvetica, sans-serif;
}


body {
  margin: 0;
}

h1 {
    font-size: 42px;
}

.header-bar {
    display: flex;
    width: 90%;
    margin: auto;
    height: auto;
    align-items: center;
    font-size: 24px;
}

.header-button {
    background-color: light-dark(#b3c1ff, #353535);
    cursor: pointer;
    align-content: center;
    width: inherit;
    height: 50px;
}

.header-button:hover {
    background-color: light-dark(#525252, #525252);
}

.header-bar a {
    color: inherit;
    text-decoration: inherit;
}

@media screen and (max-width: 1780px) {
    .header-bar {
        flex-direction: column;
    }

    h1 {
        font-size: 70px;
    }

    .header-button {
        height: 200px;
        font-size: 50px;
    }
}