body {
    margin: 0%  /* This ensures our site displays all the way to the edge of the browser screen */
}

/* Heading 1 elements */
h1 {
    text-transform: uppercase; /* Capitalizing all h1 headings */
    font-family: "Trebuchet MS", Optima; /* Sets the font family of all h1 headings */
    text-align: center; /* Centering all h1 elements */
    margin-top: 3%; /* Adds a small margin above h1 elements */
    color: #1a1a1a; 
}

/* Heading 1 element hover effect */
h1:hover {
    filter: grayscale(5%); /* Adds a slightly gray filter to the h1 headings when hovered over */
    transform: scale(1.1); /* When the h1 elements are hovered over they increase in size by 1.1 */
    transition: transform 1s;

}

/* Styling for portfolio title text */
.white-text {
    color: #fff; /* This is used to change 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; /* This expands the text slightly */
    font-size: 20px;
    padding-left: 20px; /* Adds padding to the left of the paragraph element */
    padding-right: 20px; /* Adds padding to the right of the paragraph element */
}

/* Paragraph element hover effect */
p:hover {
    transition: transform 1s; /* This makes the transform effect last 1 second */
	transform: scale(1.01); /* This makes the paragraphs increase slightly in size when hovered over */
}

/* Center class - this applies to all elements with the 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 {
    transition: transform 2s; /* This makes the transform effect last 2 seconds */
    transform: scale(1.1); /* This makes the elements with class "center" increase in size by 1.1 when hovered over */
}

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

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

.center_video:hover {
    color:rgb(4, 179, 248);
}

/* Image elements */
img {
    filter: grayscale(75%); /* This rids our pictures of 75% of their color */
    border-radius: 8px; /* Gives all images slightly rounded corners */
    max-width: 100%; /* Ensures all images stay within the width of their container */
    height: 340px; /* Sets the height of all images */
    display: block; /* By specifying block display we can ensure our images are able to be 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(5%);  /* Brings back most of the image's color when hovered over */
    transition: transform 1s; /* Transition lasts 1 second */
	transform: scale(1.1); /* Image is increased slightly when hovered over */
}

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




footer {
    padding: 2%; 
    background-color: white;
}

.Navbar {
    overflow: hidden; 
    background-color: black; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1;
    -webkit-animation: moveNav 5s;
    animation: moveNav 5s; 
}

.Navbar a.active { 
    background-color: darkgray;
}

.Navbar a.active:hover{
    background-color:rgb(65, 82, 65);

}

@keyframes moveNav {
    from {left: -100vw;} 
    to {left: 0vw;} 
}

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


@keyframes moveNavText {
    from {top: -100vw;} 
    to {top: 0vw;} 
}


@media screen and (max-width: 576px) {
    .Navbar a{
        width: 25%; 
        font-size: 12px;
    }
}


.Navbar a:hover {
    background-color:rgb(65, 82, 65); 

    font-weight: bold; 
}




#Typing_Video {
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    z-index: -1; 
}


@media screen and (max-width: 576px) {
    #Typing_Video {
        display: none;
    }
}


.Video_Text {
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    width: 100%; 
    padding: 20px; 
    position: relative; 
    -webkit-animation: moveVideoText 5.75s;
    animation: moveVideoText 5.75s;
}


@keyframes moveVideoText {
    from {top: -100vw;} 
    to {top: 0vw;} 
}



* { 
    box-sizing: border-box; 
} 

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


@media screen and (max-width: 576px) {
    .Column_1 {
        overflow: auto;
    }
}

.Column_2 {
    float: left;
    width: 50%;
    padding: 10px;
    padding-top: 1.9%;
    height: 400px;
    background-color:rgb(65, 82, 65);
}


.Column_tall {
    padding-top: 3.5%;
    height: 450px;
}

.Row:after {
	content: "";
	display: table; 
	clear: both; 
}

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: Perpetua, Rockwell Extra Bold;
}


input[type=text]:hover {
    box-shadow: 0 0 5px #00004d inset; 
}


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: Perpetua, Rockwell Extra Bold;
}


input[type=submit]:hover {
    background-color:rgb(65, 82, 65); 
    color: white; 
    transform: scale(1.5); 
    transition: transform 1.5s; 
    border-radius:8px;
}

/* Form element */
form {
    border-radius: 5px;
    background-color: #f2f2f2; 
    padding: 10px;
    font-family: "Trebuchet MS", Optima;
}