:root{
    --background-color: #52575F;
    --darker-background-color: #213141;
    --accent-color: #240087;
    --text-color: #FFF;
    --link-color: #F00;  }


html{ height: 100%;}

body{ height: 100%; background-color: #52575F;}

nav{ background-color: #52575F; display: flex; align-items: flex-start; border-bottom: 3px solid #52575F; }
 
img.logo{ max-width: 10%; height: auto; margin: 30px 0 0 20px; }
img.titel {margin: 30px auto; display: block; max-width: 80%; height: auto;}
img {max-width: 90%; height: auto; object-fit: cover;}

nav ul{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; list-style: none; }

nav li{margin: 0 auto; width: fit-content; height: auto; position: relative; border: 3px solid #52575F; }

nav li:hover{ border-bottom: 3px solid #00AAFF; }

nav ul a{background-color: #44494F; padding:10px; width: fit-content; height: auto; display: flex;  font-size: 1.2em; text-decoration: none;}


nav input[type="checkbox"] { display: none;}


.toggle_button{ width: 30px; height: 23px; position: absolute; top: 25px; right: 25px; display: none;
    flex-direction: column; justify-content: space-between;}

.bar{ height: 4px; width: 100%; background: #FFF;  border-radius: 100px;}

 p  {text-align:left; font-size: 1.5em; color: #000; }
   h1 {text-align: center; font-size: 2.5em; font-family: Tahoma; color: #000;  margin: 15px; }
   h2 {text-align: left; font-size: 2em; font-family: Comic; color: #000;  }
   h3 {text-align: left; font-size: 1.3em; font-family: Arial; color: #000;  }
   h4 {text-align: left; font-size: 2em; font-family: Rancho, cursive; color: #EFEFEF;  }    
   h5 {text-align: center; font-size: 1.6em; font-family: Times, serif; color: #EFEFEF;  }

   p.poem  {text-align:left; font-family: Times, serif; font-size: 1em; line-height: 100%; color: #B4B4B4;}
   p.kun   {text-align:left; max-width: 80%; margin-top: 0; margin-left: 4em; font-family: Times, serif; font-size: 1,3em; line-height: 100%; color: #B4B4B4;}



.grid-container {
  margin: auto;
  display: grid;
  max-width: 75%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-contents; 
  grid-template-areas:
    "kau-a kau-b"
    "kau-c kau-d"
    "kau-e kau-f"
    "kau-g kau-h"
    "kau-i kau-j"
    "kau-k kau-l"      
    ;    
  justify-content: center;
  align-content: space-between;
  align-items: center;
  gap: 6em 1em; }

.itema {grid-area: kau-a; width: fit-content;  height: auto;  }
.itemb {grid-area: kau-b; margin-top: 3em; width: fit-content;  height: auto;  }
.itemc {grid-area: kau-c; width: fit-content;  height: auto;  }
.itemd {grid-area: kau-d; width: fit-content;  height: auto;  }
.iteme {grid-area: kau-e; width: fit-content;  height: auto;  }
.itemf {grid-area: kau-f; width: fit-content;  height: auto;  }
.itemg {grid-area: kau-g; width: fit-content;  height: auto;  }
.itemh {grid-area: kau-h; width: fit-content;  height: auto;  }
.itemi {grid-area: kau-i; width: fit-content;  height: auto;  }
.itemj {grid-area: kau-j; width: fit-content;  height: auto;  }
.itemk {grid-area: kau-k; width: fit-content;  height: auto;  }


@media(max-width: 600px){ .toggle_button{ display: flex; }

    nav ul{ height: min-content; width: min-content; align-content: center; background-color: var(--darker-background-color);
        display: none; position: absolute; }

    nav li{  height: min-content; width: 70%;  border: none; display: block; }

    nav ul a{ align-content: center;}

    img.logo{ max-width: 10%; height: auto;}
    
    img.titel {display: block; margin: 50px 0 0 50px;}
    
    #toggle_button:checked ~ ul{ display: block; }

 .grid-container {
  display: grid;
  justify-content: center;
  grid-template-rows: max-content; 
  grid-template-areas:
    "kau-a kau-a "  
    "kau-b kau-b "   
    "kau-c kau-c "   
    "kau-d kau-d"
    "kau-e kau-e"
    "kau-f kau-f"
    "kau-g kau-g"
    "kau-h kau-h"      
    "kau-i kau-i"
    "kau-j kau-j"  
    "kau-k kau-k";
    gap: 2em; } 
}

  table.kunakt  {margin-left:auto; margin-right:auto; padding:70px; text-align:left; 
                 background-color: #656570; max-width:980px; }
  
  table.kinate  {margin-left:auto; margin-right:auto; padding:0; border-collapse: collapse; text-align: left;  
                 background-color: #52575F; max-width:980px; }   

  a:link       { text-decoration:none; color:#F00; }   
  a:visited    { text-decoration:none; color:#240087;}    
  a:hover      { text-decoration:none; font-weight:bold;}
  a.kun:link   { text-decoration:none; color:#FFF; }   

     
  img.cliptop { width:51px; height:50px; }