@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-light.woff2') format('woff2'); 
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-regular.woff2') format('woff2'); 
}

body {min-width: 320px; font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 1.2em; font-weight: 400; text-align: center; background-color: #ebebeb; background-image: url('../media/background.svg'); background-position: center; background-size: 120em;}

h1 {font-size: 2em; font-weight: 400; line-height: 1em; margin: 0.5em 0; padding: 0;}

div#content {position: absolute; width: calc(100% - 2em); top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 2em));}
div#footer {position: absolute; width: calc(100% - 2em); bottom: 1em; left: 50%; transform: translateX(-50%); font-weight: 300; text-align: center;}
img#logo {width: 34em; max-width: 100%; height: auto;}

.twilight {color: #7b7b7b;}

@media (max-width: 1920px) { body {font-size: 16px;} }
@media (max-width: 800px) { body {font-size: 14px;} }