/** ####### RESET ####### **/
* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    border-radius: 1%;
}
a:link, a:visited, a:active {
    text-decoration:underline;
}
a:link {
    color:rgba(2, 83, 2,1);
}
a:visited {
    color:rgba(90, 48, 189, 1);
}
a:hover {
    font-weight:bolder;
    color:rgba(3, 150, 77, 0.8);
}
article {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 1em;
    padding:1%;
    margin-top: 1%;
    margin-bottom: 2%;
    animation: slide 1.4s linear;
}
html {
    height:100%;
}
body {
  background-image:linear-gradient(to left, rgba(221, 243, 124,0.3),rgba(0,0,255,0.2));
  width: 100%;
  height:max-content;
  font-family: 'Courier New', Courier, monospace;
}
footer {
    background-image:linear-gradient(200deg, rgba(221, 243, 124,0.3),rgba(0,0,255,0.2));
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}
footer a:link {
    text-decoration: none;
}
footer p {
    width:100%;
    line-height: 1.2em;
    font-size: 1.2em;
    background-image:linear-gradient(181.50deg, rgba(221, 243, 124,0.3),rgba(0,0,255,0.8));
    background-blend-mode: color-burn;
    border-top:2px solid;
    border-right:1px solid;
    border-radius: 4%;
    border-color: rgba(221, 243, 124,0.9);
    color: rgba(255,255,255,0.5);
    padding-top: 1%;
    margin:0 auto;
}
footer span {
    width: 100%;
    border-radius: 2%;
    text-align: center;
}
footer span:hover, footer p:hover {
    color:rgb(53, 1, 53);
    border-color:rgba(255, 255, 0,0.7);
    opacity: 0.9;
}

h3, h4 {
    padding-bottom:0.2em;
}
header {
    width:100%;
    background-image: url(../image/moc-logo.png), linear-gradient(to right, rgba(0,0,255,0.6), rgba(221, 243, 124,0.3));
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode:color-burn;
    background-position: left;
    color: rgba(255, 255, 255,1);
    padding: 4%;
    padding-right:6%;
    animation: slide 1.4s linear;
}
@keyframes slide{
    100%{
      transform: translate3d(0, 0, 0);
    }
    0%{
      transform: translate3d(-1692px, 0, 0);
    }
  }
header sub {
    font-size: 1.3em;
    color: rgba(0,255,0,1);
}
iframe {
  width:100%;
  height:300px;
  scroll-behavior:smooth;
  scrollbar-width: 1em;
  border:1px;
}
main {
    width:100%;
    height:auto;
    background-image:linear-gradient(200deg, rgba(221, 243, 124,0.3),rgba(0,0,255,0.2));
    padding-bottom:25%;
    font-size: 1.2em;
}
ul, h2 {
    width:100%;
    height:auto;
    background-image:linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(237, 243, 218,0.3));
    border-image:linear-gradient(to right, rgba(0,0,255,0.6), rgba(221, 243, 124,0.4));
    border-left: 1px solid;
    border-bottom: 2px double;
    color:rgba(0, 0, 255,0.7);
    padding-left: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    list-style: none;
}

li:hover { 
    background-image:linear-gradient(to right, rgba(0,0,255,0.8), rgba(237, 243, 218,0.3));
    color:rgba(255, 255, 255,0.9);
    opacity: 0.9;
}

hr {
  display: block;
  height: 5px;
  border: 0;
  border-top: 5px dotted rgba(0,255,0,0.2);
  border-bottom: 5px dotted rgba(0,255,0,0.2);
  padding: 0;
}
p {
  width:99%;
  line-height: 1.2em;
  background-color: rgba(237, 243, 218,0.3);
  padding: 1%;
}
section {
  padding:4%;
}
#kontakt section {
  animation: slidetop 1.4s linear;
}
@keyframes slidetop{
  100%{
    transform: translate3d(0, 0, 0);
  }
  0%{
    transform: translate3d(0, -1000px, 0);
  }
}
#impressum p, #impressum span {
    margin-bottom: 2%;
}

