/***** GENERAL STYLING *****/
html {
    scroll-behavior: smooth;
    scroll-padding: 50px;
}

/* Body */
body {
    margin: 0%
        /* This ensures site displays from edge to edge of the browser */
}

/* Heading 1 elements */
h1 {
    font-family: "Trebuchet MS", Optima;
    /* Sets the font family of h1 headings */
    text-align: center;
    /* Center h1 elements */
    margin-top: 3%;
    /* Adds a small margin above h1 elements */
    color: #2a0a4a;
}

/* Heading 1 element hover effect */
h1:hover {
    filter: grayscale(50%);
    /* Adds a gray filter to the h1 headings when hovered over */
    transform: scale(1.2);
    /* Causes h1 elements increase in size by a scale of 1.2 */
    transition: transform 1.5s;
    /* Causes the size increase to scale over 1.5 seconds */
}

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

/* Paragraph elements */
p {
    font-family: Perpetua, Rockwell Extra Bold;
    text-align: justify;
    /* Justify text within paragraph elements */
    letter-spacing: 1px;
    /* Expands the text slightly */
    font-size: 20px;
    padding-left: 20px;
    /* Adds padding to the left of paragraph elements */
    padding-right: 20px;
    /* Adds padding to the right of paragraph elements */
}

/* Paragraph element hover effect */
p:hover {
    transform: scale(1.05);
    /* Paragraphs increase slightly in size when hovered over */
    transition: transform 1.5s;
    /* Causes the scaling effect to last 1.5 second */

}

/* Center class - sets all elements with class="center" */
.center {
    text-align: center;
    /* This center aligns the text */
}

/* Center class hover effect - This only affects the quote, github link, and footer */
.center:hover {

    transform: scale(1.05);
    /* This makes the elements with class "center" increase in size by 1.05 when hovered over */
    transition: transform 1.5s;
    /* Causes the scaling effect to last 1.5 seconds */
}

/* Anchor elements */
a {
    color: #ff7a00;
    /* This ensures all links are blue */
}

/* Quotation elements */
q {
    font-style: italic;
    /* This makes the quote italicized */
}

/* Image elements */
img {
    filter: grayscale(35%);
    /* Removes 35% of image color */
    border-radius: 10px;
    /* Rounds image corners */
    max-width: 98%;
    /* Ensures all images stay within the width of their container */
    height: 340px;
    /* Sets the height of all images */
    display: block;
    /* Block display ensures images are centered */
    margin-left: auto;
    /* In combination with "margin-right: auto" this centers all images */
    margin-right: auto;
}

/* Image element hover effects */
img:hover {
    filter: grayscale(1%);
    /* Brings back most of the image's color when hovered over */
    transform: scale(1.05);
    /* Image is increased slightly when hovered over */
    transition: transform 1.5s;
    /* Transition lasts 1.5 second */
}

/* The @media rule is used in media queries to apply different styles for different media/types of devices */
/* On screens 576px and smaller the images will be 100px tall and centered vertically in the column */
@media screen and (max-width: 576px) {
    img {
        height: 100px;
        margin-top: 150px;
    }
}

/* Styling for footer element */
footer {
    padding: 2%;
    /* This gives the footer padding that is equal to 2% of the width of the element's area */
    background-color: #fff3e8;
}

/***** END OF GENERAL STYLING *****/

/***** NAVBAR STYLING *****/
.Navbar {
    overflow: hidden;
    /* Sets the excess portion of the navbar to hidden  */
    background-color: #2a0a4a;
    /* This colors the navbar black */
    position: fixed;
    /* Locks navbar position at the top of the screen */
    top: 0;
    /* Eliminates extra space above the navbar */
    width: 100%;
    /* This makes the navbar span the entire width of the page */
    z-index: 1;
    /* This ensures other elements don't display over the navbar */
    -webkit-animation: moveNav 5s;
    /* This applies the moveNav animation below for Safari 4.0 - 8.0 */
    animation: moveNav 5s;
    /* This applies the moveNav animation for all other browsers */
}

