@font-face {
    font-family: 'BayCIXSchrift';
    src: url(BayCIXSchrift.ttf) format('truetype');
  }

  body {
    background-color: black;
    text-align: center;
    overflow-y: hidden; 
    overflow-x: hidden; 
  }
  
  /*create grid*/
  #content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 1rem;
    grid-template-areas: 'header header' 'block_title block_title' 'block_impressum block_impressum' 'block_logo block_logo' 
  }


  /*media query -> change the size of the grid with the device width*/
  @media only screen and (max-width:700px) {
    #content {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(100px, auto);
      grid-gap: 1rem;
      grid-template-areas: 'header' 'block_title' 'block_impressum' 'block_logo'
    }
  }
  
  /*500 Error*/
  .header {
    grid-area: header;
    height: 150px;
    font-family: BayCIXSchrift;
    font-size: 8.5vh;
    color: white;
    grid-column: 1/ 9;
    grid-row: 1 / 9;
    margin-top: 20vh;  
  }
  
  /*Unecxpected Error*/
  .block_title {
    grid-area: block_title;
    height: 150px;
    font-family: BayCIXSchrift;
    font-size: 4vh;
    color: white;
    grid-column: 1/ 9;
    grid-row: 1 / 9;
    margin-top: 30vh; 
  }

  /*Impressum*/
  .block_impressum{
    grid-area: block_impressum;
    height: 150px;
    color: white;
    font-family: BayCIXSchrift;
    font-size: 1.5vh;
    grid-column: 1/ 9;
    grid-row: 1 / 9;
    margin-top: 45vh;
   }

   /*grid of the logo*/
   .blocklogo{
    grid-area: block_logo;
    height: 150px;
    color: white;
    font-family: BayCIXSchrift;
    font-size: 1.5vh;
    grid-column: 1/ 9;
    grid-row: 1 / 9;
    margin-top:70vh;
   }

   /*logo image*/
  .image{
    max-width: 100%;
    max-height: auto; 
    height: 10%;
    position: absolute;
    left: 42.5%;
    right: 57.5%;
    grid-column: 1 / 9;
    grid-row: 1 / 9;  
  }