#pic {
   width: 512px;
   height: 512px;
   object-fit:cover;
}

body {
   margin: 0;
   font-family: 'Chewy', cursive;
   background: #fff0f5;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 100px; 
}

.container {
   position: relative;
   display: flex;
   justify-content: center; 
   align-items: flex-start;
   margin-top: 10px;
}

h1 {
   font-size: 3rem;   
   font-weight: bold;
   text-align: center;
   margin: 0;
   text-shadow: 0 0 8px #ffffff;
}

button#refreshBtn {
   background: linear-gradient(145deg, #d6c5b8, #bfa895);
   border: none;
   border-radius: 10px;
   color: white;
   font-size: 1rem;       
   font-weight: bold;
   padding: 8px 16px;      
   cursor: pointer;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: all 0.2s ease-in-out;
   margin-top: 20px;      
}

button#refreshBtn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

button#refreshBtn:active {
   transform: translateY(1px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button#refreshBtn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   box-shadow: none;
}