:root
{   
    /* Colors from https://flatuicolors.com/palette/defo */

    /* Reds http://materialuicolors.co/?utm_source=launchers */
    --DeepRed: #B71C1C; /* Red 9100 */
    --LighterRed: #C62828; /* Red 800 */
    --BlandRed: #D32F2F; /* Red 700 */
    --PeachyRed: #F44336; /* Red 500 */
    --BootstrapRed: rgb(220,53,69);

    --Off-White: #ecf0f1; /* Clouds */
    /* --Darker-White:  */
    --Light-Grey: #bdc3c7; /* Silver */
    --Blue-Grey: #34495e; /* Wet asphalt */
    --BoostrapDarkGrey: rgb(52,58,64);


    --Tertiary-color: #F44336; /* Red */
    --quaternary-color: #E91E63; /* Pink */

    --Banner-text-color: #fff;
}

html, body, h1, h2
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#myName
{
    font-size: 500%;
}

nav { 
    position: relative;
    background-color: var(--BoostrapDarkGrey);
    z-index: 1 !important;
    text-align: center;
}

.navList
{
    padding-top: 1em;
    list-style-type: none;
    display: flex;    
    justify-content: space-between 
}

#centerNav
{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

.navItems
{
    padding: 1em;
    color: var(--Off-White  );
    font-weight: bold;
}

.navItems:hover
{
    color: var(--Off-White);
    text-decoration: none;
    /* background-color: var(--DeepRed); */
    border-radius: 1em;
    transition: background-color 0.5s ease;
    transition: color 0.1s ease;
    text-shadow: 1px 0px 2px yellow;
}

.wholeViewPort
{
    /* height: 100vh; */
    margin: 0;
}

.bannerViewPort
{
    height: 93vh;
}

.section1
{
    background-image: url(../images/SafetyCarHeader.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* height: 100vh; */
}

.section2
{
    background-color: white;
    height: 80vh;
}

.bio
{
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
    margin-top: 3rem;
}

.bioLeft
{
    grid-column-start: 1;
    grid-column-end: 2;
}

.bioRight
{
    grid-column-start: 2;
    grid-column-end: 2;
    /* background-image: url(../Images/Portrait.JPG);
    background-size: 100%; */
    border-radius: 50%;
    height: 60vh;
}

.bioLeft p
{
    font-size: 150%;
}


#selfPortrait
{
    border-radius: 50%;
    width: 100%;
    /* height: 100%; */
}

.sticky {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}

/* It Experience Page */
.bubbleGroupIT
{
    padding-top: 1em;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    grid-gap: 20px;
    text-align: center;
}


.bubblesIT
{
    border-style: solid;
    padding: 2rem;
}

.bubblesIT h2
{
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.bubblesIT:hover
{
    color: var(--DeepRed);
}

.card
{
    z-index: 0 !important; 
    padding: 2rem;
    box-shadow: 5px 10px 15px #888888;
    color: white;
}

.card:hover
{
    box-shadow: 20px 50px 100px #888888;
}

.fa
{
    font-size: 7em !important;
}

.section3
{
    /* height: 202vh; */
    background-color: #d2dae2;
    padding-top: 5rem;
}

.section3 h2
{
    padding-top: 3rem;
}

/* Begin Web Dev */
.section4
{
    height: 150vh;
    padding-top: 3rem;
    margin-top: 2.5rem;
    background-color: pink;
}

#sampleSite
{
    width: 100%;
    border-radius: 10%;
    padding: 3rem;
}

.section5
{
    height: 100vh;
    padding-top: 3em;
    /* padding-top: 3rem; */
    /* margin-top: 2.5rem; */
    background-image: url(../images/contactMeBG.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

.contactForm
{
    
    padding: 3em;
    background-color: white;
    border-radius: 1em;
}

.bannerViewPortSubPage
{
    height: 35vh;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../Images/SafetyCarHeader.jpg);
    background-size: cover;
    background-position: 50% 90%;
    text-align: center;
    color: #fff;
}

#photoHeaderh1
{
    font-size: 500%;
    padding-top: 3rem;
}

#photoHeaderh2
{
    font-size: 200%;
    padding-top: 3rem;
}

#photoHeaderName
{
    padding-top: 3rem;
    text-align: center;
}

.centerText
{
    text-align: center;
}

/* Contact page */
table
{
    text-align: center; 
    margin-left: auto !important;
    margin-right: auto !important;
}

input, select
{
    width: 20em;
    height: 2em;
}

/* Carousel */
#caruImage
{
    height: 50% !important;
}

.carousel 
{ 
    width: 45vw;
    margin: 0 auto;
}

.imageSize
{
    width: 50%;
}

.imageCont
{
    margin: auto;
}

.galleryContainer
{
    padding-top: 1em;
    padding-bottom: 1em;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-gap: 2rem;
}

.galleryImg
{
    width: 100%;
    border-radius: 1em;
}

.galleryImg:hover
{
    box-shadow: 5px 10px 15px #888888;
}

footer
{
    padding: 3rem;
    text-align: center;
    background-color: #34495e;
    color: #fff;
}