*{padding: 0px; margin: 0px; box-sizing: border-box;}
button {border: 0px;}

@font-face {font-family: OpenSans-Bold; src: url(/fonts/OpenSans/OpenSans-Bold.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: OpenSans-Light; src: url(/fonts/OpenSans/OpenSans-Light.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: OpenSans-Medium; src: url(/fonts/OpenSans/OpenSans-Medium.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: OpenSans-Regular; src: url(/fonts/OpenSans/OpenSans-Regular.ttf); font-weight: normal; font-style: normal;}

@font-face {font-family: Roboto-Light; src: url(/fonts/Roboto/Roboto-Light.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: Roboto-Regular; src: url(/fonts/Roboto/Roboto-Regular.ttf); font-weight: normal; font-style: normal;}
@font-face {font-family: Roboto-Medium; src: url(/fonts/Roboto/Roboto-Medium.ttf); font-weight: normal; font-style: normal;}

body {}
a{text-decoration: none; color: white;}

:root {
  --min-w: 900px;
  --max-w: 1980px;
  --max-w-percent: calc(1980px / 100);
  --max-h: 1080px;
  --max-w-half: calc(var(--max-w) / 2);
  --max-w-third: calc(var(--max-w) / 3);
  --max-w-quarter: calc(var(--max-w) / 4);
  --max-l-margin: calc((100% - var(--max-w)) / 2);
  --footer-text-color: #404040;
  --header-s1: 150px;
  --header-s2: 100px;
  --header-s3: 12vw;
  --footer-s1: 150px;
  --footer-s2: 100px;
  --footer-s3: 10vw;
}

@media (min-width: 1980px) and (orientation: Landscape){
  #screen {
    width: 100%; 
  }

  #navigator {
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    height: var(--header-s1);
    background-color: black;
    position: relative;
    z-index: 10;
  }

  a.navigator-btn {  
    color: white;
    text-align: center;
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
    font-family: OpenSans-Medium;
    margin-left: calc((100% - (var(--header-s1) * 3)) / 8);
    padding: 50px 0px 50px 0px;
  }

  a.navigator-btn:first-child{ margin-left: 0px;}

  h1.headline {
    font-family: OpenSans-Medium;
    font-size: 50px;
    line-height: 50px;
    height: 200px;
    width: 100%;
    padding-top: 100px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
  }

  #inner {
    margin-left: var(--max-l-margin);
    max-width: var(--max-w); 
    min-width: var(--min-w);
    padding-bottom: var(--footer-s1);
    min-height: calc(100vh - var(--header-s1));
    overflow: hidden;
  }

  #content {
    clear: both;
  }

  #footer {
    margin-top: calc(0px - var(--header-s1));
    background-color: black; 
    clear: both;
    height: 150px;
  }

  p.footer-text {
    font-family: Roboto-Regular;
    padding-top: 65px;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    color: var(--footer-text-color);
  }
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
  #screen {
    width: 100%;
    center;
  }

  #navigator {
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    height: var(--header-s2);
    background-color: black;
    position: relative;
    z-index: 10;
  }

  a.navigator-btn{  
    color: white;
    text-align: center;
    font-size: calc(1vw + 10px);
    line-height: 30px;
    text-transform: uppercase;
    font-family: OpenSans-Medium;
    margin-left: calc((100% - (var(--header-s1) * 3)) / 6);
    padding: 35px 0px 35px 0px;
  }

  a.navigator-btn:first-child { margin-left: 0px;}

  h1.headline {
    font-family: OpenSans-Medium;
    font-size: 50px;
    line-height: 50px;
    height: 200px;
    width: 100%;
    padding-top: 100px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
  }

  #inner {
    min-height: calc(100vh - var(--header-s2) - var(--footer-s2));
  }

  #content {
    clear: both;
  }

  #footer {
    background-color: black; 
    clear: both;
    height: var(--footer-s2);
  }

  p.footer-text {
    font-family: Roboto-Regular;
    padding-top: 40px;
    text-align: center;
    font-size: calc(3vw / 4 + 10px);
    line-height: 30px;
    color: var(--footer-text-color);
  }
}

@media (max-width: 720px), (orientation: Portrait){
  #screen {
    width: 100%;  
    center;
  }

  #navigator {
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    height: var(--header-s3);
    position: relative;
    z-index: 10;
    background-color: black;
  }

  a.navigator-btn{
    text-transform: uppercase;
    font-family: OpenSans-Medium;
    text-align: center;
    font-size: calc(5vw / 2);
    color: white;
    margin-left: 10vw;
    height: var(--header-s3);
    padding-top: 4vw;
    line-height: 3vw;
  }

  a.navigator-btn:first-child{ margin-left: 0px;}

  h1.headline {
    font-family: OpenSans-Medium;
    font-size: 4vw;
    line-height: 4vw;
    height: 10vw;
    width: 100%;
    padding-top: 4vw;
    text-transform: uppercase;
    color: #000;
    text-align: center;
  }

  #inner {
    min-height: calc(100vh - var(--footer-s3) - var(--header-s3));
  }
  
  #content { 
    clear: both;
  }

  #footer {
    background-color: black; 
    clear: both;
    height: var(--footer-s3);
  }

  p.footer-text {
    font-family: Roboto-Regular;
    padding-top: 4vw;
    text-align: center;
    font-size: 2vw;
    line-height: 2vw;
    color: var(--footer-text-color);
  }
}