/* * {
  box-sizing: border-box;
} */
::-webkit-scrollbar {
  background-color: transparent;
} 
body::-webkit-scrollbar-track {
  background-color: transparent;
} 
body::-webkit-scrollbar-thumb {
  background-color: transparent;
}
body {
  background-color: pink;
  background-image: url(/images/mustafar-duel.png),url(/images/pattern/hello.jpg), url(/images/redheart.png);
  background-blend-mode: overlay;
  cursor: url(https://cur.cursors-4u.net/anime/ani-9/ani863.cur), default !important;
}
p {
  font-size: 1.5rem;
}
.ach, .span {
  height: 5vh; 
  animation: shakira 0.5s infinite;
  text-shadow: red 2px 3px 2px, black 4px 2px 3px;
}
@keyframes shakira {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }

  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
#flex {
  display: flex;
}
aside { 
  width: 200px;
  padding: 20px;
  font-size: smaller;
}
main {
  
  flex: 1;
  padding: 20px;
  order: 2;
}

#leftSidebar {
  order: 1;
  
}

#rightSidebar {
  order: 3;
  overflow: auto;
}
.sidebar {
  margin-left: 0px;
  background-image: url(/images/roses.gif);
  height: 650px;
}
footer {
  width: 98%;
  height: 5em;
  padding: 10px;
  overflow: hidden;
}

h1,h2,h3 {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: pink;
  background-color: darkred;
  text-align: center;
}
h1 {
  font-size: 25px;
}

/* CSS for extras */

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}
.navph{
  height: 8em;
}
 a {
  color:rgb(216, 87, 178);
  font-size: 1.8em;
  cursor: url(https://cur.cursors-4u.net/anime/ani-9/ani863.cur), default !important;
}
a:hover {
  color: red;
}
.stamp {
  height: 5em;
}
#walter {
  height: 12em;
  animation: walter 6s infinite;
}
#walter:hover {
  -webkit-box-shadow: 1px 10px 151px -5px rgb(247, 195, 2);
    -moz-box-shadow: 1px 10px 151px -5px rgba(242,255,0,1);
    box-shadow: 1px 10px 151px -5px rgba(242,255,0,1);
}
@keyframes walter {
  0% {transform: scaleY(0); }
  50% {transform: scaleX(-1);}
  100% {transform: scaleY(0);}
}

.fall {
  display:block;
  height: 6vh;
  position: absolute;
  z-index: 100;
  background-color: red;
  animation: fall 6s infinite;
}
#a {
  left: 0; 
}
#b {
  left: 10%; animation: fall 4s infinite; background-color: orange;
}
#c {
  left: 20%; animation: fall 7s infinite; background-color:yellow;
}
#d {
  left: 40%; animation: fall 5s infinite; background-color: yellowgreen;
}
#e { 
  left: 60%; background-color: skyblue;
}
#f {
  left: 80%; animation: fall 4s infinite; background-color: plum;
}
#g {
  left: 85%; animation: fall 8s infinite; background-color: pink;
}
::selection {
  filter: opacity(50%);
  background-color: red;
  color: orange;
}

@keyframes fall{
  0%{top:0%;}
  20% {transform: translateX(-50%);}
  50% {transform: translateX(50%);}
  80% {transform:translateX(-10%)}
  100%{top:100%; } }
  
@media only screen and (max-width: 800px) {
  #flex {
      flex-wrap: wrap;
  }

  aside {
      width: 100%;
  }
  main {
      order: 1;
  }

  #leftSidebar {
      order: 3;
  }

  #rightSidebar {
      order: 2;
  }

  #navbar ul {
      flex-wrap: wrap;
  }
}