:root {
  --heading-font: "Noto sans", sherif;
  --text-font: "Noto sans", sherif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font), serif;
}

p,
span,
big,
small,
a,
button,
input,
li,
#kc-info-wrapper,
label {
  font-family: var(--text-font), serif;
}
html {
  height: 100svh;
  width: 100svw;
  display: flex;
}
body {
  background: linear-gradient(0.25turn, #293A48 0px, rgba(41, 58, 72, 0.5) 600px, #293A4800 1200px), url("../img/background.webp") no-repeat;
  background-size: cover;
  width: 100svw;
  margin: auto 0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  box-sizing: border-box;
  padding-left: 250px
}

@media (max-width: 1200px) {
  body {
    padding-left: 0;
    justify-content: center;
  }
}

body>div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  max-width: 300px;
  min-width: 300px;
  padding: min(30px, 1vh) min(100px, 9vw);
}

@media (max-width: 400px) {
  body>div {
    padding: 0;
    background: unset;
  }
}