/* ------------------------------------------------------
  Stylesheet Guide
  ------------------------------------------------------

    1. Global
        1.1. Fonts
            1.1.1. Header font - XXX
            1.1.2. Text font - XXX
        1.2. General styles
        1.3. Color scheme
            1.3.1. Blue (#4aa8fa) - Color scheme
            1.3.2. Pink (#fa5a88) - Color scheme
            1.3.3. Green (#2ddf7b) - Color scheme
        1.4. Typography
        1.5. Custom class
        1.6. Icons class
    2. Header
        2.1. Structure, logo
        2.2. Header text
    3. Sections
        3.1 Section header
        3.2. Main Index section
            3.2.1. Center-mid-1 
            3.2.2. Center-mid-2 
        3.3. Hobbies section
            3.3.1. Hobbies content
            3.3.2. Hobbies timeline
        3.4. Courses section
            3.4.1. Schedule section
            3.4.2. Skills 
        3.5. Contacts section
            3.5.1. Contact details
            3.5.2. Contact form
    4. Footer
    5. Media queries

------------------------------------------------------ */

/* I basically grouped css element that were part of a specific component of 
the website. For example I grouped all element related to the table on the
schedule page. I put this in the general styles section as one group. Then for more
specific or singular global elements, I placed those in the global section. I followed
some aspects of the style guide above, but made some stylistic choices about what exceptions
I might make in order to preserve said groupings. */


