/* ----- GLOBAL ----- */


h1 {
    color: #103F4E;
    text-transform: uppercase;
    font-weight: 900;
    padding-top: 2em;
    padding-bottom: 1em;
    text-align: center;
  }

h2 {
    color: #22809D;
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
}

h5 {
    color: #22809D;
    text-transform: uppercase;
    font-weight: 900;
}

.container{
    padding-top: 1em;
    padding-bottom: 1em;
}

body {
    background-color: #F3F4F7;
    font-family: 'Roboto', sans-serif;  
    font-size: 20px;
    color: #211D1C;
  }

/* RESPONSIVE FORMATTING */ 
html, body {
    overflow-x: hidden; /* This removes the odd spacing on the right hand side in mobile. */
}

@media (max-width: 767px) {
    body {
        padding-top: 0px;
      }
    
    /* Added some padding for longer blocks of text in mobile */
    p {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-fixed-top {
        position: fixed;
        top: 0;
    }
    .navbar-collapse {
        max-height: none;
    }

    .nav-link {
        background-color: #103F4E;
    }

    /* Add in hover effects for the main navigation*/
    nav ul a:hover {
        background-color: #569AA8;
        color: white;
        /* Remove underline effect */
        text-decoration: none;
    }

    /* Responsive header font size for the smaller screens */
    .hero-text h1 {
        font-size: 400% !important;
    }

    /* Align things center for the contact section */
    #contact .contact-cta {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.accent {
    font-weight: bold;
    color: #569AA8;
}


/* ----- HERO/HEADER ----- */

#heading {
    font-family: 'Bebas Neue', cursive;    
}


/* Making the top squares flush with the hero image */
.container:first-of-type {
    padding: 0em;
}

.hero {
    /* Sizing using viewport width and height*/
    width: 100vw;
    height: 100vh;
    /* Center using flexbox*/
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center the text*/
    text-align: center;

    /* Adding in background image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('images/hero_image.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* If you want a parallax effect, you can include 
    background-attachment: fixed; */
}

.hero-text h1 {
   font-size: 500%; 
   color: white;
   /* Get rid of the spacing between text */
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0; /* Include this to counter-act the general padding for h1 above */
   padding-bottom: 0;
}

.hero-text h2 {
    font-weight: normal;
    font-size: 300%;
    color: white;
    padding: 1em;
}

.hero-button {
    font-family: 'Bebas Neue', cursive;
    font-weight: bold;
    font-size: 2em;
    padding: 0.25em;
    border: 2px solid white;
    color: white;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 300px;
    background-color: transparent;
    text-decoration: none;
}

.hero-button a{
    text-decoration: none;
    color: white;
    font-size: 1.25em;
}


/* Removing the link styling from the email button */
.hero-button a:link{
    text-decoration: none;
    color:white;
}

.hero-button:hover {
    background-color: #569AA8;
    color: white;
  }


/* ----- NAVIGATION ----- */

.navbar {
    margin: 0;
    padding: 0;
}

.navbar-nav {
   /* Remove the bullets (i.e. list style type) and all of the standard padding*/
   list-style-type: none;
   margin: 0;
   padding: 0; 
   background-color: transparent;
   /* Fix the bar to the top of the page */
   position: absolute;
   top: 0;
   width: 100%;
 
}

.nav-item {
    /* Makes a horizontal bar rather than a vertical one */
    float: left;
    /* Add in vertical bars*/
    border-right: 1px solid white;

}
    
/* But no bar for the last link*/
nav ul li:last-child {
    border-right: none;
}

.nav-link {
    /* Make the whole block clickable, rather than just the text */
    display: block;
    width: 150px;
    /* Add in some padding for the links */
    padding: 8px 16px;
    text-decoration: none;
    text-align: center;
    /* Fix the color of the text*/
    color: white;
}

/* Add in hover effects for the main navigation*/
nav ul a:hover {
    background-color: #569AA8;
    color: white;
    /* Remove underline effect */
    text-decoration: none;
}


  
/* ----- ABOUT ----- */


.icon {
    background-color: #22809D;
}


/* Adding spacing in the About Me grid */





.spacer {
    padding: 5% 0;
    border-bottom: 1px dashed #22809d;
    border-top: 1px dashed #22809d;
    text-align: center; /* This is for then the about me icons are collapsed vertically in a mobile display */
}


.about-picture {
    min-height: 20em;
    width: 100%;
    background-size: cover;
    /* Absolute position helps keep the image from shifting upon resizing. */
    background-position: absolute;
    background-repeat: no-repeat;
    background-image: linear-gradient(rgba(249, 169, 120, 0.3),rgba(249, 169, 120, 0.3)), url('images/headshot.jpeg');
}

/* ----- TIMELINE ----- */

#timeline {
    background-color: #103F4E;
    color: white;
}

#timeline h1 {
    color: white;
}

/* ----- PROJECTS ----- */


#projects {
    padding-bottom: 2em;
    padding-top: 2em;
}

.btn {
    background-color: #F9A978;
    color: white;
    border-color: #F9A978;
}

.btn:hover {
    background-color: #569AA8;
}

.card-img-top {
    background-color: #22809D;
}

/* ----- CONTACT ----- */
 #contact {
    padding-bottom: 4em;
 }

 .contact-button {
    font-family: 'Bebas Neue', cursive;
    font-weight: bold;
    font-size: 2em;
    padding: 0.25em;
    border: 2px solid white;
    color: white;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 200px;
    background-color: #F9A978;
    float:left;
}

/* Removing the link styling from the email button */
.contact-button a:link{
    text-decoration: none;
    color:white;
}

.contact-button:hover {
    background-color: #569AA8;
    color: white;
  }

#contact h2 {
    float: right;
}

/* ----- FOOTER ----- */


footer {
    background-color: #103F4E;
    color: white;
    font-size: 0.75em;
    padding: 1em;
}

footer div {
    padding-left: 2em;
}