#person article, #impressum article {
    column-count: 3;
    column-gap: 40px;
    column-rule-style:solid;
    column-rule-color:rgba(221, 243, 124,0.8) ;
}
#person article > div {
    padding-top: 6%;
}
#person:target, #systeme:target, #code:target, #datenschutz:target, #impressum:target, #kontakt:target {display:block;}
#person, #systeme, #code, #datenschutz, #impressum, #kontakt {display:none;}
.zoom {
  transition: transform .2s;
  width: 80px;
  margin:0 auto;
  padding:2%;
}
.zoomfirst {
  transition: transform .3s;
  width: 80px;
  margin:0 auto;
  padding:2%;
}
.iFrameImpressum {
  width:300px;
  height:300px;
  border:0;
}
.wrapper {
    height: max-content;
    width: 100%;
    position: absolute;
  }
  .wrapper div {
    height: 60px;
    width: 60px;
    border: 1px solid rgba(15, 30, 243, 0.4);
    border-radius: 100%;
    position: absolute;
    top: 2%;
    left: 12%;
    animation: 4s linear infinite;
  }
  div .dot {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 20%;
    right: 20%;
  }
  .wrapper div:nth-child(1) {
    top: 20%;
    left: 20%;
    animation: animate 8s linear infinite;
  }
  .wrapper div:nth-child(2) {
    top: 60%;
    left:90%;
    animation: animate 10s linear infinite;
  }
  .wrapper div:nth-child(3) {
    top: 40%;
    left: 40%;
    animation: animate 3s linear infinite;
  }
  .wrapper div:nth-child(4) {
    top: 66%;
    left: 30%;
    animation: animate 7s linear infinite;
  }
  .wrapper div:nth-child(5) {
    top: 90%;
    left: 10%;
    animation: animate 9s linear infinite;
  }
  .wrapper div:nth-child(6) {
    top: 30%;
    left: 60%;
    animation: animate 5s linear infinite;
  }
  .wrapper div:nth-child(7) {
    top: 70%;
    left: 20%;
    animation: animate 8s linear infinite;
  }
  .wrapper div:nth-child(8) {
    top: 90%;
    left: 60%;
    animation: animate 10s linear infinite;
  }
  .wrapper div:nth-child(9) {
    top: 50%;
    left: 50%;
    animation: animate 6s linear infinite;
  }
  .wrapper div:nth-child(10) {
    top: 45%;
    left: 20%;
    animation: animate 10s linear infinite;
  }
  .wrapper div:nth-child(11) {
    top: 10%;
    left: 9%;
    animation: animate 9s linear infinite;
  }
  .wrapper div:nth-child(12) {
    top: 20%;
    left: 70%;
    animation: animate 7s linear infinite;
  }
  .wrapper div:nth-child(13) {
    top: 20%;
    left: 20%;
    animation: animate 8s linear infinite;
  }
  .wrapper div:nth-child(14) {
    top: 60%;
    left: 5%;
    animation: animate 6s linear infinite;
  }
 .wrapper div:nth-child(15) {
    top: 1%;
    left: 7%;
    animation: animate 9s linear infinite;
  }
  .wrapper div:nth-child(16) {
    top: 20%;
    left: 10%;
    animation: animate 8s linear infinite;
  }
  @keyframes animate {
    0% {
      transform: scale(0) translateY(0) rotate(70deg);
    }
    100% {
      transform: scale(1.3) translateY(-100px) rotate(360deg);
    }
  }
/*####################################
Kontaktformular
#####################################*/
.kontaktformular {
    width:100%;
    padding:1%;
    color: rgba(255, 255, 255, 1);
    background-image: 
  linear-gradient(90deg, 
        transparent 50%, 
        rgba(4, 201, 79, 1) 50%, 
        hsla(0, 50%, 0%, .5) 50%)
  ,
  linear-gradient(0deg, 
        transparent 50%, 
        rgba(74, 248, 97, 1) 100%, 
        hsla(0, 50%, 0%, .5) 50%)
,
  linear-gradient(45deg, 
        transparent 50%, 
        rgba(11, 209, 27, 0.5) 50%, 
        hsla(0, 50%, 0%, .5) 100%)
;
background-size: 3px 3px;
background-blend-mode: hard-light;
    }
.kontaktformular label {
    letter-spacing:0.5em;
    background:rgba(255, 0, 0, 0.1);
    margin-left:1%;
    padding-left:0.4%;
    font-size: larger;
    }
    .kontaktformular input, .kontaktformular textarea {
    padding:0.8%;
    margin-left:1%;
    }

fieldset {
    display:flex;
    flex-direction:column;
    padding:0.5%;
    margin:0.1%;
    }
    .absende-button {
        height:3em;
        border:0;
        background:rgba(255,215,0,0.5);
    }
    .absende-button:hover {
        cursor:pointer;
        background:rgba(255,215,0,0.9);
    }
    label:hover , summary:hover , ul:hover {
        cursor:pointer;
}
label:hover , summary:hover {
    font-weight: bolder;
    color:rgba(0,255,0,0.5);
    border-color:rgba(0,255,0,0.5);
    background:rgba(0, 0, 0, 0.5);
    }
label.content {
    width: 100%;
    top: 0;
    text-align:center;
    position: -webkit-sticky;
    position: sticky;
    outline-style:solid;
    outline-width:thin;
    outline-color: rgba(255, 0, 0,1);
    }
legend {
    background-image:linear-gradient(rgba(221, 243, 124,0.3),rgba(0,0,255,0.2));
    padding: 0.5%;
}

.datei_upload {
    width:99%;
    height:6em;
    background-image: linear-gradient(rgba(221, 243, 124,0.3),rgba(0,0,255,0.2));
    }
.datei_upload:hover {
    cursor: pointer;
    background-image: linear-gradient(rgba(221, 243, 124,0.8),rgba(0,0,255,0.2));
    }
/*######################################*/
@media screen and (max-width: 680px) {
    footer span {
        width: 100%;
    }
    footer p {
        width: 100%;
    }    
    footer {
        flex-wrap: wrap;
    }
    h1 {
      font-size: large;
    }
    #code aside > p {
      width:100%;
    }
    #person article, #impressum article {
        column-count: 1;
    }
    
    .zoom:hover, .zoomfirst:hover {
      -ms-transform: scale(1); /* IE 9 */
      -webkit-transform: scale(1); /* Safari 3-8 */
      transform: scale(1);
      width: 100%;
    }
  }
@media screen and (min-width: 681px) {
    footer p {
        width: 77%;
    }    
    #person article, #impressum article {
        column-count: 1;
    }
    main {
      padding-bottom:3%;
    }
    .zoom:hover {
      -ms-transform: scale(11); /* IE 9 */
      -webkit-transform: scale(11); /* Safari 3-8  */
      transform: scale(11);
      transform-origin:center;
    }
  .zoomfirst:hover {
    -ms-transform: scale(11); /* IE 9 */
    -webkit-transform: scale(11); /* Safari 3-8  */
    transform: scale(11);
    transform-origin:left;
  }
}
  @media screen and (min-width: 800px) {
 
    #person article, #impressum article {
        column-count: 2;
    }
  }
  @media screen and (min-width: 1300px) {
 
    #person article, #impressum article {
        column-count: 3;
    }
  }