body {
        font-family: Inter;
        margin: 0;
        padding: 0;
      }
      header {
        background: #ffffff;
        padding: 20px;
        text-align: center;
      }
      nav {
        background: #ffffff;
        padding: 10px;
        text-align: right;
      }
      nav a {
        margin-right: 25px;
        text-decoration: none;
        color: #a9a9a9;
        padding: 8px 16px;
      }

      nav a:hover {
        color: #61836c;
        font-style: italic;
      }
      main {
        padding: 50px;
      }
      footer {
        background: #ffffff;
        text-align: center;
        padding: 15px;
        margin-top: 100px;
      }

      #h1{
        font-size: 57.5px;
        font-weight: 800;
        letter-spacing: -1px;
        margin-left: 150px;
        color: rgb(5, 78, 77);
      }

        #flex{
        display: flex;
        }
      #luna{
        width: 600px;
        height: 600px;
        background: url(medien/aboutbild-11.png);
        background-size: 100%;
        background-repeat: no-repeat;
        margin-top: 40px;
        margin-left: 150px;
      }
      #luna:hover {
    animation: lunaa 3s linear infinite;
    } 
    @keyframes lunaa {
    0% {
        background: url("medien/aboutbild-11.png");
        background-size: 100%;
    }

    16% {
        background: url("medien/aboutbild-11.png");
        background-size: 100%;
    }

    16.666% {
        background: url("medien/aboutbild-12.png");
        background-size: 100%;
    }

    33% {
        background: url("medien/aboutbild-12.png");
        background-size: 100%;
    }

    33.332% {
        background: url("medien/aboutbild-13.png");
        background-size: 100%;
    }
    49%{
        background: url("medien/aboutbild-13.png");
        background-size: 100%;
    }
    49.999% {
         background: url("medien/aboutbild-14.png");
background-size: 100%;
    }
    66%{
        background: url("medien/aboutbild-14.png");
        background-size: 100%;
    }
    66.331% {
        background  : url("medien/aboutbild-15.png");
        background-size: 100%;
    }
    82%{
        background: url("medien/aboutbild-15.png");
        background-size: 100%;
    }
    82.997%{
        background: url("medien/aboutbild-16.png");
        background-size: 100%;
    }
    99.99% {
        background: url("medien/aboutbild-16.png");
        background-size: 100%;
    }
    100%{
         background: url("medien/aboutbild-11.png");   
        background-size: 100%;
    }

}
    
      #lars{
        width: 600px;
        height: 600px;
        background: url(medien/aboutbild-09.png);
        background-size: 100%;
        background-repeat: no-repeat;
        margin-left: 100px;
        margin-top: 40px;
      }
     #lars:hover {
    animation: larss 3s linear infinite;
    } 
    @keyframes larss {
    0% {
        background: url("medien/aboutbild-09.png");
        background-size: 100%;
    }

    16% {
        background: url("medien/aboutbild-09.png");
        background-size: 100%;
    }

    16.666% {
        background: url("medien/aboutbild-01.png");
        background-size: 100%;
    }

    33% {
        background: url("medien/aboutbild-01.png");
        background-size: 100%;
    }

    33.332% {
        background: url("medien/aboutbild-02.png");
        background-size: 100%;
    }
    49%{
        background: url("medien/aboutbild-02.png");
        background-size: 100%;
    }
    49.999% {
         background: url("medien/aboutbild-03.png");
background-size: 100%;
    }
    66%{
        background: url("medien/aboutbild-03.png");
        background-size: 100%;
    }
    66.331% {
        background  : url("medien/aboutbild-06.png");
        background-size: 100%;
    }
    82%{
        background: url("medien/aboutbild-06.png");
        background-size: 100%;
    }
    82.997%{
        background: url("medien/aboutbild-08.png");
        background-size: 100%;
    }
    99.99% {
        background: url("medien/aboutbild-08.png");
        background-size: 100%;
    }
    100%{
         background: url("medien/aboutbild-09.png");   
        background-size: 100%;
    }

}

#layout1{
    width: 600px;
    height: 300px;
    margin-top: 20px;
    margin-left: 130px;
    font-size: 22pt;
    line-height: 1;
    font-weight: 700;
    padding: 20px;
}

#layout2{
    width: 600px;
    height: 300px;
    margin-top: 20px;
    margin-left: 65px;
    font-size: 22pt;
    line-height: 1;
    font-weight: 700;
    padding: 20px;
}

      #headline {
        font-weight: bolder;
        font-family: monospace;
        padding: 20px;
      }
#headline a {
        text-decoration: none;
        color: black;
      }
      #headline a:hover {
        color: rgb(83, 129, 138);
      }
      #active {
        font-weight: bolder;
        color: black;
      }