/**
  *   Title: Grid CSS - CIS 195 - Fall 2025
  *  Author: Bobby Harper
  *
  *    File: css/styles.css
  * Version: 1.0
  *    Date: 11/11/2025
  *
  * This CSS file contains the main styles for the web project, including layout,
  * color schemes, typography, and component styling to ensure a cohesive and
  * visually appealing design throughout the site.
  *
  *
  *
  *
  * Change Log
  * 1.0 - 11/11/25: Original Commit
*/
 
 :root {
    --bg-color: #60636b;
    --main-border: black;
    --grid-color-bg: #60636b;
    --color: white;
    --alt-grid-color: rgba(0, 0, 0, 0.1);

  }
/* Styled as the second grid from CssGridDemo2.htm */
.grid-container-b{
    display: grid;
    grid-template-areas:
        'grid-header grid-header grid-header'
        'grid-section-1 grid-main grid-right-sidebar'
        'grid-section-2 grid-section-2 grid-right-sidebar'
        'grid-footer grid-footer grid-footer';
    grid-template-columns: auto auto auto;
    background-color: var(--grid-color-bg);
    border: 1px solid var(--main-border);
    
    padding: 10px;
    column-gap: 3px;
}
/*Styled as the third grid from CssGridDemo2.html */
.grid-container-c {
    display: grid;
    grid-template-areas:
        'grid-header grid-header grid-header'
        'grid-nav-bar grid-main grid-main'
        'grid-nav-bar grid-section-1 grid-section-1'
        'grid-section-2 grid-section-2 grid-right-sidebar'
        'grid-footer grid-footer grid-footer';
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    padding: 1rem;
    border: 5px solid var(--main-border);
    background-color: var(--bg-color);
    border-radius: 15px;
    backdrop-filter: blur(6px);
}


.grid-header{
    grid-area: grid-header;
    border: 2px solid var(--main-border);
    color: var(--color);
    text-align: center;

}

.grid-nav-bar{
    grid-area: grid-nav-bar;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);

}

.grid-main{
    grid-area: grid-main;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);
}

.grid-section-1{
    grid-area: grid-section-1;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);
}

.grid-section-2{
    grid-area: grid-section-2;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);

}

.grid-right-sidebar{
    grid-area: grid-right-sidebar;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);

}

.grid-footer{
    grid-area: grid-footer;
    background-color: var(--alt-grid-color);
    border: 2px solid var(--main-border);
    color: var(--color);
    text-align: center;

}