/*
Author: Douglas Ha
Date: 04/30/2025
File Name: styles.css for practice 8 start file
*/

/* CSS Reset */
body, header, nav, main, footer, img, h1, h3, ul, section, aside, figure, figcaption {
    margin: 0;
    padding: 0;
    border: 0;
}
        * {
            box-sizing: border-box;
            padding:.25rem;
        }

        body {
            margin: 0;
            padding:0;
        }
        
        h1, h2, h3,h4, h5, h6  {
            font-family: "Century Gothic", Arial, sans-serif;
        }
        
        p {
            font: normal 1.2rem/1.25 georgia, "times new roman", serif;
        }
        
        header {
            background: #abc;
            text-align:center;
        }

        .logo {
            display:block;
            width:150px;
            height:150px;
            margin:auto;
        }
        
        nav {
            background: #789;
            padding:.5rem;
        }

        nav li {
            text-align:center;
            font-size:1.25rem;
            margin-bottom:1rem;
        }
        
        nav a {
            color: white;
        }

        .main-title {
            text-transform:capitalize;
            text-align:center;
        }
        
        aside {
            background: #ddd;
            color:firebrick;
        }
        
        footer {
            background: #456;
            color:white;
            padding: 1rem;
        }
        
        img {
            width:100%;
        }
        
        
/* Media Queries for layoing out the page for tablet and desktop screens */


        @media screen and (min-width:720px) {
            /* This is where we define layout using ASCII art.
            We layout the grid areas by name. Later we define each
            item with a name using the grid-area property.
            
            Using grid-template-areas, we can only define areas
            that are rectangular. No L-shaped or diagonal areas!*/
            body {
                display:grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-areas: 
                    "h h h h"
                    "n n n n"
                    "m m m a"
                    "f f f f"
            }
            
            header {
                grid-area: h;
            }

            .logo {
                float: left;
            }
            
            main {
                grid-area: m;
            }
            
            aside {
                grid-area: a;
            }
            
            footer {
                grid-area: f;
            }

            nav {
                grid-area: n;
            }

            nav ul {
                text-align: center;
                padding-left: 10%;
            }

            nav li {
                display:inline-block;
                margin-right: 14%;
            }
            
        }
        
    @media screen and (min-width:1000px) {
        /* In this media query we are switching to the another way we can 
        layout our page items, by using grid line numbers. Normally, you would stick with a consistent layout approach. I'm just trying to show you differnt ways for comparison.
        Here, we use template-rows to explicitly define each row */
        body {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: auto auto auto auto;
        }
        
        header {
            /* This is the long way:
                grid-column-start: 1;
                grid-column-end: 5;
                grid-row-start: 1;
                grid-row-end: 2;
            Below, we're using two ways to shortcut the above: 
            specifying the start line and how many lines to span across
            OR
            specify the start line and the end line. Whichever way to choose; be consistent in your document.
            */
            grid-column: 1 / span 4; /* the header will be 4 columns wide */
            grid-row: 1 / 2; /* start on row line 1. End on line 2. it will take up 1 row */
        }

        nav {
            grid-column: 1 / span 4;
            grid-row: 2 / 3;
        }

        main {
            grid-column: 1 / span 3;
            grid-row: 3 / 4;
        }

        aside {
            grid-column: 4 / span 1;
            grid-row: 3 / 4;
        }

        footer {
            grid-column: 1 / span 4;
            grid-row: 4 / 5;
        }
        
        main {
            /* It's totally fine to have a grid within a grid area
            In this example I'm using the grid lines to define the grid. 
            The grid layout is defined on each grid item seperately. 
            In this instance, I'm letting the rows be defined implicitly 
            or automatically. */
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: 1fr 1fr;
        }

        .main-title {
            /* starts on grid line 1 and ends on grid line 3 */
            grid-column: 1 / 3;
            border-bottom: 1px solid;
            text-transform:capitalize;
        }
        
        .story1 {
            /* starts on grid line 1 and ends on grid line 2 */
            grid-column: 1 / 2;
        }
        
        .story2 {
            /* starts on grid line 2 and ends on grid line 3 */
            grid-column: 2 / 3;
        }
    }