/*
Author:     Jeremy Norvell
Date:       2023-03-03
Purpose:    Demonstrate CSS functions on a small website for the CSUMB
            CST336 Lab 1 assignment
            Generally speaking, CSS selectors are introduced in this docuement
            in the order they are seen on the resulting page.
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/***************************************
*   HEADER
***************************************/
/*
We are using the body to define the main background and text color used throughout the pages.
This also makes use of a font import from Google fonts to demonstrate the technique. 
Colors utilize a "black" and "white" and colors generated based off a chosen color (ccccff)  
and a analogous color scheem from https://colorffy.com/color-scheme-generator?color=+%09CCCCFF 
#ffffcc - white (active button background)
#cce6ff - light blue (button border, banner background, active button background)
#ccccff - periwinkle (hover button color)
#e6ccff - lavender (button color, active button border)
#292930 - black
*/
body {
    background-color:#ffffcc;
    color:#292930;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
}
header {
    text-align: center;
}

/***************************************
*   NAVIGATION BAR
***************************************/
/* 
This navigation menu is configured as an unordered list using flex to manage spacing.
This also usesa 'pill' appearance for the buttons, with borders to match the navigation
banner color. Hover effects and active menu item are identified with specific color 
elements.
*/
.button-nav {
    background-color:#e6ccff; /* button color is lavender */
    border: 4px solid #cce6ff;/* border is light blue by default */
    color: #292930;           /* button text is black by default */
    padding: 10px;              /* padding is used to build out the button size around the text */
    text-align: center;         /* center text within the buttons */
    text-decoration: none;      /* remove the underline */
    font-size: 1.8rem;          /* fonts will be 180% of base size */
    border-radius: 15px;        /* round our corners on the navigation buttons */
}


#dropdown-content {
    display: none;              /* this keeps our submenu items hidden by default */
    text-align: center;         /* keep these aligned under the parent button */
    text-decoration: none;      /* remove the underline */
}


#dropdown:hover #dropdown-content {
    display: flex;              /* create a new container for our dropdown */
    flex-direction: column;     /* this will scale vertically */
    height: 50px;               /* this prevents the drop down from overwriting the button */
    margin: 12px 0px 0px 0px;   /* and adds a little bit of top-line spacing */
}

.dropdown-list {
    color: #292930;           /* button text is black by default */
    padding: 0px;
    margin: 0px;
    text-decoration: none;      /* remove the underline */
}

nav {
    background-color: #cce6ff;/* Assign the banner color */
    min-height: 105px;
}

nav ul {
    list-style: none;           /* remove any bullets */        
    padding: 0px;               /* remove padding to assist center alignment */              
    margin: 0px;                /* remove margins to assist center alignment */
    display: flex;              /* use flex so window resize doesn't break the navigation menu */
    justify-content: center;    /* center-align the buttons */
}

nav a:hover {                   
    color: #ffffcc;             /* text color changes to white */
    background-color: #ccccff;  /* background color to priwinkle */
    transition: .5s;              /* transition effect */
} 

nav .active {
    background-color: #ffffcc;  /* background color is white*/
    border: 4px solid #e6ccff;  /* border color is lavender */
    font-weight: 500;             /* give the font a bold appearance */
}

/***************************************
*   MAIN SECTION
***************************************/
/* Content in our main body is intended to be */
/* a relatively simple layout of a picture with */
/* a few lines of text displayed next to it */
/* flexbox is used to manage the content display */
.container {
    margin-top:0px;
    display:flex;
    justify-content:center;
}

.content {
    /* background-color:aqua; */
    padding: 15px;
    margin: 10px 0px;
    font-family: "Funnel Sans", sans-serif;
    font-size:18px;
    max-width:450px;            /* We want to prevent growing past a certain width */       
}

img {
    border-radius: 8%;
    max-height:275px;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

#sas-logo {
    max-width: 400px;
    background-color: white;
}


/***************************************
*   FOOTER SECTION
***************************************/
/* Our footer is set as class container and will largely */
/* inherit properties from the container class set in the body */
footer {
    background-color: #cce6ff;/* Assign the banner color */
}

/* We are using this class to override a few settings in the body container */
footer .container {
    height: 105px;
}

footer .disclaimer {
    font-size: 0.7rem;          /* font will be 70% size of the default */
    text-align: justify;        /* We are justifying each line for cosmetic balance */
    font-style: italic;         /* Text will be itallicied */
    font-weight: 700;           /* Text will have a bold appearance */
}

footer img {   
    margin: 0px;                /* remove our margin to assist with centering */
    padding: 0px;               /* remove padding for the same reason */                  
    background-color: #cce6ff;/*Any transparent pixels will be changed to the background color */
    height: 75px;                /* roughly centered within the footer banner */
}