:root {
  --ui-accent: #ff8640;
  --ui-dark-green: #189e5f;
  --ui-dark-background: #535353;
  --ui-light-background: #e4e4e4;
  --ui-black: #1d1d1d;
  --ui-white: #f3f3f3;
  --ui-light-orange: #ff9f68;
  --ui-typography: "Red Hat Display", sans-serif;
  --ui-yellow: #fff780;
  --ui-green: #7adc8f;
  --ui-light-purple: #a688ff;
  --ui-dark-purple: #6145b6;
  --ui-blue: #1b3be5;
  --ui-light-blue: #7b90fc;
  --padding-sm: 0.5em;
  --padding-md: 1em;
  --padding-l: 1.5em;
  --padding-xl: 2em;
  --shadow-titles: 3px 3px 3px rgba(0, 0, 0, 0.2);
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

@media (prefers-color-scheme: light) {
  body {
    background-color: var(--ui-light-background);
    color: var(--ui-black);
  }

  a {
    color: var(--ui-dark-purple);
    font-weight: 500;
  }

  a:hover {
    color: var(--ui-accent);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--ui-dark-background);
    color: var(--ui-white);
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  transition: all ease-in-out 0.2s;
}

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 17px;
  line-height: 1.6;
  font-family: var(--ui-typography);
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  padding-top: 70px;
}

.Container {
  display: inherit;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  flex: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
  padding: 0 1em;
  gap: inherit;
  grid-auto-rows: inherit;
  grid-template-columns: inherit;
  grid-auto-flow: inherit;
}

main {
  display: flex;
  flex-flow: column;
  align-items: center;
  align-content: center;
  height: 100vh;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;

  h1 {
    text-align: center;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
}