html {
    scroll-behavior: smooth;
    background: #222;
    color: #ddd;
    font-family: sans-serif; /* Sets the font family of all h1 headings */
}

body {
    margin: 0; /* This ensures the site displays all the way to the edge of the browser screen */
    opacity: 1;
    transition: opacity 2s;
}

body.fade-out {
    opacity: 0;
    transition: none;
}

a {
    color: #d22; /* My accent color is red */
}

/* NAVIGATION */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #8882;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

nav ul {
    width: fit-content; /* keep the ul from spanning the whole page */
    padding: 0; /* remove extra space */
    margin: 8px auto; /* center horizontally */
    border-radius: 8px;
    overflow: hidden; /* for rounding the corners of the beginning and ening nav links */
}

nav li {
    list-style-type: none;
    display: inline;
    word-wrap: none;
}

nav a {
    display: inline-block;
    word-wrap: none;
    padding: 14px 18px;
    text-decoration: none;
    font-weight: bold;
    background-color: #222;
    color: #ddd;
    transition: color .2s, background-color .2s;
}

nav a:hover {
    color: #fff;
    background-color: #a11;
}

#vid {
    position: relative;
    height: 50vh;
    overflow: hidden;
    z-index: -1;
}

.row div {
    width: 50%;
    float: left;
}

/* Style the video: 100% width and height to cover the entire window */
video {
    width: 100%;
    min-width: 641px;
}

/* Heading 1 elements */
h1 {
    font-weight: bold;
    font-size: 36px;
    text-align: center; /* Centering all h1 elements */
    margin-top: 24px; /* Adds a small margin above h1 elements */
    color: #ddd;
    cursor: default;
}

/* Styling for portfolio title text */
.white-text {
    color: #fff; /* This is used to change the color of the portfolio title text */
}

/* Paragraph elements */
p {
    letter-spacing: 1px; /* This expands the text slightly */
    font-size: 1.1rem;
    padding-left: 20px; /* Adds padding to the left of the paragraph element */
    padding-right: 20px; /* Adds padding to the right of the paragraph element */
    cursor: default;
}

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

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

.image {
    overflow: hidden;
}

.github-image-div {
    height: 25vmax;
}

.github-image-div img {
    position: relative;
    top: calc(12.5vmax);
    transform: translate(0, -50%);
}

.github-image-div img:hover {
    transform: translate(0, -50%) scale(1.05);
}

/* Image elements */
img {
    width: 100%;
    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;
    transition: transform 1s; /* Transition lasts 1 second */
}

/* Image element hover effects */
img:hover {
    transform: scale(1.05); /* Image is enlarged 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) {
    .row div {
        float: none;
        width: auto;
    }
    #vid {
        display: none;
    }
}

/* Styling for footer element */
footer {
    text-align: center;
    background-color: #111;
    padding: 4px;
    margin-top: 64px;
    cursor: default;
}

/***** NAVBAR STYLING *****/
nav {
    overflow: hidden; /* This ensures that any content that overflows beyond the boundary of our nav bar is not displayed */
    position: sticky; /* This keeps the navbar at the top of the screen as we scroll */
    z-index: 1; /* This ensures other elements don't display over the navbar */
    -webkit-animation: moveNav 1s; /* This applies the moveNav animation below for Safari 4.0 - 8.0 */
    animation: moveNav 1s; /* 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 {
    from {left: -100vw;} /* The navbar is starting off screen to the left */
    to {left: 0vw;} /* This moves the navbar into place on the screen */
}

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

/* iframe styling for resume */
iframe {
    border: solid 4px #333;
    border-radius: 8px;
    box-shadow: 0 10px 48px 14px #111;
}

/* Texts over the video */
.Video_Text {
    background: rgba(0, 0, 0, 0.5); /* This provides a semi-transparent background for the text to sit over */
    color: white; /* Makes the font color white */
    width: 100%; /* Ensures the video-text container fills the width of the video */
    padding: 20px; /* This adds padding around the video-text container so that the background goes slightly beyond the text */
    position: relative; /* This sets the text 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 bottom of the page upon page load */
@keyframes moveVideoText {
    from {top: -100vw;} /* This sets the position of the video text to above the viewport */
    to {top: 0vw;} /* This moves the video text to the normal positioning on the viewport */
}

/***** 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; /* This creates a box with a border within which we will place most of our text */
}

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

/* This class is applied to the columns in the final row, overriding the height and padding to provide more room for the contact form  while keeping the rest of the 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 class "Row") */
.row:after {
	content: ""; /* By leaving this blank, we are allowing the footer (covered lower down) to be displayed - removing it makes the footer overwrite a column */
	display: table; /* The display property specifies the type of display behavior; the table value tells the browser to treat the element as a table */
	clear: both; /* This clears any other elements from floating on the left or the right of an element */
}

/***** CONTACT FORM STYLING *****/
/* input[type=text] targets all text input sections of the contact form */
input[type=text] {
    color: #ddd;
    caret-color: white;
    background-color: #111;
    width: 100%; /* Each input box covers the full width of the container */
    padding: 12px; /* Adds padding within the text box */
    border: 1px solid #ccc; /* Setting a solid border and its color */
    border-radius: 4px; /* Slightly rounds the corners of the text box border */
    box-sizing: border-box; /* This creates a box with a border around the contact form input boxes */
    margin-top: 6px; /* Adds a margin to the top of the text box */
    margin-bottom: 16px; /* Adds a margin to the bottom of 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 #00004d inset; /* This creates a blue shadow in the text box when hovered over by the user */
}

/* Submit button */
input[type=submit] {
    background-color: black; /* Sets the background color of the submit button to black */
    color: white; /* Sets the font color of the Submit button to white */
    font-weight: bold; /* Makes the font of the submit button bold */
    padding: 12px 20px; /* Adds padding to the submit button */
    border: none; /* Removes the border from the submit button */
    border-radius: 4px; /* Gives the submit button the same rounded corners as the text boxes */
    cursor: pointer; /* Changes 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;
    transition: all .5s; /* Makes the transform effect last 1.5 seconds */
}

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

/* Form element */
form {
    border-radius: 5px; /* Rounds the corners of the contact form */
    background-color: #333; 
    padding: 10px; /* Adds padding to the contact form */
    margin: 10px;
}
/***** END OF CONTACT FORM STYLING *****/