* {
    box-sizing: border-box;
    font-size: 16px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    
 }

 body {
  background:#1d4a62;
 
}

 nav {
    margin-top:10px;
 }

#header-start {
    color: white;
    margin-top: 100px;
    margin-bottom: 100px;
    font-size: 7vh;
}

 :root {
    --bg: #222;
    --clr: #fff;
 }
 
 .nav-liste {
    position: relative;
    display: flex;
    gap: 50px;
 }
  ul > li {
    position: relative;
    list-style: none;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; 
    transition: 0.5s;
 }
 nav> ul > li::before {
    content: '';
    position: absolute;
    inset: 30px;
    box-shadow: 0 0 0 10px var(--clr),
                0 0 0 20px var(--bg),
                0 0 0 22px var(--clr);
    transition: 0.5s;
 }
 nav > ul > li:hover::before {
    inset: 15px;
 }
 nav > ul > li::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg);
    transform: rotate(45deg);
    transition: 0.5s;
 }
 nav > ul > li:hover::after {
    inset: 0px;
    transform: rotate(0deg);
 }
 nav > ul >li > a {
    position: relative;
    text-decoration: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 nav ul li a i {
    font-size: 2em;
    transition: 0.5s;
    color: var(--clr);
    opacity: 1;
 }
 ul li:hover a i {
    color: var(--clr);
    transform: translateY(-40%);
 }
 ul li a span {
    position: absolute;
    font-family: sans-serif;
    color: var(--clr);
    opacity: 0;
    transition: 0.5s;
    transform: scale(0) translateY(200%);
 }
 ul li:hover a span {
    opacity: 1;
    transform: scale(1) translateY(100%);
 }
 ul li:hover a i,
 ul li a span {
    filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
 }

  .container{
    width:50%;
    height:700px;
    position: relative;
    left: 600px;
  
    
  }
  .compu{
    position:absolute;
    width:450px;
    height:291px;
    background:#5f666f;
    border-radius:12px;
    margin:0 251px;
    border-bottom:70px solid #b6b8b3;
  }
  .compu::before{
    content:"";
    display:block;
   border-bottom: 70px solid #7d939a;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      height: 0;
      width: 75px;
    margin:360px 162px
  }
  .compu::after{
    content:"";
    display:block;
    width:152px;
    height:12px;
    background:#b6b8b3;
    margin:-370px 152px;
    border-radius:3px;
  }
  .brow{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:100%;
    background:lightblue;
    margin:-765px 241px;
    z-index:3;
  }
  .brow::before{
   content:"";
    display:block;
    width:12px;
    height:12px;
    border-radius:100%;
    background:pink;
    margin:0px 21px;
    z-index:3;
  }
  .brow::after{
   content:"";
    display:block;
    width:12px;
    height:12px;
    border-radius:100%;
    background:lightgreen;
    margin:-12px 43px;
    z-index:3;
  }
  .a{
    position:absolute;
    width:201px;
    height:271px;
    background:#222d41;
   margin:-770px 21px;
  }
  .a::before{
    content:"</>";
    font-family:verdana;
    color:white;
    display:block;
    width:201px;
    height:21px;
    background:rgba(0,0,0,.3);
  }
  .b{
    position:absolute;
    width:201px;
    height:271px;
    background:#ebf4ff;
   margin:-770px 231px;
  }
  .b::before{
    content:"";
  
    color:black;
    display:block;
    width:201px;
    height:21px;
    background:rgba(0,0,0,.3);
  }
  
  
  .l1{
    position:absolute;
    width:30px;
    height:7px;
    background:#e35a5a;
    margin:30px 21px;
    animation: l1 3s linear infinite;
    -moz-animation: l1 3s linear infinite;
     -webkit-animation: l1 3s linear infinite;
  }
  .l2{
    position:absolute;
    width:50px;
    height:7px;
    background:#df9935;
    margin: 40px 21px;
    animation: l2 3s linear infinite;
    -moz-animation: l2 3s linear infinite;
     -webkit-animation: l2 3s linear infinite;
  }
  .l3{
    position:absolute;
    width:21px;
    height:7px;
    background:white;
    margin:50px 21px;
    animation: l3 3s linear infinite;
    -moz-animation: l3 3s linear infinite;
     -webkit-animation: l3 3s linear infinite;
  }
  .l4{
    position:absolute;
    width:70px;
    height:7px;
    background:#9e9e9e;
    margin: 83px 19px;
    animation: l4 3s linear infinite;
    -moz-animation: l4 3s linear infinite;
     -webkit-animation: l4 3s linear infinite;
  }
  .l4::before{
    content:"";
    display:block;
    width:70px;
    height:7px;
    background:#9e9e9e;
    margin: 0px 90px;
    animation: l4 3s linear infinite;
    -moz-animation: l4 3s linear infinite;
     -webkit-animation: l4 3s linear infinite;
  }
  .l5{
    position:absolute;
   
    width:40px;
    height:7px;
    background:#e35a5a;
    margin:121px 21px;
     animation: l5 3s linear infinite;
    -moz-animation: l5 3s linear infinite;
     -webkit-animation: l5 3s linear infinite;
  }
  .l5::before{
    content:"";
    display:block;
    width:40px;
    height:7px;
    background:#df9935;
    margin: 0px 60px;
    animation: l5 3s linear infinite;
    -moz-animation: l5 3s linear infinite;
     -webkit-animation: l5 3s linear infinite;
  }
  .l5::after{
    content:"";
    display:block;
    width:40px;
    height:7px;
    background:#00aaef;
    margin: -7px 121px;
    animation: l5 3s linear infinite;
    -moz-animation: l5 3s linear infinite;
     -webkit-animation: l5 3s linear infinite;
  }
  
  .l6{
    position:absolute;
    width:70px;
    height:7px;
    background:gray;
    margin:152px 21px;
     animation: l6 3s linear infinite;
    -moz-animation: l6 3s linear infinite;
     -webkit-animation: l6 3s linear infinite;
  }
  .l6::before{
    content:"";
   display:block;
    width:30px;
    height:7px;
    background:gray;
    margin:0px 80px;
    animation: l66 3s linear infinite;
    -moz-animation: l66 3s linear infinite;
     -webkit-animation: l66 3s linear infinite;
  }
  
  .l7{
    position:absolute;
    width:162px;
    height:7px;
    background:#00aaef;
    margin:212px 21px;
    animation: l7 3s linear infinite;
    -moz-animation: l7 3s linear infinite;
     -webkit-animation: l7 3s linear infinite;
  }
  .d1{
    position:absolute;
    width:201px;
    height:50px;
    background:#e35a5a;
    animation: d1 3s linear infinite;
    -moz-animation: d1 3s linear infinite;
     -webkit-animation: d1 3s linear infinite;
  }
  .d2{
    position:absolute;
    width:201px;
    height:30px;
    background:#df9935;
    margin:50px 0;
    animation: d2 3s linear infinite;
    -moz-animation: d2 3s linear infinite;
     -webkit-animation: d2 3s linear infinite;
  }
  .d3{
    position:absolute;
    width:40px;
    height:12px;
    background:white;
    margin:57px 5px;
     animation: d3 3s linear infinite;
    -moz-animation: d3 3s linear infinite;
     -webkit-animation: d3 3s linear infinite;
  }
  .d3::before{
    content:"";
    display:block;
    width:40px;
    height:12px;
    background:white;
    margin:0px 75px;
    animation: d3 3s linear infinite;
    -moz-animation: d3 3s linear infinite;
     -webkit-animation: d3 3s linear infinite;
  }
  .d3::after{
    content:"";
    display:block;
    width:40px;
    height:12px;
    background:white;
    margin:-12px 150px;
    animation: d3 3s linear infinite;
    -moz-animation: d3 3s linear infinite;
     -webkit-animation: d3 3s linear infinite;
  }
  .d4{
    position:absolute;
    width:40px;
    height:40px;
    background:#e35a5a;
    margin:121px 5px;
     animation: d5 3s linear infinite;
    -moz-animation: d5 3s linear infinite;
     -webkit-animation: d5 3s linear infinite;
  }
  .d4::before{
    content:"";
   display:block;
    width:40px;
    height:40px;
    background:#df9935;
    margin:0px 75px;
     animation: d5 3s linear infinite;
    -moz-animation: d5 3s linear infinite;
     -webkit-animation: d5 3s linear infinite;
  }
  .d4::after{
    content:"";
   display:block;
    width:40px;
    height:40px;
    background:#00aaef;
    margin:-40px 152px;
     animation: d5 3s linear infinite;
    -moz-animation: d5 3s linear infinite;
     -webkit-animation: d5 3s linear infinite;
  }
  .d5{
    position:absolute;
    width:201px;
    height:50px;
    background:#00aaef;
    margin:199px 0px;
    animation: d7 3s linear infinite;
    -moz-animation: d7 3s linear infinite;
     -webkit-animation: d7 3s linear infinite;
  }
  @-webkit-keyframes l1 {
    0% {opacity: 0;}
    25% {opacity: 0;width:0;height:7;}
    35% {opacity: 1;width:30px;height:7px;}
    40% {opacity: 1;width:30px;height:7px;
    }
     45% {opacity: 1;
      width:30px;
      height:7px;
    }
     50% {opacity: 1;
      width:30px;
      height:7px;
    }
    60% {opacity: 1;
      width:30px;
      height:7px;
    }
    70% {opacity: 1;
      width:30px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @-moz-keyframes l1 {
    0% {opacity: 0;}
    25% {opacity: 0;width:0;height:7;}
    35% {opacity: 1;width:30px;height:7px;}
    40% {opacity: 1;width:30px;height:7px;
    }
     45% {opacity: 1;
      width:30px;
      height:7px;
    }
     50% {opacity: 1;
      width:30px;
      height:7px;
    }
    60% {opacity: 1;
      width:30px;
      height:7px;
    }
    70% {opacity: 1;
      width:30px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @keyframes l1 {
    0% {opacity: 0;}
    25% {opacity: 0;width:0;height:7;}
    35% {opacity: 1;width:30px;height:7px;}
    40% {opacity: 1;width:30px;height:7px;
    }
     45% {opacity: 1;
      width:30px;
      height:7px;
    }
     50% {opacity: 1;
      width:30px;
      height:7px;
    }
    60% {opacity: 1;
      width:30px;
      height:7px;
    }
    70% {opacity: 1;
      width:30px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @-webkit-keyframes l2{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 1;
      width:50px;
      height:7px;
    }
     45% {opacity: 1;
      width:50px;
      height:7px;
    }
     50% {opacity: 1;
      width:50px;
      height:7px;
    }
    60% {opacity: 1;
      width:50px;
      height:7px;
    }
    70% {opacity: 1;
      width:50px;
      height:7px;}
     80% {opacity: 1;
       width:50px;
      height:7px;}
     85% {opacity: 1;
       width:50px;
      height:7px;}
     90% {opacity: 1;
       width:50px;
      height:7px;}
     95% {opacity: 1;
       width:50px;
      height:7px;}
    100% {opacity: 1;  width:50px;
      height:7px;}
  }
  @-moz-keyframes l2{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 1;
      width:50px;
      height:7px;
    }
     45% {opacity: 1;
      width:50px;
      height:7px;
    }
     50% {opacity: 1;
      width:50px;
      height:7px;
    }
    60% {opacity: 1;
      width:50px;
      height:7px;
    }
    70% {opacity: 1;
      width:50px;
      height:7px;}
     80% {opacity: 1;
       width:50px;
      height:7px;}
     85% {opacity: 1;
       width:50px;
      height:7px;}
     90% {opacity: 1;
       width:50px;
      height:7px;}
     95% {opacity: 1;
       width:50px;
      height:7px;}
    100% {opacity: 1;  width:50px;
      height:7px;}
  }
  @keyframes l2{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 1;
      width:50px;
      height:7px;
    }
     45% {opacity: 1;
      width:50px;
      height:7px;
    }
     50% {opacity: 1;
      width:50px;
      height:7px;
    }
    60% {opacity: 1;
      width:50px;
      height:7px;
    }
    70% {opacity: 1;
      width:50px;
      height:7px;}
     80% {opacity: 1;
       width:50px;
      height:7px;}
     85% {opacity: 1;
       width:50px;
      height:7px;}
     90% {opacity: 1;
       width:50px;
      height:7px;}
     95% {opacity: 1;
       width:50px;
      height:7px;}
    100% {opacity: 1;  width:50px;
      height:7px;}
  }
  @-webkit-keyframes l3{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 1;
      width:21px;
      height:7px;
    }
     50% {opacity: 1;
      width:21px;
      height:7px;
    }
    60% {opacity: 1;
      width:21px;
      height:7px;
    }
    70% {opacity: 1;
      width:21px;
      height:7px;}
     80% {opacity: 1;
       width:21px;
      height:7px;}
     85% {opacity: 1;
       width:21px;
      height:7px;}
     90% {opacity: 1;
       width:21px;
      height:7px;}
     95% {opacity: 1;
       width:21px;
      height:7px;}
    100% {opacity: 1;  width:21px;
      height:7px;}
  }
  @-moz-keyframes l3{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 1;
      width:21px;
      height:7px;
    }
     50% {opacity: 1;
      width:21px;
      height:7px;
    }
    60% {opacity: 1;
      width:21px;
      height:7px;
    }
    70% {opacity: 1;
      width:21px;
      height:7px;}
     80% {opacity: 1;
       width:21px;
      height:7px;}
     85% {opacity: 1;
       width:21px;
      height:7px;}
     90% {opacity: 1;
       width:21px;
      height:7px;}
     95% {opacity: 1;
       width:21px;
      height:7px;}
    100% {opacity: 1;  width:21px;
      height:7px;}
  }
  @keyframes l3{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 1;
      width:21px;
      height:7px;
    }
     50% {opacity: 1;
      width:21px;
      height:7px;
    }
    60% {opacity: 1;
      width:21px;
      height:7px;
    }
    70% {opacity: 1;
      width:21px;
      height:7px;}
     80% {opacity: 1;
       width:21px;
      height:7px;}
     85% {opacity: 1;
       width:21px;
      height:7px;}
     90% {opacity: 1;
       width:21px;
      height:7px;}
     95% {opacity: 1;
       width:21px;
      height:7px;}
    100% {opacity: 1;  width:21px;
      height:7px;}
  }
  @-webkit-keyframes l4{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 1;
      width:70px;
      height:7px;
    }
    60% {opacity: 1;
      width:70px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @-moz-keyframes l4{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 1;
      width:70px;
      height:7px;
    }
    60% {opacity: 1;
      width:70px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @keyframes l4{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 1;
      width:70px;
      height:7px;
    }
    60% {opacity: 1;
      width:70px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @-webkit-keyframes  l5{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 1;
      width:40px;
      height:7px;
    }
    70% {opacity: 1;
      width:40px;
      height:7px;}
     80% {opacity: 1;
       width:40px;
      height:7px;}
     85% {opacity: 1;
       width:40px;
      height:7px;}
     90% {opacity: 1;
       width:40px;
      height:7px;}
     95% {opacity: 1;
       width:40px;
      height:7px;}
    100% {opacity: 1;  width:40px;
      height:7px;}
  }
  @-moz-keyframes  l5{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 1;
      width:40px;
      height:7px;
    }
    70% {opacity: 1;
      width:40px;
      height:7px;}
     80% {opacity: 1;
       width:40px;
      height:7px;}
     85% {opacity: 1;
       width:40px;
      height:7px;}
     90% {opacity: 1;
       width:40px;
      height:7px;}
     95% {opacity: 1;
       width:40px;
      height:7px;}
    100% {opacity: 1;  width:40px;
      height:7px;}
  }
  @keyframes  l5{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 1;
      width:40px;
      height:7px;
    }
    70% {opacity: 1;
      width:40px;
      height:7px;}
     80% {opacity: 1;
       width:40px;
      height:7px;}
     85% {opacity: 1;
       width:40px;
      height:7px;}
     90% {opacity: 1;
       width:40px;
      height:7px;}
     95% {opacity: 1;
       width:40px;
      height:7px;}
    100% {opacity: 1;  width:40px;
      height:7px;}
  }
  @-webkit-keyframes l6 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @-moz-keyframes l6 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @keyframes l6 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 1;
      width:70px;
      height:7px;}
     80% {opacity: 1;
       width:70px;
      height:7px;}
     85% {opacity: 1;
       width:70px;
      height:7px;}
     90% {opacity: 1;
       width:70px;
      height:7px;}
     95% {opacity: 1;
       width:70px;
      height:7px;}
    100% {opacity: 1;  width:70px;
      height:7px;}
  }
  @-webkit-keyframes l66 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @-moz-keyframes l66 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @keyframes l66 {
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 1;
       width:30px;
      height:7px;}
     85% {opacity: 1;
       width:30px;
      height:7px;}
     90% {opacity: 1;
       width:30px;
      height:7px;}
     95% {opacity: 1;
       width:30px;
      height:7px;}
    100% {opacity: 1;  width:30px;
      height:7px;}
  }
  @-webkit-keyframes  l7{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 0;
       width:0px;
      height:7px;}
    
     85% {opacity: 1;
       width:132px;
      height:7px;}
     90% {opacity: 1;
       width:132px;
      height:7px;}
     95% {opacity: 1;
       width:132px;
      height:7px;}
    100% {opacity: 1;  width:132px;
      height:7px;}
  }
  @-moz-keyframes  l7{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 0;
       width:0px;
      height:7px;}
    
     85% {opacity: 1;
       width:132px;
      height:7px;}
     90% {opacity: 1;
       width:132px;
      height:7px;}
     95% {opacity: 1;
       width:132px;
      height:7px;}
    100% {opacity: 1;  width:132px;
      height:7px;}
  }
  @keyframes  l7{
    0% {opacity: 0;}
    25% {opacity: 0;
      width:0;
      height:7;}
    
    35% {opacity: 0;
      width:0px;
      height:7px;
    }
    40% {opacity: 0;
      width:0px;
      height:7px;
    }
     45% {opacity: 0;
      width:0px;
      height:7px;
    }
     50% {opacity: 0;
      width:0px;
      height:7px;
    }
    60% {opacity: 0;
      width:0px;
      height:7px;
    }
    70% {opacity: 0;
      width:0px;
      height:7px;}
     80% {opacity: 0;
       width:0px;
      height:7px;}
    
     85% {opacity: 1;
       width:132px;
      height:7px;}
     90% {opacity: 1;
       width:132px;
      height:7px;}
     95% {opacity: 1;
       width:132px;
      height:7px;}
    100% {opacity: 1;  width:132px;
      height:7px;}
  }
  @-webkit-keyframes d1 {
    0% {opacity: 0;}
    25% {opacity: 0;
     }
    
    35% {opacity: 1;
     
    }
    40% {opacity: 1;
      
    }
     45% {opacity: 1;
      
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  
  }
  }
  @-moz-keyframes d1 {
    0% {opacity: 0;}
    25% {opacity: 0;
     }
    
    35% {opacity: 1;
     
    }
    40% {opacity: 1;
      
    }
     45% {opacity: 1;
      
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  
  }
  }
  @keyframes d1 {
    0% {opacity: 0;}
    25% {opacity: 0;
     }
    
    35% {opacity: 1;
     
    }
    40% {opacity: 1;
      
    }
     45% {opacity: 1;
      
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  
  }
  }
    @-webkit-keyframes d2{
    0% {opacity: 0;}
    25% {opacity: 0; }
    
    35% {opacity: 0;}
    40% {opacity: 1;}
     45% {opacity: 1;}
     50% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 1;}
     80% {opacity: 1;}
     85% {opacity: 1;
      }
      90% {opacity: 1;}
      
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @-moz-keyframes d2{
    0% {opacity: 0;}
    25% {opacity: 0; }
    
    35% {opacity: 0;}
    40% {opacity: 1;}
     45% {opacity: 1;}
     50% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 1;}
     80% {opacity: 1;}
     85% {opacity: 1;
      }
      90% {opacity: 1;}
      
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @keyframes d2{
    0% {opacity: 0;}
    25% {opacity: 0; }
    
    35% {opacity: 0;}
    40% {opacity: 1;}
     45% {opacity: 1;}
     50% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 1;}
     80% {opacity: 1;}
     85% {opacity: 1;
      }
      90% {opacity: 1;}
      
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
   @-webkit-keyframes d3{
    0% {opacity: 0;}
    25% {opacity: 0;}
    
    35% {opacity: 0;}
    40% {opacity: 0;
      
    }
     45% {opacity: 1;
     
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
    }
     80% {opacity: 1;
       }
     85% {opacity: 1;
      }
     90% {opacity: 1;
     }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @-moz-keyframes d3{
    0% {opacity: 0;}
    25% {opacity: 0;}
    
    35% {opacity: 0;}
    40% {opacity: 0;
      
    }
     45% {opacity: 1;
     
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
    }
     80% {opacity: 1;
       }
     85% {opacity: 1;
      }
     90% {opacity: 1;
     }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @keyframes d3{
    0% {opacity: 0;}
    25% {opacity: 0;}
    
    35% {opacity: 0;}
    40% {opacity: 0;
      
    }
     45% {opacity: 1;
     
    }
     50% {opacity: 1;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
    }
     80% {opacity: 1;
       }
     85% {opacity: 1;
      }
     90% {opacity: 1;
     }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  
  @-webkit-keyframes d5 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
     
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
     }
     90% {opacity: 1;
     }
     95% {opacity: 1;
     }
    100% {opacity: 1; }
  }
  @-moz-keyframes d5 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
     
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
     }
     90% {opacity: 1;
     }
     95% {opacity: 1;
     }
    100% {opacity: 1; }
  }
  @keyframes d5 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
     
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 1;
      
    }
    70% {opacity: 1;
      }
     80% {opacity: 1;
     }
     85% {opacity: 1;
     }
     90% {opacity: 1;
     }
     95% {opacity: 1;
     }
    100% {opacity: 1; }
  }
  @-moz-keyframes d7 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
     
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
      
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 0;
      
    }
    70% {opacity: 0;
     }
     80% {opacity: 0;
     }
    
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @-webkit-keyframes d7 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
     
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
      
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 0;
      
    }
    70% {opacity: 0;
     }
     80% {opacity: 0;
     }
    
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
  @keyframes d7 {
    0% {opacity: 0;}
    25% {opacity: 0;
      }
    
    35% {opacity: 0;
      
     
    }
    40% {opacity: 0;
     
    }
     45% {opacity: 0;
      
    }
     50% {opacity: 0;
      
    }
    60% {opacity: 0;
      
    }
    70% {opacity: 0;
     }
     80% {opacity: 0;
     }
    
     85% {opacity: 1;
       }
     90% {opacity: 1;
       }
     95% {opacity: 1;
       }
    100% {opacity: 1;  }
  }
