ul{
 list-style: none; 
}
  
}
* {
  font-family: 'MoonlightRunes', sans-serif;
  font-style: italic;
  overflow-x: hidden;
}
html, body{
  height: 100%;
  margin: 0;
}
body{
        background-image: url('banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}
.klocek{
  height: 100%;
  width: 100%;
      display: flex;
      flex-direction: column;
      
}

#middle{
  flex: 7;
  align-items: center;
    background-color: none;
    align-content: center;
    justify-content: center;
    display: flex;
}
#sider2{
  background-color: none;
  flex: 6;
}
#jakisflex{
  flex: 3;
}

.blurr{
  flex: 2;
  backdrop-filter: blur(5px);
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  /*border: solid 2px White;*/

}
#Banner{
    flex: 5;
    align-items: center;
    background-color: none;
    align-content: center;
    justify-content: center;
    display: flex;
    color: White;
    font-size: 40px;

}
.sider{
      justify-content: center;
      align-items: center;
    display: flex;
    /*flex: 3;*/
    box-shadow: 2px 5px 20px 2px  #5100AA;
    background-color: #7112CC;
}
a{
     text-decoration: none;
     color: #1CDBF8;
     font-size: 25px;
     font-family: 'Press Start 2P', monospace;
     /*font-style: bold;*/
}
#glowne{
  flex: 25;
}

.pedal1{
  box-shadow: -7px -5px 40px 25px black;
  background-color: #8122DD;
  flex: 14;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
}




.wrapper{
  position:relative;
  width:300px;
  height:300px;
}


.center{
  pointer-events:none;
  width:180px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}


.circle{
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  animation:spin 10s linear infinite;
}


.item{
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
}


.item img{
  width:50px;
  transform:translate(110px,-50%) rotate(90deg);
  animation:spinReverse 10s linear infinite;
  cursor: pointer;
}



.item:nth-child(1){ transform:rotate(0deg); }
.item:nth-child(2){ transform:rotate(72deg); }
.item:nth-child(3){ transform:rotate(144deg); }
.item:nth-child(4){ transform:rotate(216deg); }
.item:nth-child(5){ transform:rotate(288deg); }

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes spinReverse{
  from{ transform:translate(90px, -50%) rotate(285deg); }
  to{ transform:translate(90px,-50%) rotate(-75deg); }
}