/* moveNav animation effect for moving the nav bar in from the left of the screen */
@keyframes moveNav {

    /* The navbar is starting off screen to the left */
    from {
        left: -100vw;
    }

    /* This moves the navbar into place on the screen */
    to {
        left: 0vw;
    }


}

/* Navbar links */
.Navbar a {
    float: left;
    /* Sets the text to float on the left on the navbar */
    display: block;
    /* Sets the text display on the same line or row, instead of a new line */
    color: #fff;
    /* Sets font color for text on navbar */
    padding: 14px 16px;
    /* This adds padding around navbar text */
    text-decoration: none;
    /* Eliminates underlines under the text on our navbar */
    font-family: Avant Garde, Helvetica;
    /* Sets the font family for navbar text */
    font-size: 20px;
    /* Sets the font size for navbar text */
    text-align: center;
    /* Centers the text within its container */
    position: relative;
    /* Sets the text relative to its normal positioning, which allows the use of animation below */
    -webkit-animation: moveNavText 5.75s;
    /* Animation for Safari 4.0 - 8.0 */
    animation: moveNavText 5.75s;
    /* Applies the moveNavText animation for 5.75s */
}

/* moveNavText animation effect for moving the navbar text from above the view to the navbar */
@keyframes moveNavText {

    /* This sets the navbar text 100% above the viewport */
    from {
        top: -100vw;
    }

    /* This lowers the navbar text onto the navbar */
    to {
        top: 0vw;
    }

}

/* Screens 576px and smaller will display navbar links equally distributed */
@media screen and (max-width: 576px) {
    .Navbar a {
        width: 25%;
        /* This makes each link take up 1/4 of the navbar */
        font-size: 12px;
    }
}

/* Navbar hover effects */
.Navbar a:hover {
    background-color: #ff7a00;
    /* Sets the background color when user hovers over the link */
    color: #2a0a4a;
    /* Sets the font color when user hovers over navbar a elements */
    font-weight: bold;
    /* Sets the navbar text styling when a user hovers over elements */
}

/* Navbar home button */
.Navbar a.active {
    /* This targets the a element on the navbar with the "active" class */
    background-color: #6d28d9;
}

/***** END OF NAVBAR STYLING *****/

/***** VIDEO STYLING *****/
/* Formatting for background video */
#Typing_Video {
    position: fixed;
    /* This fixes the video position on the page */
    right: 0;
    /* Eliminates space between the edge of the video and the edge of the page */
    bottom: 0;
    /* Eliminates space between the bottom of the video and the bottom of the page */
    min-width: 100%;
    /* sets the video to display across the full width of the page */
    z-index: -1;
    /* Sets the video postion behind all other elements on the page */
}

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

/* Texts over the video */
.Video_Text {
    background: rgba(42, 10, 74, 0.55);
    /* Creates a semi-transparent background for text to sit over */
    color: #fff;
    /* Sets text font color white */
    width: 100%;
    /* Sets the video-text container to fills the full width of the video */
    padding: 20px;
    /* Adds padding around the video-text container so that the background goes slightly beyond the text */
    position: relative;
    /* Sets the text position relative to its normal positioning, allowing us to use the animation below */
    -webkit-animation: moveVideoText 5.75s;
    animation: moveVideoText 5.75s;
}

/* This animation effect causes the overlay video text to move up from the top of the page upon page load */
@keyframes moveVideoText {

    /* Sets the position of the video text to above the viewport to start*/
    from {
        top: -100vw;
    }

    /* Sets the final location of the video text to the normal positioning on the viewport */
    to {
        top: 0vw;
    }

}

/***** END OF VIDEO STYLING *****/

