/* Some variable used for colors through out the file */
:root {
  --project-border: red;
  --text-color: maroon;
  --background-color: grey;
  --nav-bar-color:  #15a812;
}

/* place holder for universal styles */
* {
}

/* Getting into element selector this tag sets of general features of the
   page */
html {
    /* set 1rem to 10px instead of native 16px to make it easier to calculate
       font-size values for the rest of the page (e.g. 1.6rem is 16px, 2.0rem 
       is 20px, etc.) */
    font-size: 62.5%;
    background: var(--background-color);
}

/* Some text centric elements */
h1 {
    font-size: 4rem;
    text-align: center;
    width: 100vw;
    color: black;
}

h2 {
    font-size: 2.5rem;
}

p {
    font-size: 1.75rem;
}

/* Styling the header nav bar and banner */
header .header-banner {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
}

header nav {
    font-size: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    display: flex;
    justify-content: center;
    width: 100vw;
}

header nav ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap:wrap;
    align-content: center;

}

header nav ul li {
    margin: 1rem 0.5rem 1rem 0.5rem;
}			

/* Setting up the styling for the figures and captions */
figure {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/*  Pseudo-class to acto on projects when hovered over */
figure:hover > figcation,
figure:hover{
    opacity: 0.5;
}

figure img {
    width: 100%;
    border: solid 1rem;
    border-color: var(--project-border);
    margin: 0.5rem;
}

figure figcaption {
    background-color: var(--project-border);
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    color: black;
    position: relative;
    top: -3rem;
}

/* Footer styles */
footer {
    margin: 0px;
    padding: 25px;
    background-color: var(--nav-bar-color);
    color: white;
    text-align: center;
}

/* Class selectors Setting up the tag line with the header banner background
   image */
.tagline {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    height: 35rem;
    width: 100%;
    background: url("../images/banner-developer.jpg");
    background-size: cover;
    background-position: center;

}

/* Setting up nav bar style */
.header-banner {
    background-color: var(--nav-bar-color);
    padding: .5rem 0rem 0rem 0rem;
}

/* Tagline styling */
.tagline p {
     /* Monospace font */
    font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
    'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier,
    monospace;
    margin:0rem 0rem 5rem 0rem;
    background: var(--background-color);
    padding: 2rem;
    font-size: 2.5rem;
    }

/* Styling each section of the body of the page */
.portfolio-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin: 1rem;
}

/* Setting up the two paragraphs to stack ontop of each other rather than wrap */
.about-me  {
    display: flex;
    flex-direction: column;
}

/* General styles for each section */
.about-me,
.projects,
.horz-list {
    width: 100%;
    padding:0.5rem;
}

/* Styling the left side section apperance */
.center-to-left {
    border-style: none none solid none;
    border-color: black;
    border-width: 0.75rem;
}

/* Getting the contacts to sit in horizontal line and wrap when window closes */
.horz-list ul {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    font-size: 1.5rem;
    flex-wrap:wrap;
    margin: 0.5rem 2rem 0.5rem 2rem;
}   

/* ID selecctors */
#about-me ~ p {
    display: flex;
    flex-direction: column;
}

#work ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#project-one,
#work ul li ~ li {
    width: 100%;
}

    
/* Taken from module 02 miniproject
   Media queries */
/* using a mobile-first approach, use `min-width` values going from narrow -> 
   wide for a responsive design */
@media screen and (min-width: 768px) {
    /* Readjusting the setting of elements when the screen widens */
    h1,
    header nav {
	width: 45vw;
    }    
    .banner {
        margin: 0 25% 0 0;
    }
    header nav ul{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap:wrap;
        align-content: center;
    }
    .center-to-left{
        border-style: none solid none none;
        border-color: black;
        border-width: 0.75rem;
    }
    .about-me  {
	width: 87.5%;
    }
    .horz-list {
	width: 87.5%;
    }
    .projects {
        width: 87.5%;
    }
    .center-to-left {
	width: 12.5%;
    }
    .wide-view {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	margin: 2rem;
    }
    #work ul li ~ li {
	width: 50%;
    }
}

/* media query for larger screens */
@media screen and (min-width: 992px) {
    .banner {
        margin: 0 25% 0 0;
    }
    header nav ul{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap:wrap;
        align-content: center;
    }
    h1,
    header nav {
	width: 45vw;
    }
}