/* Student: Jordan Wlash
   Course: ITWP 1050
   Assignment: Homework 5 Detroit Sports Website
*/
/* Page styling */
body {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 20px;
 line-height: 1.6;
 background-color: #f5f5f5;
 color: #222;
 text-align: center;
}
/* heading */
h1 {
 color: #0066cc;
 font-size: 2.5rem;
 text-align: center;
}
/* Paragraphs*/
p {
 max-width: 900px;
 margin: 0 auto 15px auto;
 font-size: 1.1rem;
 text-align: left;
}
/* Images  */
img {
width: 100%;
max-width: 390px;
 height: 400px;
 object-fit: cover;
display: inline-block;
 margin: 10px;
 border-radius: 10px;
}
/* Footer  */
footer {
 text-align: center;
 margin-top: 30px;
 padding: 15px;
 background-color: #ddd;
}
/* item responsive layout */
.sports-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 30px;
 justify-content: center;
}
/* individual boxes */
.sports-item {
 flex: 1 1 180px;
 background-color: #0066cc;
 color: white;
 padding: 15px;
 text-align: center;
 border-radius: 8px;
 font-weight: bold;
}
/* Media query 800px*/
@media screen and (max-width: 800px) {
h1 {
font-size: 2rem;
   }
body {
 font-size: 0.95rem;
   }
 img {
 display: block;
 margin: 10px auto;
 width: 90%;
 height: auto;
   }
}
/* Media query*/
@media screen and (max-width: 600px) {
 body {
 background-color: #e0f0ff;
   }
}