/***** TABLE STYLING -  this section covers the styling of the columns and rows within the table *****/
* {
    /* The asterisk is a universal selector that applies this effect to all elements on the page */
    box-sizing: border-box;
    /* Creates a border to surround most of the text */
}

.Column_1 {
    float: left;
    width: 50%;
    /* Sets the column width to half of the page available */
    padding: 10px;
    padding-top: 3%;
    /* Sets space between the top of the column and page headings */
    height: 400px;
    /* Sets the height of the column to 400px */
    background-color: #fff3e8;
    /* Sets the background color of the columns with class="Column_1" */
}

/* 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%;
    /* Sets the column width to half of the page available */

    padding: 10px;
    padding-top: 1.9%;
    /* Sets space between the top of the column and page headings */

    height: 400px;
    /* Sets the height of the column to 400px */

    background-color: #2a0a4a;
    /* Sets the background color of the columns with class="Column_1" */

}

/* This class for columns in the final row, with different height and padding values to provide more room for the contact form while maintaining the rest of the formatting from the other columns*/
.Column_tall {
    padding-top: 3.5%;
    height: 450px;
}

/* Inserts an element after the content of selected elements */
.Row:after {
    content: "";
    /* Empty string allowings the footer to be displayed - needed to maintain the footer visibility */
    display: table;
    /* Sets the type of display method used. The table value tells the browser to treat the element as a table with cells*/
    clear: both;
    /* This clears any other elements from floating on the left or the right of an element */
}

/***** END OF TABLE STYLING *****/

/***** CONTACT FORM STYLING *****/
/* input[type=text] targets all text input sections of the contact form */
input[type=text] {
    width: 100%;
    /* Sets input box width to cover the full width of the container */
    padding: 12px;
    /* Adds padding within the text box */
    border: 1px solid #ff7a00;
    /* Sets the input container to have a solid border and its color */
    border-radius: 6px;
    /* Rounds the corners of the text box border */
    box-sizing: border-box;
    /* Adds a box with a border around the contact form input boxes */
    margin-top: 6px;
    /* Sets the value of the margin above the text box */
    margin-bottom: 16px;
    /* Sets the value of the margin below the text box */
    resize: vertical;
    /* This allows the user to resize the text boxes vertically */
    font-family: Perpetua, Rockwell Extra Bold;
}

/* Hover effects for input boxes */
input[type=text]:hover {
    box-shadow: 0 0 5px #6d28d9 inset;
    /* Adds a hover effect of a blue shadow around the text box */
}

/* Submit button */
input[type=submit] {
    background-color: #2a0a4a;
    /* Sets the background color of the submit button to black */
    color: #fff;
    /* Sets the font color of the Submit button to white */
    font-weight: bold;
    /* Styles the font of the submit button bold */
    padding: 12px 20px;
    /* Adds padding around the submit button */
    border: none;
    /* Removes the border from the submit button */
    border-radius: 6px;
    /* Adds rounded corners to the submit button like the text boxes */
    cursor: pointer;
    /* Styles the cursor to pointer when over the submit button */
    display: block;
    /* Allows the submit button to be centered */
    margin-left: auto;
    /* In combination with "margin-right: auto" this will center the submit button */
    margin-right: auto;
    font-family: Perpetua, Rockwell Extra Bold;
}

/* Hover effect for submit button */
input[type=submit]:hover {
    background-color: #ff7a00;
    /* Sets the background of the submit button white when the user hovers over it */
    color: #2a0a4a;
    /* Turns the font black when hovered over */
    transform: scale(1.2);
    /* Makes the button increase 1.2 times in size */
    transition: transform 1.5s;
    /* Makes the transform effect last 1.5 seconds */
}

/* Form element */
form {
    border-radius: 5px;
    /* Rounds the corners of the contact form */
    background-color: #fff3e8;
    padding: 10px;
    /* Adds padding to the contact form */
    font-family: "Trebuchet MS", Optima;
}

/***** END OF CONTACT FORM STYLING *****/