@import url('https://fonts.googleapis.com/css?family=Poppins');
    
/* Google Font */
body {
    font-family: 'Poppins', sans-serif;
     margin: 0;
}

h1 {
    font-size: 2em;
}


/*
Color Palette
    1 - #c9596b
    2 - #243745
    3 - #6b8048
    4 - #65a69e
    5 - #eab721
*/

/******************************
  Global
******************************/
/* Border Box Sizing */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/******************************
  Headers
******************************/
/* Headers */
h1 {
	font-size: 1.5em; /* 48px / 16px = 3em */
	text-align: center;
	

}

h2 {
	color: #c9596b;
	font-size: 1em; /* 30px / 16px = 1.85em */
	text-align: center;
    margin-bottom: 75px;
    
}

h3 {
   font-size: 1em; /* 24px / 16px = 1.5em */
    
}

h4 {
   font-size: .8em;
    
}

h6 {
    text-align: center;
    font-size: 13px;
    margin-bottom: 7em; 
    
}


/******************************
  Lists
******************************/
li {
    font-size: .5em;
	line-height: 1.5em;
    list-style: none;
    max-width: 75vh; 
}
ul {
    margin-bottom: 2em;
}


/******************************
  Links
******************************/
/* Links */
a:link, 
a:visited {
	color: #c9596b;
	text-decoration: none;
}

a:focus {
  background: #eab721;  
  color: #c9596b;
}

a:hover, 
a:active {
	color: #eab721;
	border-bottom: 4px double #6d6e71;
}

/******************************
  Images
******************************/
/*
img {
  
   
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.17), 0 6px 6px rgba(0,0,0,0.22);
}
*/



/******************************
   Main Navigation
******************************/
nav ul {
  display: flex;
    justify-content: center;
  /* Experiment with `justify-content` */
}

nav ul {
  margin: 0;
  padding: 0;
}

nav li {
  list-style: none;
}

nav a:link, 
nav a:visited {
  color: #000;
  display: block;
  padding: .5em;
  margin: .5em;
  text-decoration: none;
  
  /* Override Text Links */
  border-bottom: none;
}

nav a:hover,
nav a:active {
  color: #fff;
  background: #65a69e;
  border-radius: 2.5px;
  transition: 
    background .5s,
    border-radius 1s;
}


/******************************
   Form
******************************/
label, 
input,
textarea {
  display: block;
  margin: .25em;
  padding: .25em;
  width: 100%;
}

textarea {
  height: 5em;
}

input[type="submit"] {
  background: #c9596b;
  border-radius: 5px;
  width: 100;
  padding: 1em;
  border: none;
  color: #fff;
}

input[type="submit"]:hover {
  background: #eab721;
  color: #fff;
}


/* Contact */

.social ul {
  display: flex;
  list-style: none;
  justify-content: center;
}

.social img {
    box-shadow: none;
    height: 72px;
    display: block;
    margin: 1em;
    width: 72px;
}



/******************************
   Rows & Columns
******************************/
/* Layout */


/* Rows */
.row {
 margin: 10px 50px;
}

/* Columns */
.col {
  background: rgba(255,255,255,.65);
  margin: 50px;
  padding: 10px;


}

/* Flexbox Styling */


.col {
  /*  `flex-basis` value is arbitrary  */
  flex: 1 12em;
  margin: 0px 25px;
}

/* About Me */

.bio img {
    max-width: 250px;
    
}
.bio {
    display: block; 
    margin: 1em;
    margin: 25px 25px 50px 25px;
    text-align: center;
    font-size: 14px;
}

.bio p {
    display: flex;
    margin: 1em;
}


/* Home */


#cover {
    position: relative;
    width: 100%;
    object-fit: cover;
    max-width: none;
    box-shadow: none;

}


/* Arrows */
    







/*Portfolio */


.portfolio {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;

}

main img {
    display: flex;
    box-shadow: none; 
    max-width: 250px;
   
    
}



/* Lightbox Overlay */
/* hide  */
.overlay {
  display: none;
  
/* Overlay Styling   */
  background:rgba(0,0,0,.75);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;

  
}

/* show */
.overlay:target {
  display: block;
 
  /* Flexbox Vertical & Horizontal Centering */
  display: flex;
  flex-direction: column;
  min-height: 50vh;
  justify-content: center;
  align-items: center;
    
}

.overlay img {
    min-width: 55vh;
    max-width: 55vh;

}

/* Close Button  */
.overlay a {
  color: #fff;
  text-decoration: none;
    margin-top: 10px;
  font-size: 1em;
}



/* Footer */


.main-footer img, 
.main-footer a:active, 
.main-footer a:hover {
    box-shadow: none;
    height: 45px;
    margin: 0 5px 0 5px;
    width: 45px;
    border-bottom: none;

    
}

.main-footer {
    text-align: center;
    font-size: 75%;
   
   
}


/* Sticky Footer */

   .wrap {
    min-height: calc(100vh - 69px);
    margin-bottom: 50px;
}


/* Media Queries */
/* Mobile */
@media only screen
  (min-width: 20em) 
  and (max-width: 47.9375em)  { 

      
     .row {
          display: block;
          margin: 0 50px; 
      }
      
      .col {
          display: block;
          margin: 100px;
      }
      
      h6 {
          margin-bottom: 2em;
      }
     
    
 

   
}

/* Tablet */
@media only screen and (min-width: 48em)
 and (max-width: 63.9375em){
    
     
     
    .bio, 
    .bio img {
        display: flex; 
        margin-right: 25px;
        min-width: auto;
        text-align: left;

    }
    
     .bio,
     .col {
         margin: 50px 100px;
     }
     
     
     .col {
         display: flex; 
         flex-flow: column wrap;
     }
   
    .social ul {
          justify-content: flex-start;
      }
    
     h1 {
        font-size: 2.5em;
    }
     
     h2 {
        font-size: 1.5em;
     }
     h3 {
        font-size: 1.5em; /* 24px / 16px = 1.5em */
    
    }
     
     li {
    font-size: .8em;
	
    }
     
}

/* Desktop */
@media only screen and (min-width: 64em) {
    
    
    .bio, 
    .bio img {
        display: flex; 
        text-align: left;
        margin-right: 50px;
        font-size: 1em;

    }
    
    
    .bio,
    .col {
         margin: 50px 150px;
     }

    
     .row {
        display: flex;
        flex-flow: row wrap;
        margin: 25px;
    }
    
     .social ul {
          justify-content: flex-start;
      }
    
    h1 {
        font-size: 2.5em;
    }
     h2 {
        font-size: 1.5em;
     }
    h3 {
   font-size: 1.5em; /* 24px / 16px = 1.5em */
    }
    
    li {
    font-size: .8em;
    
	
}

}