/* the body section */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(
        to right top,
        #e6f7f1,
        #d8f4f7,
        #d3eefc,
        #dce8ff,
        #edf2ff
    );
}
/* the page wrapper */
#wrapper {
    width: 95%;
    max-width: 1000px;
    margin: 20px auto;
    border: 2px solid #000000;
}
/* the header section */
header {
    padding: 8px;
    color: #ffffff;
    background-color: #394856;
    text-align: center;
}
/* the navigation section */
nav {
    padding: 10px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #d8feff;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
}
/* the navigation heading */
nav h2 {
    margin-top: 5px;
}
/* the navigation list */
nav ul {
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
}
/* display the navigation items on one line */
nav li {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
}
/* the navigation links */
nav a {
    display: block;
    padding: 8px;
    color: #6d6d6d;
    text-decoration: none;
}

/* change the navigation links when hovered */
nav a:hover {
    color: #000000;
    background-color: #2f6f94;
}
/* the main section */
main {
    padding: 2em;
    color: #000000;
    background-color: #f8f9fa;
}
/* center the main headings */
main h2 {
    text-align: center;
}
/* the profile photo */
.profile-photo {
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}
/* the main paragraph */
main p {
    line-height: 1.5;
}
/* center selected text */
.center {
    text-align: center;
}
/* the homework button area */
.homework-button {
    width: 50%;
    margin: 40px auto 0;
    text-align: center;
}
/* the homework button link */
.homework-button a {
    display: block;
    padding: 15px;
    border: 2px solid #394856;
    color: #ffffff;
    background-color: #394856;
    font-size: 1.25em;
    font-weight: bold;
    text-decoration: none;
}
/* change the homework button when hovered */
.homework-button a:hover {
    color: #000000;
    background-color: #d8feff;
}

/* the footer section */
footer {
    padding: 10px;
    color: #ffffff;
    background-color: #394856;
    font-style: italic;
    text-align: center;
}
/* mobile styles for screens 600 pixels wide or smaller, tested on an iPhone 17 Pro Max */
@media screen and (max-width: 600px) {
    /* remove space around the page */
    #wrapper {
        width: 100%;
        margin: 0;
        border: none;
    }
    /* make the header smaller */
    header {
        padding: 12px 8px;
    }
    header h1 {
        margin: 5px 0;
        font-size: 1.8em;
    }

    header h2 {
        margin: 8px 0;
        font-size: 1em;
    }
    /* resize the navigation */
    nav {
        padding: 10px;
        font-size: 1em;
    }
    nav h2 {
        margin: 5px 0 10px;
        font-size: 1.1em;
    }
    /* stack the navigation links */
    nav li {
        display: block;
        margin: 8px 0;
    }
    /* make navigation links easier to tap */
    nav a {
        padding: 10px;
        border: 1px solid #394856;
        background-color: #ffffff;
    }
    /* reduce space in the main section */
    main {
        padding: 15px;
    }
    main h2 {
        font-size: 1.3em;
    }
    /* make the photo smaller */
    .profile-photo {
        width: 150px;
        height: 150px;
    }
    /* improve paragraph readability */
    main p {
        font-size: 1em;
        line-height: 1.5;
    }
    /* make the homework button fit the screen */
    .homework-button {
        width: 100%;
        margin-top: 25px;
    }
    .homework-button a {
        padding: 12px 8px;
        font-size: 1em;
    }
    /* make the footer text smaller */
    footer {
        padding: 8px;
        font-size: 0.9em;
    }
}