/* From Uiverse.io by vk-uiux */ 
#checkbox {
    display: none;
  }
  
  .toggle {
    position: relative;
    width: 35px;
    cursor: pointer;
    margin: auto;
    display: block;
    height: calc(4px * 3 + 11px * 2);
  }
  
  .bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    
    border-radius: calc(4px / 2);
    background: #7b52b9;
    color: inherit;
    opacity: 1;
    transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
  }
  
  /***** Tornado Animation *****/
  
  .bar--top {
    bottom: calc(50% + 7px + 4px/ 2);
    transition-property: bottom,transform;
    transition-delay: calc(0s + 0.35s) * .6;
  }
  
  .bar--middle {
    top: calc(50% - 4px/ 2);
    transition-property: opacity,transform;
    transition-delay: calc(0s + 0.35s * .3);
  }
  
  .bar--bottom {
    top: calc(50% + 7px + 4px/ 2);
    transition-property: top,transform;
    transition-delay: 0s;
  }
  
  #checkbox:checked + .toggle .bar--top {
    transform: rotate(-135deg);
    transition-delay: 0s;
    bottom: calc(50% - 4px/ 2);
  }
  
  #checkbox:checked + .toggle .bar--middle {
    opacity: 0;
    transform: rotate(-135deg);
    transition-delay: calc(0s + 0.35s * .3);
  }
  
  #checkbox:checked + .toggle .bar--bottom {
    top: calc(50% - 4px/ 2);
    transform: rotate(-225deg);
    transition-delay: calc(0s + 0.35s * .6);
  }




  /* Geekboy :start */
.geekboy {
  color: #fff;
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: bold;
  font-size: 20px;
 }
.geekboy img {
    /* width:40px; */
}
.geekboy span {
  display: inline-block;
  opacity: 0.8;
  color:#fff;
  animation: pulse 0.4s alternate infinite ease-in-out;
}
.geekboy span:nth-child(odd) {
  animation-delay: 0.4s;
  z-index: 1100;
}
@keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
.geekboy.hidden {
  animation: fadeOut 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}







.sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  transition: left 0.3s ease-in-out;
  z-index: 1000;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.sidebar.open {
  left: 0;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  z-index: 999;
}

.sidebar-overlay.open {
  display: block;
}