/* Styling corresponding to requirements will have (!) next to them */
/*
    ====================
    Base Element Styling
    ====================
*/

body {
    margin: 0px; /* (!) body element has some default margin/padding; this resets it*/
    padding: 0px;
    background: rgb(174, 224, 227);
}

main {
    width: 80%;
    margin: auto; /* (!) margin: auto can help automatically center elements on a page */
}

section {
    margin: 1rem;
    padding: 1rem;
    background: white;

    /* (!) 
        border-radius can round out the edges of containers
        border is shorthand for: border-width, border-style, and border-color
    */
    border-radius: 10px;
    border: 2px solid rgba(22, 51, 53, 1);
    box-shadow: 4px 4px rgba(22, 51, 53, 1); /* box-shadow is used without any blur in order to act like a cel-shaded shadow */
}

footer {
    width: 80%;
    margin: auto;
    /* (!) margins can be specified for specific directions: top, right, bottom, left */
    margin-top: 2rem;
    margin-bottom: 5rem;
    text-align: center;
}

h2 {
    width: 50%;
    margin: auto;
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 6px double rgb(92, 194, 202); /* (!) borders can also be specified for a specific direction */
}

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

/* By using more specific selectors, only one class declaration is needed for the navigation bar */
/* Properties are grouped by relation to each other: positioning > flex properties > color > border */
.nav-bar {
    /* 
        (!) Using the position property to ensure the navigation bar is always on the top of the screen
        no matter where the user scrolls to on the page
    */
    position: fixed; 
    top: 0; /* (!) top, bottom, left, right can be used in tandem with position to adjust the position of an element */
    left: 0;
    width: 100%;
    /* (!) Using flex to ensure the title and the navigation options are in one row */
    display: flex; 
    justify-content: space-around; /* Keeps a small bit of space on either side, and then evenly spaces out the flex-items */
    color: white;
    background: rgba(3, 40, 57, 1);
    box-shadow: 0px 4px 8px rgba(11, 31, 32, 0.5)
}

.nav-bar h1 {
    margin-left: 1.5rem;
    flex: 2 1 60%; /* Since I want the header to take up more space, I define flex-grow as '2' and flex-basis as '60%' */
}

.nav-bar ul {
    margin-right: 1.5rem;
    display: flex;
    flex: 1 1 30%;
    align-items: center; /* Ensures the h1 and ul are aligned vertically */
    justify-content: flex-end; /* Groups the flex-items to the right side of the container */
    gap: 10px; /* Ensures there is still some gap between the flex-items, even if the browser tab is resized drastically */
    list-style: none; /* Removes the bullets so that semantically the nav bar is still a list, but appears like plain text */

}

/* Removes the underline and default link color */
.nav-bar a {
    text-decoration: none;
    color: white;
}

/* Prevents the header from blocking the first line of text */
.first {
    margin-top: 6rem;
}

/* By using more specific selectors, can reuse the wrapper class but apply different formatting depending on section */
.wrapper {
    background: rgb(214, 248, 250);
    border: 1px dashed rgba(22, 51, 53, 1);
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/* (!) Using flexbox again to align an image and a textbox next to each other */
.first .wrapper {
    display: flex;
    align-items: stretch;
}

/* Ensures that the text-indent does not affect the <p> in the <aside> by only selecting direct children with '>' */
.second .wrapper > p {
    margin: 1rem;
    text-indent: 1rem;
}

.p-wrapper > p {
    margin: 1rem;
    text-indent: 1rem;
}

/* Using the image as a background allows use of background-size: cover, which essentially "crops" out any overflow */
/* Prevents image from looking stretched while still having the same height as the text box */
.col-img {
    width: 150rem;
    background: url(https://codecraftworks.dev/web/KwpWryp5lLSpeng6EY03/assets/porcupinefish_carlos_jamaica.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/* (!) Example of a floated image */
.float-img {
    float: left;
    max-width: 350px;
    margin: 1rem;
    border: 1px solid rgba(22, 51, 53, 1);
}

/* (!) Example of floated text */
.aside {
    float: right;
    margin: 1rem;
    padding: 0.5rem;
    background: white;
    border: 1px solid rgba(22, 51, 53, 1);
    box-shadow: 2px 2px rgba(22, 51, 53, 1);
}

/* Creating a pseudo 'header' within the aside */
.aside p:first-of-type {
    font-weight: bold;
    border-bottom: 1.5px dotted rgb(92, 194, 202);
}

/* Creating a pseudo 'button' */
.button {
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-decoration: none;
    color: white;
    background:rgba(3, 40, 57, 1);
    border-radius: 50px;
    transition: all 0.5s ease;
}

.button:hover {
    background: rgb(16, 90, 125);
}