/*    JavaScript 7th Edition
      Chapter 5
      Project 05-02

      Filename: styles.css
*/

/* General page layouts */
body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background-color: #f4f4f9;
}

header {
   background-color: #3b5998;
   color: white;
   text-align: center;
   padding: 10px 0;
   margin-bottom: 20px;
}

article {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   background: white;
   padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
}

h2 {
   color: #333;
   border-bottom: 20px;
}

/* Flexbox layout to align instructions/bucket next to the rank list */
#container {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}

#instructions {
   flex: 1.2;
   min-width: 300px;
}

#photorank {
   flex: 0.8;
   min-width: 250px;
   background-color: #fafafa;
   padding: 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
}

/* Photo Bucket Setup */
#photo_bucket {
   background-color: #eef1f5;
   padding: 15px;
   border: 2px dashed #99aab8;
   border-radius: 6px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   min-height: 120px;
}

/* Image Item Styles */
#photo_bucket img, #photo_list img {
   width: 100px;
   height: 75px;
   object-fit: cover;
   border-radius: 4px;
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0,0,0,0.15);
   transition: transform 0.2s, box-shadow 0.2s;
}

#photo_bucket img:hover, #photo_list img:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Photo List Styling */
#photo_list {
   padding-left: 25px;
}

#photo_list li {
   margin-bottom: 15px;
   font-weight: bold;
   color: #555;
}