/* 
    Chapter 5-Project 05-02
    Author: Sam Yalda
    Date: 03/22/2026
*/

* {
   box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font: inherit;
   vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

ol, ul {
   list-style: none;
}

header {
   width: 100%;
   background-color: #2d73b9;
   color: white;
   text-align: center;
   padding: 12px 0;
}

header h1 {
   font-size: 2.5em;
}

article {
   width: 960px;
   height: 620px;
   background-color: #f0c861;
   position: relative;
}

article h2 {
   text-align: center;
   font-size: 1.7em;
   font-weight: bold;
   padding: 20px 0;
}

#container {
   height: 460px;
   position: relative;
}

#instructions {
   width: 320px;
   position: absolute;
   top: 0;
   left: 20px;
}

#instructions p {
   font-size: 1.05em;
   line-height: 1.8;
   margin-bottom: 15px;
}

#photo_bucket {
   padding-left: 5px;
}

#photo_bucket img {
   width: 80px;
   height: 60px;
   float: left;
   margin: 0 4px 4px 0;
   cursor: pointer;
}

#photorank {
   width: 560px;
   position: absolute;
   top: 0;
   left: 360px;
}

#photo_list {
   height: 460px;
   display: flex;
   flex-flow: column wrap;
   align-content: flex-start;
}

#photo_list li {
   margin: 0 35px 18px 20px;
   font-size: 1em;
   font-weight: bold;
   list-style-type: decimal;
   list-style-position: inside;
}

#photo_list li img {
   width: 160px;
   height: 120px;
   margin-left: 10px;
   vertical-align: middle;
   cursor: pointer;
}

img:hover {
   transform: scale(1.04);
   transition: transform 0.2s ease;
}

.course-link {
   margin: 14px 0;
   font-size: 0.95em;
}

footer {
   margin-top: 10px;
   padding-bottom: 20px;
   font-size: 0.95em;
}

footer p {
   margin-bottom: 8px;
}