/* ------------------------------------------------------
    1. Global
------------------------------------------------------ */
    body {
    font-family:  'Times New Roman', sans-serif;
    font-size: 90%;
    color: #666;
    background-color: #628601;}

    li {
        list-style-image: url("images/icon-plus.png");
        line-height: 1.6em;}
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
            }

    ul li {
        display: inline;
        padding: 10px;
        float: right;
    }

    ul li a, 
    ul a :hover, 
    ul li a:focus, 
    ul li a:active {
    border: none;
    text-decoration: none;
    color: inherit;
    }

    video{
        width: 940px;
    }
    .summer2021SectionTitle{
        padding-left: 10px;
        font-size: 200%;
    }

    /* ------------------------------------------------------
        1.1. Fonts
    ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.1.1. Header font - Open Sans
        ------------------------------------------------------ */
			
			/* https://css-tricks.com/snippets/css/using-font-face/ */
			@font-face {
			              font-family: "Open Sans";
			              font-weight: normal;
			              font-style: normal;
			              src: url("../fonts/Open-Sans/OpenSans-Regular.eot");
			              src: url("../fonts/Open-Sans/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Open-Sans/OpenSans-Regular.woff") format("woff"), url("../fonts/Open-Sans/OpenSans-Regular.ttf") format("truetype");
			            }


		/* ------------------------------------------------------
            1.1.2. Text font - XXX
        ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.2. General styles
    ------------------------------------------------------ */
    /* This is the table style for the schedule page */
    table {
        border-spacing: 0px;}
    th, td {
        padding: 5px 30px 5px 10px;
        border-spacing: 0px;
        font-size: 90%;
        margin: 0px;}
    th, td {
        text-align: left;
        background-color: #9eec9c;
        border-top: 1px solid #f1f8fe;
        border-bottom: 1px solid #cbd2d8;
        border-right: 1px solid #cbd2d8;}
    tr.head th {
        color: #fff;
        background-color: #90b4d6;
        border-bottom: 2px solid #547ca0;
        border-right: 1px solid #749abe;
        border-top: 1px solid #90b4d6;
        text-align: center;
        text-shadow: -1px -1px 1px #666666;
        letter-spacing: 0.15em;}
    td {
        text-shadow: 1px 1px 1px #ffffff;}
    tr.even td, tr.even th {
        background-color: #9eec9c;}
    tr.head th:first-child {
        -webkit-border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        border-top-left-radius: 5px;}
    tr.head th:last-child {
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topright: 5px;
        border-top-right-radius: 5px;}
    /* This is the table style */

    /* Contact form style */
    legend {
        font-style: italic;
        color: #666666;}
    input[type="text"] {
        width: 120px;
        border: 1px solid #d6d6d6;
        padding: 2px;
        outline: none;}
    input[type="text"]:focus,
    input[type="text"]:hover {
        background-color: #d0e2f0;
        border: 1px solid #999999;}
    input[type="submit"] {
        border: 1px solid #006633;
        background-color: #009966;
        color: #ffffff;
        border-radius: 5px;
        padding: 5px;
        margin-top: 10px;}
    input[type="submit"]:hover {
        border: 1px solid #006633;
        background-color: #00CC33;
        color: #ffffff;
        cursor: pointer;}
    .title {
        float: left;
        width: 160px;
        clear: left;}
    .submit {
        width: 310px;
        text-align: right;}
    
    /* Contact form style */

    #page {
        max-width: 940px;
        min-width: 720px;
        margin: 10px auto 10px auto;
        
        border: 4px  #000;
        background-color: #fab9cde1;
        vertical-align: baseline;
    }







    /* ------------------------------------------------------
        1.3. Color scheme
    ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.3.1. Blue (#4aa8fa) - Color scheme
        ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.3.2. Pink (#fa5a88) - Color scheme
        ------------------------------------------------------ */

        /* ------------------------------------------------------
            1.3.2. Green (#) - Color scheme
        ------------------------------------------------------ */

    /* ------------------------------------------------------
        1.4. Typography
    ------------------------------------------------------ */
    

    /* ------------------------------------------------------
        1.5. Custom Class
    ------------------------------------------------------ */

    .center-mid-3{
        width: 940px;
        background-color: #dee1e5;
        padding-bottom: 15px;
        padding-top: 5px;
        }

    .center-2{
        width: 940px;
        margin: auto;
        padding-bottom: 15px;
        padding-top: 5px;
        }
    
    .center-3{
        width: 300px;
        margin: 0 0;
        }

    .img-1{
        margin: auto;
        width: 100%;
    }
    .img-2{
        margin: auto;
        width: 30%;
    }
        
    .img-3{
        margin: auto;
        width: 30%;
        padding-left: 10px;
    }
    .img-4summer{
        margin: auto;
        width: 63%;
        padding-left: 10px;
        text-align: left;
        

    }
    .column1{
        width: 63%;
        background-color: #BEB594;
        padding-bottom: 15px;
        padding-top: 5px;
        float:left;
    }
    .column2{
        width: 30%;
        background-color: #BEB594;
        padding-bottom: 15px;
        padding-top: 5px;
        float:left;

    }
    .summerPadding{
        padding-bottom: 10px;
        padding-bottom: 300px;
    }


    .center-text {
        text-align: center;
    }

    

    .center-2>h1, .center-2>p{
        text-align: center;
    }
    h1.center-text{
				font-family: 'Times New Roman', serif;
				font-size: 550%;
			}
    }

    .menu-holder {
        float: right;
        max-width: 80%;
        position: fixed;
        text-align: center;
        height: 100%;
        background-color: #ffffff;
        right: -100%;
        top: 0;
        transition: right .3s ease;
        width: 100%;
        overflow: auto;
        max-width: 100%;
        z-index: 99;
            }     

			

    /* ------------------------------------------------------
        1.6. Icons Class 
    ------------------------------------------------------ */
        .smlogo{
            height: 21.3px;
            width: 17px;
            margin: auto;
        }
/* ------------------------------------------------------
    2. Header
------------------------------------------------------ */


/* ------------------------------------------------------
    3. Sections
------------------------------------------------------ */

    /* ------------------------------------------------------
        3.2. Main Index section
    ------------------------------------------------------ */
    .center-mid-1{
        width: 940px;
        background-color: #BEB594;
        padding-bottom: 15px;
        padding-top: 5px;
        }

    .center-mid-2{
        width: 940px;
        background-color: #efeae6;
        padding-bottom: 15px;
        padding-top: 5px;
        }

    /* ------------------------------------------------------
        3.5 Contact Form
    ------------------------------------------------------ */
        fieldset {
            width: 310px;
            margin-top: 20px;
            border: 1px solid #d6d6d6;
            background-color: #048a834f;
            line-height: 1.6em;}