@charset "utf-8";

/*
    Author: Shauna Campbell
    Date: March 6, 2026
    File: styles.css
    Stylesheet for index.html
*/

/* I'm noting this background color here because I really like it and will use it in another way
rgb(255,246,236);
*/

/* removed dashed grids, code will display the grids now */

/* background color but soon to be a background image */
html {
    background-image: url(homepagebackground.jpg);
}

/* body body */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
}

/* don't forget css grid container 
update grid to include sidebar */
.grid-container {
    display: grid;

    grid-template-columns: 3fr 1fr;

    grid-template-areas:
        "header header"
        "nav nav"
        "main sidebar"
        "footer footer";

    gap: 10px;
    margin: auto;
    background-color: rgb(194, 203, 207);
    width: 40%;
    min-height: 40vh;
    border: 2px solid rgb(255,246,236);
}



/* style for header, nav, nav subcontent, img, and footer are needed */
header {
    grid-area: header;
    background-color: rgb(176, 165, 165);
    color: rgb(0, 0, 0);
    padding: 15px;
    text-align: center;
    font-variant: small-caps;
}

nav {
    grid-area: nav;
    background-color: rgb(51, 51, 51);
    padding: 5px;
    text-align: center;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 15px;
    font-weight: bold;
}

nav a:hover {
    color: grey;
}

/* main content 
- added font family and size */
.main-content {
    grid-area: main;
    padding: 20px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.4em;
}

/* added font size */
.main-content h2 {
    font-variant: small-caps;
    font-size: 2em;
}

img {
    width: 300px;
    display: block;
    margin: 20px auto;
    border: 3px solid #555;
}

/* added font family and size */
footer {
    grid-area: footer;
    background-color: rgb(221, 221, 221);
    font-family: monospace; 
    font-size: 1.3em;
    text-align: center;
    padding: 10px;
}

/* SIDEBAR ADDED !!!!!!!!!!!!!! */
.sidebar {
    grid-area: sidebar;
    padding: 15px;
    background-color: rgb(176, 165, 165);
    height: auto;

}

/* UL change bullets, h2 small caps, font family */
.sidebar h2 {
    font-variant: small-caps;
    list-style-type: square;
    font-family: Arial, sans-serif;
}

.sidebar li {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.3em;
    list-style-type: square;
}

/* stylerule for aside only , sep it from .sidebar */
aside {
    border-radius: 18px;
    box-shadow: rgb(54, 69, 79) 15px 0px 25px;
    box-shadow: rgb(54, 69, 79) -15px 0px 25px;
}