/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */





body, html {
  font-family: 'Open Sans', sans-serif;
  font-size:16px;
  background-color: #f9fafc;
  color: #3d2a56;
}

a {
  font-weight: 700;
  color: #3d2a56;
  text-decoration: none;
}

p {
  font-size: 1em;
  line-height: 1.4;
}

img {
  width:100%;
  height: auto;
}

h1, h3, h4 {
  font-weight: 700;
}


h1 {
  font-family: 'Fredericka the Great', cursive;
  font-weight: 400;
  font-size: 2.5em;
  padding: 2% 0;
}



h2 {
  clear:both;
  font-family: 'Fredericka the Great', cursive;
  font-weight: 400;
  font-size: 2em;
  padding: 2% 0;
}


h3 {
  font-family: 'Raleway', sans-serif;
  font-size:1.25em;
  line-height: 1.4;

}

main, header {
  width:96%;
  padding: 0 2%;
  max-width: 1200px;
  margin:auto;
}

#top-section, #contact {
padding: 2% 0;
}

#skills, #projects, #about {
padding: 2% 0;
}

.project-explanation {
  padding: 2% 0;
}

.project-explanation h1 {
  font-size: 2em;
}


/******** HEADER **********/

header {
width:100%;
text-align:center;
}

/*** All Fredericka font noted as 400 as otherwise Chrome updates to bold ***/
header h1{
  font-family: 'Fredericka the Great', cursive;
  font-size: 2.75em;
  font-weight:400;
  padding: 0;
}

/******** NAVIGATION **********/
nav {
  width:100%;
}

nav ul {
  list-style: none;
  padding: 0;
}
nav ul li{
border-bottom: 2px solid #73adc3;
    padding: 0;
    text-align: center;

}
nav ul li a {
    text-transform: uppercase;
    font-family: 'Raleway', sans-serif;

    font-size: 1.2em;
}

/** Time Travel Button CSS **/

#timeTravelButton {
display:none;
}


/****** TOP SECTION - image and paragraph Also, general CSS ****/

 #top-section h3{
  width: 96%;
  padding: 2% 2%;
}

#banner-image {
  display:none;
}

#intro {
  display:none;
}





span{
  font-family: 'Fredericka the Great', cursive;
  font-weight: 400;
}




#self-portrait {
  width:95%;
padding: 0;
margin:auto;
}

#skills {
  text-align:center;
  padding: 2% 0;
}

.body-icon {
  width:30%;
  margin:auto;
  padding:0;
}

.card-image{
  width:100%;
  margin:auto;
  padding:0;
}

#skills p{
  font-weight: 700;
}



#projects p{
  text-align:center;
  padding-bottom:3%;
}


.projectimg {
  width:95%;
  margin:auto;
}



#contact ul {
  list-style: none;
}

#contact ul li {
 display:inline-grid;

}

.socicon {
  width:80%;
  margin:auto;
}

/*** Get in Touch ***/
#git-header{
  font-family: 'Raleway', sans-serif;
  font-size:2em;
  font-weight:700;
  text-transform: uppercase;
  padding-top:3%;
}

#get-in-touch p {
  font-size:0.8em;
}

#email-icon {
  padding-left:10%;
  vertical-align: middle;

  width:20%;
}

#email-text{
  font-family: 'Fredericka the Great',cursive;
  font-weight: 400;
  font-size:1.25em;
}


/*
.button {
    background-color: #3d2a56;
    border: 2px solid #73adc3;
    color: #f9fafc;
    padding: 4px 32px;
    text-align: center;
    text-decoration: none;
    text-transform:uppercase;
    display: inline-block;
    font-size: 16px;
  }
*/
  footer {
    padding-top:2%;
    border-top:2px solid #73adc3;
  }

  footer p {
    text-align:center;
    color: #3d2a56;
    font-size:1em;
  }




/*Map page CSS*/


.last-paragraph {
  padding-bottom: 3%;
}

/*Map related CSS*/
.map-container {
  width:96%;
  max-width:800px;
  margin: 0 auto;
  position:relative;
}

#stateResults {
  width: 25%;
  font: 12px/16px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #454545;
}

#countryResults {
  width: 95%;
  font: 16px/28px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #454545;
}
#stateResults, #countryResults {
  border-collapse: collapse;
  background-color: #f2f2f2;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
  -moz-box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
  box-shadow: 1px 1px 1px 1px rgba(204,204,204,0.5);
}

th, td {
  text-align: left;
  padding: 8px;
}
#stateResults th{
  background-color: #3b3b3b;
  color: white;
}
#countryResults th {
  background-color: #0000CD;
  color: white;
}
.name-1 {
  background-color: rgb(147,112,219);
  color: white;
}
.name-2 {
  background-color: rgb(102, 205, 170);
  color: white;
}
.winner {
  background-color: #0000CD;
  color: white;
}

#source p {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
#source span {
  color: #f16059;
  padding: 0 5px;
}


/*LOGO Page */
#header-explanation-img {
  margin: 2%;
}




/* New Worker Image page-specific CSS */
#main-twine-image img{
  width:90%;
  height:auto;
  margin: 2% auto;
}

