body{
    margin: 0%;
}

/*Heading 1 elements*/
h1{
    text-transform: uppercase;
    font-family: Copperplate, Papyrus, fantasy;
    text-align: center;
    margin-top: 3%;
    color: black;
    letter-spacing: 4px;
}

/*Heading 1 element hover effect*/
h1:hover{
    filter: grayscale(5%);
    transform: scale(1.1);
    transition: transform 1s;
}

/*Styling for portfolio title text*/
.white-text{
    color:#fff;
}

.black-text{
    color: black;
}

.black-text:hover{
    color: #8b0000;
}

.white-text:hover{
    color: red;
}
/*Paragraph elements*/
p{
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
    letter-spacing: 2px;
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.highlight{
    color: #B8860B;
}

/*Paragraph element hover effects*/
p:hover{
    text-decoration: underline;
    transition: transform 1s;
    transform: scale(1.01);
}

.center{
    text-align: center;
}

/*Center class hover effects - This only affects the quote, github link, and footer*/
.center:hover{
    transition: transform 2s;
    transform: scale(1.1);
}

/*Anchor elements*/
a{
    color: blue;
    font-weight: bold;
}

/*Quotation elements*/
q{
    font-style: italic;
}

/*Image elements*/
img{
    filter: grayscale(75%);
    border-radius: 8px;
    max-width: 100%;
    height: 340px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Image element hover effects*/
img:hover{
    filter: grayscale(5%);
    transition: transform 1s;
    transform: scale(1.2);
}

/*On Screens 576px and smaller the images will be 100px tall and centered veertically in the column*/
@media screen and (max-width: 576px){
    img{
        height: 100px;
        margin-top: 150px;
    }
}

/*Styling for footer element*/
footer{
    padding: 2%;
    background-color: white;
}

/******** End of general stylinh********/


/*Nav Bar Styling*/
.Navbar{
    overflow: hidden;
    background-color: #B8860B;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    -webkit-animation: moveNav 5s;
    animation: moveNav 5s;
}

/*movNav animation effect for moving the nav bar in from the left of the screen*/
@keyframes moveNav{
    from{left: -100vw;}
    to{left: 0vw;}
}

/*Navbar links*/
.Navbar a{
    float: left;
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Avante Garde, Helvetica;
    font-size: 20px;
    text-align: center;
    position: relative;
    -webkit-animation: moveNavText 5.75s;
    animation: moveNavText 5.75s;
}

/*moveNavText animation effect for moving the navabr text from above the view to the navbar*/
@keyframes moveNavText{
    from{top: -100vw;}
    to{top: 0vw;}
}

/*Screens 576px and smaller will display navabr links equally distributed*/
@media screen and (max-width: 576px){
    .Navbar a{
        width: 25%;
        font-size: 12px;
    }
}

/*Navbar hover effects*/
.Navbar a:hover{
    background-color: #f4f4f4;
    color: black;
    font-weight: bold;
}

/*Navbar home button*/
.Navbar a.active{
    background-color: black;
}

/*Navbar home button hover effects*/
.Navbar a.active:hover{
    color: gray;
}
/*****End of Navbar Styling*****/


/*Video Styling*/
/*Formatting for background video*/
#Programming_Video{
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    z-index: -1;
}

/*Screens that are 576px and smaller will not display the background video*/
@media screen and (max-width: 576px){
    #Programming_Video{
        display: none;
    }
}

/*Texts over the video*/
.Video_Text{
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    padding: 20px;
    position: relative;
    -webkit-animation: moveVideoText 6s;
    animation: moveVideoText 6s;
}

/*This animation effect causes the overlay video text to move up from the bottom of the page upon page Load*/
@keyframes moveVideoText{
    from{top: -100vw;}
    to{top: 0vw;}
}
/****** End of video styling ******/

/***** Table styling ******/
* { /* THe asterisk is a universal selector that applies this effect to all elements on the page*/
    box-sizing: border-box;
}

.Column_1{
    float: left;
    width: 50%;
    padding: 10px;
    padding-top: 3%;
    height: 400px;
    background-color: #faf0e6;
}

/*Screens 576px and smaller will display a scroll bar if the text overflows the column height*/
@media screen and (max-width: 576px){
    .Column_1{
        overflow: auto;
    }
}

.Column_2{
    float: left;
    width: 50%;
    padding-top: 1.9%;
    height: 400px;
    background-color: #a97c0a;
}

/* This class is applied to the columns in the final row, overrriding the height and padding to provide more room for the contact form while keeping the rest ofthe formatting from Column_1 or Column_2*/
.Column_tall{
    padding-top: 3.5%;
    height: 450px;
}

/*This inserts something after the content of selected elements (in this case the elements with the class "Row" */
.Row:after{
    content:"";
    display: table;
    clear: both;
}

/***** Contact form styling*****/
/* input[type=text] targets all text input sections of the contact form */
input[type=text]{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: Avante Garde, Helvetica;
}

/*Hover effects for input boxes*/
input[type=text]:hover{
    box-shadow: 0 0 5px #B8860B inset;
}

/*Submit button*/
input[type=submit]{
    background-color: black;
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: Avante Garde, Helvetica;
}

/*Hover effect for submit button*/
input[type=submit]:hover{
    background-color: #8b0000;
    color: black;
    transform: scale(1.5);
    transition: transform 1.5s;
}

/*Form element*/
form{
    border-radius: 5px;
    background-color: #faf0e6;
    padding: 10px;
    font-family: Avante Garde, Helvetica;
}
/*****End of contact form styling*****/