/*ENDE COMPUTER*/


  /*SCROLLKASTEN*/
  main {
    margin-top:0px;
    background-color: #000;
    color: #fff;
    font-family: sans-serif;
    line-height: 1.6;
    background: radial-gradient(ellipse at top center, #310038 0%, #000000 100%);
    background-size: cover;
    min-height: 100vh;
    margin: 0;
}

.scroller {
    overflow: auto;
    padding: 1rem;
    scroll-timeline-name: --scroller;
    scroll-timeline-axis: inline;
}

ol,
ul {
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 1rem;
    display: flex;
    gap: 1rem;
    list-style: none;
    padding-left: 0;
    counter-reset: list-item;
    perspective: 9000px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;

    > li {
        flex: 1 1 240px;
        min-width: 240px;
        border: 1px solid currentColor;
        padding: 1rem;
        animation: auto ease-in-out intro forwards,
            auto ease-in-out outro forwards;
        animation-timeline: view(inline);
        animation-range: entry, exit;
        transform-origin: bottom center;
    }

    p,
    h2 {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    h2 {
        color: #aaa;
        font-weight: normal;
    }
}

ol > li {
    display: flex;
    flex-direction: column;
    color: #ccc;
    position: relative;
    overflow: hidden;

    &::before {
        counter-increment: list-item;
        content: counter(list-item) ".";
        font-size: 5em;
        font-weight: bold;
        color: #fff;
        margin-bottom: 1rem;
        line-height: 1;
    }

    &::after {
        content: "";
        background-image: var(--bg);
        position: absolute;
        inset: -20px;
        background-size: cover;
        transform: scale(1);
        transition: transform 0.5s ease-out, opacity 0.4s linear;
        opacity: 0;
        z-index: -1;
    }

    &:hover {
        color: #fff;
        &::after {
            transform: scale(1.1) rotate(4deg);
            opacity: 0.8;
        }
    }
}

@keyframes intro {
    from {
        transform-origin: center left;
        opacity: 0;
        scale: 0;
        rotate: z -90deg;
        translate: 0 -100%;
    }
    to {
        transform-origin: center left;
        opacity: 1;
        scale: 1;
        rotate: z 0deg;
        translate: 0 0;
    }
}

@keyframes outro {
    from {
        transform-origin: center right;
        opacity: 1;
        scale: 1;
        translate: 0 0;
    }
    to {
        transform-origin: center right;
        opacity: 0;
        scale: 0;
        translate: 0 100%;
    }
}