/* CSS Document */
html, body, .container, .placeholder { height: 100%;}
.container { text-align:center; }
.placeholder, .wrapper, .content { vertical-align: middle; }
.placeholder, .wrapper { display: inline-block; }
.content { display:inline; }

.animate-bounce {
  animation: ui-bounce 0.3s ease-out;
}

.animate-bounce-out {
  animation: ui-bounce-out 0.3s ease-in;
}
@keyframes ui-bounce {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-100px); } /* Initial up-bounce */
  40%  { transform: translateY(0); }     /* Fall down */
  60%  { transform: translateY(-10px); } /* Smaller bounce */ 
  90%  { transform: translateY(-4px); }  /* Tiny micro-bounce */
  100% { transform: translateY(0); }     /* Settle */
}
@keyframes ui-bounce-out {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(50px); } /* Initial up-bounce */
  40%  { transform: translateY(0); }     /* Fall down */
  60%  { transform: translateY(-10px); } /* Smaller bounce */
  80%  { transform: translateY(0); }     /* Fall down */
  90%  { transform: translateY(-4px); }  /* Tiny micro-bounce */
  100% { transform: translateY(0); }     /* Settle */
}	

#duck{
display: grid;
place-items: start;
filter: drop-shadow(8px 8px 20px black);
visibility: hidden;
}

#duck img {
grid-area: 1 / 1;
}

#gallery {
display: none;
width: 475px;
overflow-x: scroll;
white-space: nowrap;
}

.gallery-thumbnail {
filter: grayscale(100%);
padding: 5px;
width: 80px;
height: 100px;
box-shadow: 2px 4px 9px rgba(0, 0, 0, 0.7);
}

#header{
position: absolute;	
opacity: 0.5;

}

#refreshBtn{
cursor: default;
padding-top: 50px;
opacity: 0.7;
filter: drop-shadow(2px 2px 4px black);
}	
	
.spinning-image {
	position: absolute;

  animation: spin 30s linear infinite; 
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}