@import "colors.css";
      @import "navbar.css";
      @import "dropdown.css";
      @import "gallery.css";
      @import "full_page_nav.css";
      @import "schulchronik.css";
      @import "aktivitaeten.css";
      @import "nachruf.css";
      @import "footer.css";
      
      
      body {
        background-color: var(--green100-color);
        color: black;
        font-family: Arial, sans-serif;
        padding: 0;
        margin: 0;
      }
        
      
      .container {
        background-color: var(--ct-color);
        width: 100%;
        padding: 0;
        margin: 0;
        margin-bottom: 2rem;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-column-gap: 0px;
        grid-template-areas: "bypass"
                             "header"
							 "contact"
							 "news"
                             "main1"
                             "main2"
                             "main3"
                             "main4"
                             "full"
                             "full2"
                             "full3"
                             "footer";
      }
      
      
      .header {
        grid-area: header;
        margin: 0;
        padding: 0;
        position: relative;
      }
      
      .footer { 
        grid-area: footer;
        background-color: var(--div-color);
        margin: 0;
        padding: 0;
      }
      .contact {
        padding: 0.5rem;
        grid-area: contact;
        background-color: var(--div-color);
      }
      .news {
        padding: 0.5rem;
        grid-area: news;
        background-color: var(--div-color);
      }
      .main1 {
        padding: 0.5rem;
        grid-area: main1;
        background-color: var(--div-color);
      }
      .main2 {
        padding: 0.5rem;
        grid-area: main2;
        background-color: var(--div-color);
      }
      .main3 {
        padding: 0.5rem;
        grid-area: main3;
        background-color: var(--div-color);
      }
      .main4 {
        padding: 0.5rem;
        grid-area: main4;
        background-color: var(--div-color);
      }
      .full {
        padding: 0.5rem;
        grid-area: full;
        background-color: var(--div-color);
      }
      .full2 {
        padding: 0.5rem;
        grid-area: full2;
        background-color: var(--div-color);
      }
      .full3 {
        padding: 0.5rem;
        grid-area: full3;
        background-color: var(--div-color);
      }
      
      
      @media (orientation: landscape) and (min-width: 50rem), (min-width: 62.5rem) {
        .container {
          max-width: 90rem; 
          padding: 0;
          margin: auto;
          margin-bottom: 2rem;
          font-size: 1rem;
          display: grid;
          grid-template-columns: 50% 50%;
          grid-template-rows: auto;
          grid-column-gap: 0px;
          grid-row-gap: 0px;
          grid-template-areas: "bypass bypass"
                               "header header"
							   "news contact"
                               "main1 main2"
                               "main3 main4"
                               "full full"
                               "full2 full2"
                               "full3 full3"
                               "footer footer";
        }
        .header {
          padding: 0;
          margin: 0;
        }
        .footer { 
          padding: 0;
          margin: 0;
        }
        .contact {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .news {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .main1 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .main2 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .main3 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .main4 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .full {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .full2 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
        .full3 {
          margin: 0.5rem;
          padding: 0.5rem;
        }
      }
      
      @media print {
        .header {
          display: none;
        }
        .footer {
          display: none;
        }
      }