/*  JavaScript 7th Edition
    Chapter 5
    Hands-on Project 5-2

    Filename: styles.css
*/

/* apply a natural box layout model to all elements */
* {
   box-sizing: border-box;
}

/* reset rules */
html, body, div, span, img, h1, h2, p, ol {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif; 
}

header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
}

article {
   width: 960px;
   text-align: left;
   background: #FFDB70;
   position: relative;
   padding: 20px;
}

#container {
   display: flex;
   justify-content: space-between;
}

#instructions {
   width: 340px;
}

#photo_bucket {
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
}

#photo_bucket img {
   cursor: pointer;
   width: 80px; /* Adjust size as needed */
   height: auto;
   margin: 5px;
}

#photorank {
   width: 580px;
}

ol {
   line-height: 2;
   list-style: decimal;
   padding-left: 20px;
}

ol li {
   margin: 5px 0;
}

/* Add this rule for images in the ranked list */
ol li img {
   width: 100px; 
   height: auto; 
}