/*! HTML5 Boilerplate v5.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
 *
 * These selection rule sets have to be separate.
 * 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
   ========================================================================== */
/*
PLANNING SESSION
PLANS
A similar big image a the top and bottom of the page
On the tital page, the adj scroll evey three seconds, I would love to make this work
When the user scrolls down the menu up top updates to what page they are on automatically
  three little dots appear under the current page
A mid section with my picture and small paragraph, with a thick strip of background color
A section that contains my documents.
  separate this section into tutorial, reflective, and definitions
    Will needs some kind of 'reveal' to the document title
  Images are centered with space on the side.
A section at the bottom for my contact information and a form that can be submitted to me
  I'd love to have it actually save somewhere useful
The menu stays at the top the whole time, no matter where the user goes

NOT FOR NOW
I don't intend to have the color option on the right side of the page
There is an odd reveal when the second large image comes into view, I probably won't worry about that
Everything else?

*/



#topopage {
  background-image: url("http://36.media.tumblr.com/tumblr_m8ee60M2lA1rqeb09o1_1280.jpg");
  background-size: cover;
  padding-bottom: 47em;
}
#heading {
  border: .2em solid lightyellow;
  background-color: white;
  opacity: 0.7;
  color: #A0789F;
  padding-bottom: 2.5em;
}

#topopage h1 {
  padding-left: 1em;
  font-size: 4em;
}

#topopage h2 {
  padding-left: 2em;
  font-size: 2em;
}

#menu {
  padding-right: 5em;
}

#menu li {
  float: right;
  list-syle: none;
  font-size: 1em;
  display: inline-block;
  padding-left: 5em;
  font-size: 1.3em;
}

#menu a {
  text-decoration: none;
}

#aboutme {
  display: block;
  background-color: #A0789F;
  color: lightgrey;
  padding-bottom: 8em;
}

#aboutme h2 {
  padding-left: 10%;
  color: darkgrey;
  font-size: 2em;
  padding-bottom: 2em;
  padding-top: 2em;
  width: 20%;
}

#aboutme p {
  width: 50%;
  padding-left: 10%;
  font-size: 1.3em;
  padding-bottom: 2em;
}

#aboutme img {
  float: right;
  border-radius: 560px;
  margin-right: 4em;
  width: 24%;
  margin-top: 3em;
  border: 1em solid lightyellow;
}

#journals {
  display: block;
  background-color: darkgrey;
  padding-bottom: 3em;
}

#journals h2 {
  text-align: center;
  padding-top: 2em;
}


#journals li {
  list-style: none;
  border: .3em solid lightgrey;
  width: 30%;
  padding-top: 3em;
  padding-bottom: 3em;
  text-align: center;
}

#contact {
  background-color: lightyellow;
  padding-bottom: 25em;
  color: lightgrey;
}

#myinfo {
  display: inline-block;
  color: white;
  font-size: 2.3em;
}

#contact {
  text-align: center;
  padding-top: 2em;
  color: darkgrey;
}

#contact h2 {
  font-size: 3em;
  color: #A0789F;
  font-family: cursive;
  font-weight: bold;
}

#addy {
  float: left;
  color: white;
  width: 30%;
  display: inline-block;
  text-align: center;
  font-size: 1.6em;
  text-shadow: 1px 1px 2px #000000;
}

#addy::first-line {
  color: pink;
  font-size: 1.5em;
}

#social {
  width: 30%;
  float: right;
  display: inline-block;
}

#social h4 {
  color: pink;
  font-size: 2.3em;
  text-shadow: 1px 1px 2px #000000;
  font-style: italic;
}

#social a {
  text-decoration: none;
  color: darkblue;
  padding-top: .1em;
  font-size: 1.4em;
}

#contactform {
  float: right;
  width: 27%;
  font-size: 1.6em;
  display: inline-block;
  text-align: center;
  padding-right: 4em;
}

#contactform button {
  background-color: darkgrey;
  margin-top: 3em;
}

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

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

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

/*
 * 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;
}

/*
 * 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: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

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

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        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,
    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;
    }

    img {
        max-width: 100% !important;
    }

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

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