:root {
  --side-padding: 7em;
  --input-height: 3em;
  --element-distance: 0.5em;

  --background-zoom: -200px;
  --mouseX: 50%;
  --mouseY: 50%;
}

@font-face {
  font-family: 'comfortaa';
  src: url('/fonts/Comfortaa.ttf') format('truetype');
}

@media only screen and (max-width: 550px) {
  :root {
    --side-padding: 1em;
  }
}

@media only screen and (min-width: 1000px) {
  :root {
    --side-padding: 15em;
  }
}

@media only screen and (min-width: 1500px) {
  :root {
    --side-padding: 25em;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'comfortaa', sans-serif;

  min-height: 100vh;
  width: 100vw;

  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%),
    url('/img/downwards.jpg') no-repeat scroll center;
  background-position: 100% 0;
  background-size: cover;

  padding: 5em var(--side-padding);
}

#app {
  width: 100%;
}
