*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

p { 
    padding-bottom: 20px;
  }


h1 { 
  color: #f3e1b2;
    line-height: 40px;
    font-family: "atkinson";
    font-weight: normal;
    text-align: center;
    font-size: 3rem;
    padding: 10px;
  }

body {
  height: 100%;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;

  background-position: center, center;
  background-color:#180701;
  font-size: 1.6rem;
  font-family: "futura";
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  
}

header {
    width:100%;
   color:#180701;
padding: 20px;
font-size: 1.4rem;
text-align: center;
font-family: "grenze-gotisch";
font-weight: normal; 
line-height: 18px;
margin-top:auto;
margin-bottom:auto;
margin-left: auto;
margin-right: auto;
}



main {
    font-size: 1.4rem;
    font-family: "basteleur";
    width:auto;
    background-color:#f3e1b2;
    color:#180701;
    padding: 20px;
    text-align: center;
    font-weight: normal;
    line-height: 1.8rem;
    margin-left: auto;
    margin-right: auto;
    align-content:center;
}

.test {
    
    width:100%;
      color:#f3e1b2;
      font-size: 5rem;
      text-align: center;
      font-family: "pixelcastle";
      line-height: 18px;
      margin-top:auto;
      
     margin-bottom:auto;
     margin-left: auto;
     margin-right: auto;
    }
    .beepboop {
    margin: 10px 10px 10px 10px;
    
    width:800px;
      background-color:white;
      color:red;
      font-size: 3rem;
      text-align: left;
      font-family: "atkinson";
      font-weight: bold; 
      line-height: 18px;
      opacity: 0.5;
    }
 
    
    .center {    float:right   } 

    .button {
            float:left;
            background-color: #180701;
            border: solid #180701;
            border-radius: 8px;
            color: #f3e1b2;
            padding: 10px 15px;
            text-align: center;
            text-decoration: none;
            font-size: 1.6rem;
          }
      .indent {
        margin-left:60px;
      }
        br.big {
          line-height:600%;
        }
          .column {
            float: left;
            width: 50%;
          }
          
          /* Clear floats after the columns */
          .row:after {
            content: "";
            display: table;
            clear: both;
          }


          div.contained {
            max-height:100%;
          }


          @font-face {
            font-family: 'atkinson';
            font-style: normal;
            src: url(fonts/atkinson-regular.woff2) format('woff2');
           }
           @font-face {
            font-family: 'atkinson';
            font-style: bold;
            src: url(fonts/atkinson-bold.woff2) format('woff2');
           }
           @font-face {
            font-family: 'atkinson';
            font-style: italic;
            src: url(fonts/atkinson-italic.woff2) format('woff2');
           }
           @font-face {
            font-family:grenze-gotisch;
            font-style: normal;
            src: url(fonts/grenze-gotisch-bold.woff2) format('woff2');
           }
           @font-face {
            font-family:avara;
            font-style: normal;
            src: url(fonts/avara-bold.woff2) format('woff2');
           }
           @font-face {
            font-family:trickster;
            font-style: normal;
            src: url(fonts/trickster-regular.woff2) format('woff2');
           }
           @font-face {
            font-family:basteleur;
            font-style: normal;
            src: url(fonts/basteleur-moonlight.woff2) format('woff2');
           }
           @font-face {
            font-family:pixelcastle;
            font-style: normal;
            src: url(fonts/pixelcastle-regular.woff2) format('woff2');
           }