body{
    

    background-color: black;
    background-image:url(ass/cups/cupssmiley.gif);
    
}

header{
   color: aliceblue;
 }

 .banner{
    width: 100%;
    
 }
 
.banner:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  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); }
}

main{
  #cuppies{
    margin: 10px;
    height: 150px;
  }

  .container{
    width: 80%;
    height: 500px;
    margin: auto;
    border-color: aliceblue;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    overflow:scroll;
    background-color: rgb(0, 0, 145);
    background-image: url(ass/cups/cupssparkle.gif);

    #cuppsinbox{
        width: 19%;
    }

    #collector{
        width: 40%;
    }

  }


   

 }