.sil {
  position: absolute;
  left: 45px;
  top: 100px;
  margin: -100px;
  float: left;
  animation: tilt-shaking 0.3s infinite;
}
@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.sil:hover {
  animation: none;
}
/* the absolute position and the margins somehow have this work. i also took
this code from some css playground. when it's hovered over, the animation stops,
hence the none. tap a random part of the screen to reset this and have the
animation coninue */
.stuff {
  display: flex;
  background-color: #AF1E1F;
  flex-flow: row wrap;
  width: 220px;
  height: 170px;
  float: right;
  margin: 5px 10px;
  text-align: right;
  overflow: auto;
}
 /* use widith and height to change the flexbox container. float keeps the
 container to the side. text align helps keep it to the right */
.bar {
  display: flex;
  overflow: auto;
  float: right;
  height: auto;
  width: 200px;
  margin: 5px 10px;
  white-space: nowrap;
  flex-wrap: nowrap;
  }
 .bar > a {
    flex: 0 0 auto;
  }
  /* its important to know that the overflow: auto thing is how it mainly works.
  and if your scrollbar is big, then it will require for more text before it
  atarts to act like a scrollbar. making the width bigger than the height makes
  the scrollbox horizontal and vice versa for vertical
  */ 
nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: right;
  margin: 5px 10px;
}
/* im gonna be honest idk how this worked it just worked.
*/
ul {
  list-style-type: none;
  overflow: hidden;
  background-color: #AF1E1F;
  display: flex;
  flex-flow: row nowrap;
  width: 70px;
  height: 20px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
ul li {
  border-left: 2px dotted black;
  flex: 1;
  text-align: center;
  margin: 0;
  }
ul li:first-child {
  border-left: none;
}
 ul li:last-child  {
   border-left: none;
 }
 /* the first and last child thing is so that the firat and last part of the nav
 bar list doesnt have the border 
 */
a:link {
  color: #D359A8;
  }
  a:visit {
    color: white;
  }
  a:visited {
    color: white;
  }
    a:hover {
    color: white;
  }
  a:active {
    color: white;
  }
.barrio-regular {
  font-family: "Barrio", system-ui;
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "Barrio", "Times New Roman";
}
.blinkies {
  display: flex;
  float: right;
  flex-flow: column nowrap;
  height: auto;
  width: 200px;
  margin: 5px 10px;
}
body {
  background-image: linear-gradient(#D359A8, #AF1E1F);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* the attachment fixed part is the key if you want your background to stretch
*/