: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: 4em auto; display: block; max-width: 80%; height: auto;}


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.kon  {text-align: justify; font-family: Times, serif; font-size: 1.15em; line-height:115%; color: #000; max-width: 350px;}

  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; }  

.grid-container {
  margin: 30px auto 30px 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";
  justify-content: center;
  align-content: space-between;
  align-items: center;
  gap: 4em; }  


.itema {grid-area: kau-a; max-width: 75%;  height: auto;  }
.itemb {grid-area: kau-b; margin-left: 3em; margin-bottom: 5em; 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;
  margin: 3em auto 5em auto;
  max-width: 75%;
  justify-content: center;
  grid-template-rows: max-content; 
  grid-template-areas:
    "kau-a kau-a"  
    "kau-b kau-b";   
  gap: 2em;  } 

}