#coffee-twine img {
    width:90%;
    height: auto;
    margin: 2%;
}


/* Client Site page-specific CSS */
#main-client-image img{
  width:90%;
  height:auto;
  margin: 2% auto;
}

#client-site img {
    width:90%;
    height: auto;
    margin: 2%;
}


/*Magic 8 Ball specific CSS */
#magic8ball {
font-family: "Montserrat", sans-serif;
color: #454545;
margin: 0px;
padding: 0px;
background-color: #f8f8f8;
width: 80%;
max-width: 960px;
margin: 0 auto;
}

#magic8ball h1 {
  font-family: "Montserrat", sans-serif;
}

.ball, .button {
  margin: 0 auto;
  position:relative;
  width:80%;
}
.answer {
  position:absolute;
  width:14%;
  top:50%;
  left:50%;
  margin-top:-60px;
  margin-left:-35px;
  font: 1.5em;
  color: #fff;
  text-transform: uppercase;
}

#questionButton {
  font: 26px 'Montserrat', Helvetica, Arial, sans-serif;
  border-radius: 5px;
  border: none;
  color: #f8f8f8;
  background-color: #f16059;
  padding: 10px 75px;
  display: block;
  margin: 0 auto;
}


#magic8ball-header {
  padding-top: 0.25em;
  text-align: center;
}
#magic8ball-header span {
  font-family: "Montserrat", sans-serif;
  font-size: 60px;
  color: #f16059;
}



#magic8ball-footer p {
  padding: 10px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
}

/* Ruby Challenge page-specific CSS */
#alwaysthree-image img{
  width:90%;
  height:auto;
  margin: 2% auto;
}

#fizzbuzz-image img {
    width:90%;
    height: auto;
    margin: 2%;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width:768px) {
 /* Tablet styles here */
body {
  width:96%;
  padding: 0 2%;
}


 h1 {
   font-size: 3em;
 }



 h2 {
   clear:both;
   font-size: 2em;
 }


 h3 {
   font-size:1.5em;
 }


 #top-section, #contact {
 padding: 3% 0;
 }

 #skills, #projects, #about {
 padding: 3% 0;
 }

 .project-explanation {
   padding: 0% 0;
 }

.project-explanation h1 {
  font-size: 2.5em;
}

 .full-width {
     width: 100%;
     margin: 0 auto;
 }

.half-width {
    width: 50%;
    float: left;
}
.third-width {
    width: 33.33%;
    float: right;
}

.third-width-projects {
    width: 33.33%;
    float: left;
}
.two-third-width {
  width:66.66%;
  float:left;
}

.fourth-width {
  width:25%;
  float:left;
  text-align: center;
}

header {
  height:100px;
  border-bottom: 2px solid #73adc3;
}


header h1{
  text-align:left;
}

nav ul {
  text-align:right;
}

nav ul li {
  display:inline-grid;
  border-bottom: none;
  margin-left:3%;
  margin-top: 5%;
}

/** Time Travel Button CSS **/

#timeTravelButton {
  display:block;
  float:right;
  color: #3d2a56;
  border: 1px solid #3d2a56;
  background-color: #f9fafc;
  font-size:0.5em;
  margin:0.5%;
}
#timeTravelButton:hover {
  background-color: #c0b3d1;
}


main {
  clear:both;
  font-size:1em;
}




#banner-image {
  width:100%;
  display:block;
}

#about {
width:100%;

}

#self-portrait {
  width:30%;
  margin-left: 2%;

}

#skills h2 {
  padding-top: 5%;
}

#skills {
  padding-bottom: 8%;
}

#projects h1 {
  padding-top: 8%;
}



footer {
  clear:both;
}




/* TWINE PAGE */

#coffee-twine {
      width:50%;
  float:right;
}


.twine-text p{
  padding: 0 3%;
  display:inline-block;
}

.twine-text-coffee {
  float:left;
  width:50%;

}

.twine-text-coffee p{
  padding:0 3%;
  display:inline-block;
}




/* CLIENT PAGE */

#client-site {
      width:50%;
  float:right;
}


.client-text p{
  padding: 0 3%;
  display:inline-block;
}

.client-text-mobile {
  float:left;
  width:50%;

}

.client-text-mobile p{
  padding:0 3%;
  display:inline-block;
}


/* RUBY CHALLENGES PAGE */

#fizzbuzz-image {
      width:50%;
  float:right;
}


.alwaysthree-text p{
  padding: 0 3%;
  display:inline-block;
}

.fizzbuzz-class {
  float:left;
  width:50%;

}

.fizzbuzz-class p{
  padding:0 3%;
  display:inline-block;
}



/*LOGO PAGE */
/* Logo Project page-specific CSS */

#header-explanation-img {
  width:66%;
  float:right;
}

#header-explanation-text {
  width:30%;
  float:left;
}


#first-logo-text p{
  padding: 0 3%;
}

#header-explanation-text p{
  padding:2% 3%;
  display:inline-block;
}

#logo-final-text p{
  padding:0 3%;
  display:inline-block;
}




}
@media only screen and (min-width:940px) {
  /* Desktop styles here */

}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}