/************** COLORS **************/
/* Colors Palatte Plan */
    /* #162b35 vs. #1b323d  Dark Slate Blue/Deep Teal - font color*/  
    /* #3d6b7a   Muted Teal - quote font color*/
    /* #f1faf7   Wisper Teal - Background color */
    /* #6b4f7a   Dusty Plum - link color */
    /* #7c3f7a   Deep Magenta Purple - link already visited*/
    /* #c2dfe8   Teal Wash - background color for hover*/
    /* #1a5c73   Deep Teal - active nav background */
    /* #f1faf7   Whisper Teal - active nav text - light for dark background */

    /* #365b6d   Gray Azure - Alternative choice for font color */  
    /* #f6f5f5   Warm Gray - Alternative choice for background */


/************** FONTS **************/
/* Font Styling */
    /* Font Family - First Choice for headings: 'Playfair Display', serif; */
    /* Font Family - First Choice for body text: 'Montserrat', sans-serif; */
    /* Playfair Display - https://fonts.google.com/specimen/Playfair+Display */
    /* Montserrat - https://fonts.google.com/specimen/Montserrat */
    /* Resource: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts*/


/* ****** OVERALL SITE STYLE + DEFINITIONS OF REUSABLE VARIABLES ******* */

/* Define the box model as Alternative Box Model */
.box {
    box-sizing: border-box;           /* border-box setting will include (padding + border in total defined dimensions */
}

/* dfines in one location for easier/consistent style changes */
:root {
    /*--colors--*/
    --primary-font-color: #1b323d;    /* dfines primary font color*/
    --quote-font-color: #3d6b7a;      /* dfines quote font color*/
    --link-color: #2e7d9a;            /* dfines link font color*/
    --link-visited: #7c3f7a;          /* dfines link font color for a link already visited*/
    --hover-backgrnd: #c2dfe8;        /* dfines background color for hover*/
    --active-backgrnd: #1a5c73;       /* dfines background color for active nav*/
    --active-font-color: #f1faf7;     /* dfines text color for active nav*/
    --site-background-color: #f1faf7; /* dfines site backbroud color*/      

    /*--fonts--*/
    --heading-font: Georgia;        /* defines heading font family*/
    --text-font: Lucida, serif;    /* defines text font family*/       
}

body {
    background-color: var(--site-background-color);
}

/************ Style Based on state *************/
a:link {color: var(--link-color);}
a:visited {color: var(--link-visited)}
a:hover {background: var(--hover-backgrnd);}
a:active {
    background-color: var(--active-backgrnd);
    color: var(--active-font-color); 
}

/****************** FONTS *********************/
h1 {
    font-family: var(--heading-font);
    color: var(--primary-font-color);
    font-weight: bold;
}

h2, h3, h4, h5, h6, p, li {
    font-family: var(--text-font);
    color: var(--primary-font-color);
}

.quotes {
    font-style: italic;
    color: var(--quote-font-color);
}

/* Navigation Bar Styling  */
/* NOT WORKING */
/* Working when used ul > li {... but education was an issue; stopped working when added .page-nav or .site-nav*/
.site-nav ul > li  {
    display: inline-block;
    margin: 15px;
}

#page-nav ul > li {
    display: inline-block;
    margin: 15px;
}

#social-links ul > li {
    display: inline-block;
    margin: 15px;
}

/* Images */
/* REMOVED WAS NOT HELPING; BOOTSTRAP GRID USED INSTEAD
.photo-vertical {
    max-height: 300px;
    width: auto;
    padding: 10; 
    margin: 20;
    border-radius: 12px;
}

.photo-horizontal {
    max-height: 300px;
    width: auto;
    padding: 10; 
    margin: 20;
    border-radius: 20px;
} 

.photo-horizontal-solo {
    height: 500px;
    margin: 20;
    border: 10; 
    border-radius: 20px;
}
*/

/* Video Box Settings */
.youtube-video {
    max-height: 300px;
    padding: 10;
    margin: 10;
    border-width: 5;
    border-style: solid;
    border-color: var(--primary-font-color);
}