@charset "utf-8"; 

/* 
Name: Maruos Balyos 
Date: March 22, 2026 
Hands-on Project 5-2 
*/ 

body { 
margin: 0; 
font-family: Arial, Helvetica, sans-serif; 
background-color: rgb(210, 210, 210); 
} 

/* shows author and date above the project box */
#authorInfo { 
width: 780px; 
margin: 10px auto 0 auto; 
font-size: 14px; 
} 

/* main container that keeps the project centered */ 
#page { 
width: 780px; 
margin: 20px auto; 
background-color: rgb(240, 201, 98); 
} 

/* blue title bar at the top */ 
header { 
background-color: rgb(38, 126, 194); 
color: white; 
text-align: center; 
padding: 18px 0; 
} 

header h1 { 
margin: 0; 
font-size: 3em; 
font-weight: normal; 
} 

/* layout for the two columns */ 
main { 
display: flex; 
padding: 10px 8px 20px 8px; 
} 

/* left column with instructions + photo bucket */ 
#leftColumn { 
width: 230px; 
padding: 0 10px; 
} 

/* right column where ranked photos appear */ 
#rightColumn { 
width: 510px; 
padding: 0 10px; 
} 

h2 { 
text-align: center; 
margin-top: 6px; 
margin-bottom: 14px; 
font-size: 1.2em; 
} 

#leftColumn p { 
font-size: 1.05em; 
line-height: 1.6; 
margin-bottom: 12px; 
} 

/* small image bucket area */ 
#photo_bucket { 
display: flex; 
flex-wrap: wrap; 
gap: 4px; 
width: 210px; 
} 

/* images inside the bucket */ 
#photo_bucket img { 
width: 58px; 
height: 42px; 
cursor: pointer; 
display: block; 
} 

/* grid layout for ranked images */ 
#photo_list { 
list-style-position: outside; 
margin: 0; 
padding-left: 28px; 
display: grid; 
grid-template-columns: 160px 160px; 
column-gap: 55px; 
row-gap: 10px; 
align-items: start; 
} 

#photo_list li { 
font-size: 1.8em; 
margin-left: 10px; 
} 

/* larger photos when ranked */ 
#photo_list img { 
width: 110px; 
height: 80px; 
margin-left: 8px; 
vertical-align: middle; 
cursor: pointer; 
}