/* Styling corresponding to requirements will have (!) next to them */
/*
    ====================
    Base Element Styling
    ====================
*/
/* resets the margin/padding of the entire page */
body {
    margin: 0px;
    padding: 0px;

    color: rgb(51, 59, 94); /* Setting global text color */
    line-height: 1.25rem; /* Thought the lines looked a little packed, so I adjusted the spacing slightly */

    background: #96bdff;
    background: linear-gradient(0deg, 
    rgb(135, 168, 225) 0%, 
    rgb(169, 205, 236) 39%, 
    rgb(183, 217, 227) 75%, 
    rgb(204, 232, 241) 100%);
}

/* "Mobile" or smaller screen widths are styled as the default */
/* Here, the h1 and links are centered and stacked on top of each other */
header {
    position: absolute;
    top: 0;

    width: 100%;
    padding-bottom: 1rem;

    text-align: center;
    color: white;

    background: #233251;
    border-bottom: 5px solid #619ff7;
}

nav ul {
    list-style-type: none;
    /* Resetting the margins/padding on this element so that the list items can be properly centered */
    margin: 0px auto;
    padding: 0px;
}

nav a {
    text-decoration: none;
    color: white;
}

nav a:visited {
    color: rgb(147, 190, 227);
}

nav a:hover {
    color: rgb(158, 234, 255);
}

/* (!) Media Queries are the technique used to conditionally style elements based on screen width */

/* 
    - Here, the header is changed to a horizontal flexbox once the screen is wider than 800px
    - The links are laid out in a row, with the h1 aligned to the left and the links aligned to the right
    - Flexbox in of itself is also a method of responsive design, since it automatically readjusts the spacing
        of flex-items within the flex-container
*/
@media screen and (width >= 800px) {
    header {
        padding-bottom: 0px; /* Since the elements are already centered within their container, the extra padding on the bottom is now unnecessary */
        text-align: left;
    }

    nav {
        display: flex;
        justify-content: space-around;
    }

    nav h1 {
        flex: 2 1 60%;
        margin-left: 1rem;
    }

    nav ul {
        margin-right: 1.5rem;
        display: flex;
        flex: 1 1 30%;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }
}

/* 
    This "gap" is needed to prevent the header from covering up parts of the first section 
*/
main {
    margin-top: 11rem;
}

/* Since the navigation header is no longer stacked vertically past this screen-width, the gap doesn't need to be as large */
@media screen and (width >= 800px) {
    main {
        margin-top: 6rem;
    }
}

section {
    width: 75%;
    margin: 1rem auto;
    padding: 1rem 2rem 2rem 2rem;
    /* While not strictly applicable in the current layout, this can prevent floated images from exceeding the bounds of the container */
    overflow: auto; 

    background: rgb(230, 241, 247);
    border-radius: 10px;
    box-shadow: 0px 0px 4px #5375ba;
}

/* Allows the width of the container to be shrunk on larger screens */
@media screen and (width >= 800px) {
    section {
        width: 70%;
        margin: 2rem auto;
        padding: 1rem 3rem 3rem 3rem;
    }
}

@media screen and (width >= 992px) {
    section {
        width: 60%;
    }
}

footer {
    width: 5rem;
    margin: 1rem auto;
    margin-bottom: 10rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: center;
    background: #233251;
    border-radius: 25px;
}

/* The border at the bottom of CodeCraftWorks sites also changes how it's stacked based on screen width, so these are adjustments to prevent the footer "button" from being hidden */
@media screen and (width >= 472px) {
    footer {
        margin-bottom: 7rem;
    }
}

@media screen and (width >= 675px) {
    footer {
        margin-bottom: 5rem;
    }
}

footer a {
    text-decoration: none;
    color: white;
}

h2 {
    padding-top: 0px;
    padding-bottom: 0.30rem;
    border-bottom: 3px solid #619ff7;
    grid-area: title; /* defines more readable "names" to grid-elements; to be used in the grid-template-areas definition */
}

img {
    width: 20rem;
    /* These rules ensure that images don't exceed the size of their container */
    max-width: 100%;
    max-height: 100%;
}

figcaption {
    margin-bottom: 0.5rem;
    color: rgb(63, 80, 108);
}

figure {
    padding: 0.25rem;
    text-align: center;
    background: #d3e4fb;
    border: 1px solid #85b0ec;
    grid-area: photo;
}

aside {
    padding: 1rem;
    color: rgb(63, 80, 108);
    background: #d3e4fb;
    border: 1px solid #85b0ec;
    grid-area: sidenote;
}

p {
    text-indent: 2rem;
}

/*
    ===================
    Class-based Styling
    ===================
*/

.p-wrapper {
    grid-area: paragraph;
}

.p-wrapper li {
    margin-top: 0.5rem; /* Used to space out the list text and make it a bit more readable */
}

/* (!) Grid layouts are another way to implement responsive design
    Here, they're used with media queries so that they only appear on screensizes larger than 800px
*/
@media screen and (width >= 800px) {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "title title"
        "photo paragraph"
        "sidenote sidenote";
        align-items: center;
    }
}

/* An additional breakpoint for mid-sized screens (e.g. tablets) */
/* Prevents the photo column from appearing too small by splitting it from a 1/3 to 2/3 split to 1/2 and 1/2 */
@media screen and (width >= 992px) {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "title title title"
        "photo paragraph paragraph"
        "sidenote sidenote sidenote";
        align-items: center;
    }
}

/* (!) Used to demonstrate how floated images can also be styled conditionally based on screen-width */
.float-img {
    display: block; /* Needed in order to center the image with margin: auto */
    width: 10rem;
    margin: 1rem auto;
    padding: 1rem;
    border: 1px dotted rgb(79, 116, 150);
    background: #d6eff3;
}

/* Only floats on screens wider than 800px */
@media screen and (width >= 800px) {
    .float-img {
        float: left;
        margin: 1rem;
    }
}

.explain {
    text-indent: 0px;
}