html {
    font-family: 'Comic Sans MS';
}
/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #000000; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(255, 0, 149); 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(195, 0, 255); 
  }
.gallery {
    margin:0;
}
.yeartitle {
    color:white;
    text-shadow: -1px 0 rgb(35, 82, 106), 0 1px rgb(179, 218, 152), 1px 0 rgb(154, 247, 222), 0 -1px rgb(255, 217, 0), 2px 2px 4px #1c0069
}
.yearnav {
    font-size: 18px;
    background-color: #81fbff34;
    margin:0;
    padding:2px;
    padding-bottom: 5px;
    margin-left:405px;
    margin-right:405px;
    border:3px dotted #00ffd5;
    border-radius:30px;
    box-shadow:2px 2px 4px #0073df,2px -2px 4px #0073df,-2px 2px 4px #0073df,-2px -2px 4px #0073df;
    color:white;
    text-shadow: -1px 0 rgb(35, 82, 106), 0 1px rgb(179, 218, 152), 1px 0 rgb(154, 247, 222), 0 -1px rgb(255, 217, 0), 2px 2px 4px #1c0069
}
.artpic {
    background:rgba(229, 229, 255, 0.288);
    border-radius: 30px;
    image-rendering:auto;
}
.artpic:hover {
    animation: shake 2s;
    animation-iteration-count: infinite; 
}
#gallery {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-template-rows: masonry;
 }
 #gallery img {
    width:100%;
    height: auto;
 }


 @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, 0px) rotate(-1deg); }
  }