/*sets default text style and background image*/
body {
    color: #777777;
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    background-image: url("../images/sakura.png");
}

/*sets header text style*/
h2 {
    color: #4aaaa5;
    font-family: 'Georgia', Times, Times New Roman, serif;
    font-size: 20pt;
}

/*sets header text style*/
h3 {
    color: #4aaaa5;
    font-family: 'Georgia', Times, Times New Roman, serif;
}

/*changes the color of the horizontal rule*/
hr {
    border-top: 2px solid #dddddd;
}

/*sets paragraph padding*/
p {
    padding: 5px;
}

/*formats links*/
a:link {
    color: #777777;
    text-decoration: none;
}
a:visited {
    color: #4aaaa5;
    text-decoration: none;
}
a:hover {
    color: mistyrose;
    text-decoration: none;
}

/*creates a larger message box for the contact form*/
textarea {
    height: 200px;
}

/*used to keep the divs under control*/
.clearFix:after {
    content: " "; /* Older browser do not support empty content */
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

/*the main header is the top bar of the page*/
.mainHeader {
    background-color: #ffffff;
    border-style: solid;
    border-color: #cccccc;
    border-width: 1px;
    margin-bottom: 20px;
}

.navbar-brand {
    min-width: 200px;
    color: white !important;
}

/*contains the title, aka my name*/
.innerHeader {
    background-color: #4aaaa5;
    color: white;
    height: 50px;
    font-size: 20pt;
    text-align: center;
    float: left;
    font-family: 'Georgia', Times, Times New Roman, serif;
}

.aboutHeader {
    border-right: 1px solid #dddddd;
    text-align: center;
}

.portfolioHeader {
    border-right: 1px solid #dddddd;
    text-align: center;
}

.contactHeader {
    text-align: center;
}

/*contains the main content and largest section of the page*/
.mainContent {
    background-color: #ffffff;
    box-sizing: border-box;
    border-style: solid;
    border-color: #dddddd;
    border-width: 1px;
    float: left;
    margin-bottom: 80px;
    margin-right: 20px;
    clear: both;
    line-height: 150%;
    max-width: 850px;
}

/*formats the submit button on the contact form page*/
.myButton {
    background-color: #4aaaa5;
    color: #ffffff;
    padding: 7px 20px;
    border: none;
    cursor: pointer;

}

/*formats portfolio pictures*/
.portfolio {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*contains social media links to gitHug, LinkedIn, and Stack Overflow*/
.connectContent {
    color: #4aaaa5;
    background-color: #ffffff;
    float: left;
    padding-bottom: 20px;
    margin-bottom: 80px;
    border-style: solid;
    border-width: 1px;
    border-color: #dddddd;
    font-size: 15pt;
    text-align: center;
    max-width: 850px;
}

/*sets icon dimensions*/
.icon {
    width: 60px;
    height: 60px;
}

/*in the bar at the bottom of the screen*/
.footer {
    background-color: #666666;
    color: white;
    clear: both;
    text-align: center;
    font-size: 7pt;
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    border-top: #4aaaa5 5px solid
}

/*formats the profile picture on the about page*/
#profilePicture {
    float: left;
    padding: 10px;
    box-sizing: border-box;
}

/*formats the portfolio <a> tags containing the images and headers*/
#hangman, #getOutdoors, #triviaGame, #trainScheduler, #giphy {
    position: relative;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    padding: 0;
    margin-top: 10px;
    float: left;
}

/*formats the headers for the portfolio images/links*/
#hangmanHead, #getOutdoorsHead, #triviaGameHead, #trainSchedulerHead, #giphyHead {
    position: absolute;
    box-sizing: border-box;
    bottom: 35px;
    padding: 10px 0 10px 0;
    margin: 0;
    z-index: 2;
    background-color: #4aaaa5;
    color: #ffffff;
    text-align: center;
    font-family: 'Georgia', Times, Times New Roman, serif;
    white-space: nowrap;
}

/*styles main content and profile picture sizing on medium screen sizes and below*/
@media screen and (max-width:992px) {
    .mainContent {
        margin-bottom: 20px;
    }

    #profilePicture {
        max-width: 400px;
    }
}

/*styles profile picture on small screen sizes and below*/
@media screen and (max-width:767px){
    #profilePicture {
        max-width: none;
    }
}