* {
  box-sizing: border-box;
}
/* Page Layout */
body { 
  background-image: url("../images/fish.jpg"); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-color: lightgray; 
  font-family: Arial, sans-serif; 
  line-height: 1.5;
 }
     nav {
         display: flex;
         justify-content: space-around;
         align-items: center;
     }


#page { 
  width: 100%; 
  min-height: 600px; 
  border: 3px solid #333; 
  padding: 20px; 
  margin: 20px auto; 
  background-color: #ffffff; 
}

header { 
  position: relative; 
}

/* Typography & Links */
h1 { color: navy; font-size: 32px; }
h2 { color: darkgreen; }
h3 { color: orange; }
p { font-size: 16px; text-align: left; }
a:link { color: blue; }
a:visited { color: purple; }

/* Lists */
ul { 
  list-style-type: disc; 
  line-height: 1.8; 
}
nav ul li { 
  display: inline; 
  margin-right: 15px; 
}
ol { 
  font-style: italic; 
}

/* Media block design */
img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 10px; 
}

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid black; }
th { background-color: #cccccc; }
td { color: #333333; }

/* Forms */
fieldset { border: 2px solid navy; padding: 15px; }
legend { font-weight: bold; }
input[type="text"], input[type="email"] { width: 250px; padding: 5px; }
input[type="submit"] { background-color: navy; color: white; padding: 10px; cursor: pointer; }
input[type="submit"]:hover { background-color: darkblue; }

/* Components / Classes / IDs */
.highlight { color: red; font-weight: bold; }
#main-title { text-align: center; background-color: beige; }
.content-box { 
  background-color: #ffffff; 
  border: 1px solid #cccccc; 
  padding: 15px; 
  margin-bottom: 20px; 
  border-radius: 5px; 
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
section:first-child {
    grid-column: 1 / 3;
}
@media (max-width: 600px) {
    nav {
        flex-direction: column;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
}