body {
    font-family: "VG5000";
    color: black;
    display: block;
    text-align: left;
      position: block;
      font-size: 12px;
    height: 100vh;
      overflow: auto;
  }

  html, body {
    max-width: 100%;
    overflow-x: hidden;
}

  .container{
    background-color: hotpink;
  }

  .container2{
    background-color: lavender;
  }

  .hpink {
    background-color: hotpink;
  }

  .hpinktext {
    color: hotpink;
  }

  .white {
    color: white;
   }

   .black {
    background-color: black;
   }

   .margint {
    margin-top: 100px;
   }

   img {
    filter: contrast(110%);
   }
  

  /*
    .grid {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(4, 1fr);
        padding-block: 2rem;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    }
     
  */
    .grid{
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 1rem;
      padding-right: 1rem;
        display: grid;
        grid-template-rows: repeat(1, 1fr); 
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 3rem 1rem;
    }

    .grid3{
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 1rem;
      padding-right: 1rem;
        display: grid;
        grid-template-rows: repeat(1, 1fr); 
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 3rem 1rem;
    }

    .grid4{
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 1rem;
      padding-right: 1rem;
        display: grid;
        grid-template-rows: repeat(1, 1fr); 
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 3rem 1rem;
    }

    .grid5{
      padding-top: 100px;
      padding-bottom: 100px;
      padding-left: 1rem;
      padding-right: 1rem;
        display: grid;
        grid-template-rows: repeat(1, 1fr); 
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 3rem 1rem;
    }


  /*
    .grid2{
      padding-top: 50px;
      padding-left: 1rem;
      padding-right: 1rem;
        display: grid;
        grid-template-rows: repeat(2, 1fr); 
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 3rem 1rem;
    }  */

    .hiddenPic {
      opacity: 0%;
    }

    .hiddenPic:hover{
      opacity: 100%;
    }

    .hidden {
      opacity: 0%;
    }

    .block {
      display: block;
    }

    img {
      filter: hue-rotate(30deg);
     }
    
    
    .home {
      position: absolute;
      color: white;
      font-size: 3rem;
      left: 95vw;
      bottom: 80px;
      position: fixed;
      font-size: 4rem;
    }

    .home2 {
      animation-name: home;
      animation-duration: 3s;
      animation-delay: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @keyframes home {
      0%   {color: hotpink}
      50% {color: white;}
      100% {color: hotpink}
     }

    .details {
      border-radius: 4px;
      padding: 0.5em 0.5em 0;
      font-size: 3rem;
      position: fixed;
      bottom: 80px;

    }
    
    .summary {
      font-weight: bold;
      margin: -0.5em -0.5em 0;
      padding: 0.5em;
    }

    .SummaryTxt {
      margin-left: 500px;
    }
    
    .details[open] {
      padding: 0.5em;
    }
    
    .details[open] summary {
      color: white;
      margin-bottom: 0.5em;
    }



    .PopUpOff[open] {
      padding: 0.5em;
    }

    .PopUpOff[open] .PopUpOn {
      color: white;
      margin-bottom: 0.5em;
      display: block;
      max-width: 20vw;
    }

    .PopUpPic {
      left: 0px;
      position: absolute;
    }

    .blockWeb {
      display: none;
     }

     .Struggle1 {
      position: relative;
      
    }

    
    

    .Intro {
      font-size: 1.5rem;
    }
/*
    .Intro:hover {
      opacity: 100%;
    } */

    .icon:link {
      text-decoration: none;
    }
    .icon:visited {
      text-decoration: none;
    }
    .icon:hover {
      text-decoration: none;
    }
    .icon:active {
      color: hotpink
    }


    .link:link {
      text-decoration: none;
    }
    .link:visited {
      text-decoration: none;
      color: white;
    }
    .link:hover {
      text-decoration: none;
    }
    .link:active {
      color: hotpink
    }


    .link2:link {
      text-decoration: none;
    }
    .link2:visited {
      text-decoration: none;
      color: hotpink;
    }
    .link2:hover {
      text-decoration: none;
    }
    .link2:active {
      color: hotpink
    }


  
    

     /* FONTS  */

     .Concept {
      font-size: 5rem;
      margin-left: 10px;
      margin-top: 0px;
     }

     .Title {
      font-size: 2.5rem;
      margin-top: 15px;
     }

     .Title2 {
      font-size: 2.5rem;
      margin-top: 15px;
      grid-column: span 2;
     }

     h1{
      font-size: 2rem;
     }

     h2 {
      font-size: 1.5rem;
     }
     
     p{
      font-size: 1rem;
      letter-spacing: 1px;
      line-height: 1.4;
     }

     .what {
      font-size: 48px;
     }

     ol {
      list-style-type: none;
     }

     .Fnote {
      text-decoration: none;
     }

     .Ftext {
      font-size: 1rem;
     }
     

     .white {
      color: lightgrey;
     }

     .black {
      background-color: black;
     }


     .pfeil {
      position: relative;
      animation-name: pfeil;
      animation-duration: 12s;
      animation-delay: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      font-size: 2rem;
     }


     @keyframes pfeil {
      0%   { left:0px; top:0px;}
      100% { left:100vw; top:0px;}
     }

     .pfeil2 {
      position: relative;
      animation-name: pfeil2;
      animation-duration: 8s;
      animation-delay: 1s;
      animation-iteration-count: infinite;
      font-size: 4rem;
     }

     @keyframes pfeil2 {
      0%   {color: hotpink}
      50% {color: black;}
      100% {color: hotpink}
     }


     .pfeil3 {
      animation-delay: 1s;
     }

     .pfeil4 {
      animation-delay: 2s;
    }

    .pfeil5 {
      animation-delay: 3s;
    }

    .pfeil6 {
      animation-delay: 4s;
    }

    .pfeil7 {
      animation-delay: 5s;
    }
    

    .pfei {
      font-size: 4rem;
    }


    @media (max-width: 850px) {
      .grid{
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
          display: grid;
          grid-template-rows: repeat(1, 1fr); 
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 3rem 1rem;
      }

      .grid3{
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
          display: grid;
          grid-template-rows: repeat(1, 1fr); 
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 3rem 1rem;
      }

      .grid4{
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
          display: grid;
          grid-template-rows: repeat(1, 1fr); 
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 3rem 1rem;
      }

    }

    @media (max-width: 400px) {
      .grid{
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
          display: grid;
          grid-template-rows: repeat(1, 1fr); 
          grid-template-columns: repeat(1, 1fr);
          grid-gap: 3rem 1rem;
      }

      .grid3{
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 1rem;
        padding-right: 1rem;
          display: grid;
          grid-template-rows: repeat(1, 1fr); 
          grid-template-columns: repeat(1, 1fr);
          grid-gap: 3rem 1rem;
      }
  
    }