/***** GENERAL STYLING *****/

/* Applies to entire document */
html {
    scroll-behavior: smooth;  /* Ensures smooth page scrolling when nav bar elements clicked */
}

/* Body */
body {

    opacity: 3; /* This and transition alters page loading fade in effect */
    transition: 5s opacity; /* Results in 5 second fade in */
    font-family: Didot, serif; /* Sets the font family for body */
    font-size: 1.0vw; /* Sets the font size for body */
    overflow-x: hidden; /* Ensures that content that overflows beyond the boundary of our body is not displayed */
    user-select: none; /* Prevents text from being highlighted */
}

/* Heading 1 elements */
h1 {
    text-transform: uppercase; /* Capitalizing all h1 headings */
    font-family: Verdana, Geneva, Tacoma, sans-serif; /* Sets the font family of all h1 headings */
    text-align: center; /* Centering all h1 elements */
    margin: auto; /* Adds a small margin above h1 elements */
    color: #2c0980; /* Sets the font color for h1 elements */
}

/* 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 2s; /* Causes the transformation to last 1 second */
}

/* Styling for portfolio title text */
.white-text {
    color: #fff; /* Changes the color of the portfolio title text */
    padding-top: 2vh; /* Adds padding (5% of the viewport height) to the top of the Portfolio Title text */  
}

/* Paragraph elements */
p {
    font-family: Verdana, Geneva, Tacoma, sans-serif; /* Sets font family */
    text-align: center; /* Justify text within paragraph elements */
    letter-spacing: 1px; /* This expands the text slightly */
    font-size: 14px; /* Sets the font size for p elements */
    padding-left: 10px; /* Adds padding to the left of the paragraph element */
    padding-right: 10px; /* Adds padding to the right of the paragraph element */
    margin: 0.5 auto auto auto; /* Centers all paragraph text */
}

/* List elements */
li {
    font-family: Verdana, Geneva, Tacoma, sans-serif; /* Sets font family */
    text-align: left; /* Justify text within paragraph elements */
    letter-spacing: 1px; /* This expands the text slightly */
    font-size: 12px; /* Sets the font size for p elements */
    padding-left: 10px; /* Adds padding to the left of the paragraph element */
    padding-right: 10px; /* Adds padding to the right of the paragraph element */
    margin: 0.5 auto auto auto; /* Centers all paragraph text */
}

/* Paragraph element hover effect */
p:hover {
    transition: transform 2s; /* Sets transform effect to last 1 second */
	transform: scale(1.05); /* Makes paragraphs increase in size when hovered over */
}

/* Center class - this applies to all elements with the class "center" */
.center {
    text-align: center; /* Center aligns the text */
    font-size: 12px; /* Specifies the font size for text on the footer */
}

/* Anchor elements */
a {
    color: #9D2235; /* Ensures links are Razorback Red */
    cursor: pointer; /* Ensures links change the mouse to a grab symbol when hovered over or clicked */
}

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

/* Primary Image elements */
img {
    filter: grayscale(55%); /* Rids our pictures of 55% of their color */
    float: centered;
    position: center;
    width: 335px;
    max-width: 100%; /* Ensures images stay within the width of their container */
    max-height: 100%; /* Ensures images stay within the width of their container */
    height: 300px; /* Sets height of all images */
    margin: auto auto auto auto; /* Allows browser to set auto adjust margins */
    display: block;  /* Ensures other text will be displayed on the same line or row */
    border-radius: 7px 7px 0px 0px; /* Gives the text background rounded corners on the bottom left and right corners */
    object-fit: fill;
}

/* Image element hover effects */
img:hover {
	filter: grayscale(5%);  /* Brings back most of the image's color when hovered over */
}

/* @media rule 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: 5%; /* Gives the footer padding that is equal to % of the width of the element's area */
}
/***** END OF GENERAL STYLING *****/

/***** NAVBAR STYLING *****/
.Navbar {
    overflow: hidden; /* Ensures any content that overflows beyond the boundary of our nav bar is not displayed */
    background-color: rgba(157, 34, 53); /* Colors the navbar Razorback Red */
    position: fixed; /* Keeps the navbar at the top of the screen */
    top: 0; /* Ensures no space above the navbar */
    width: 100%; /* Makes the navbar span the width of the page */
    z-index: 1; /* 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; /* Applies moveNav animation for all browsers */
}


/* moveNav animation effect for moving the nav bar in from the left */
@keyframes moveNav {
    from {left: -100vw;} /* Navbar is starting off screen to the left */
    to {left: 0vw;} /* Moves the navbar into place */
}

/* Navbar links */
.Navbar a {
    float: left; /* Specifies that text floats on the left on the navbar */
    display: block; /* Ensures other text displayed on the same line or row */
    color: white; /* Font color for text on our navbar */
    padding: 14px 16px; /* Adds padding around our text */
    text-decoration: none; /* Gets rid of the underlines under navbar text */
    font-family: Avant Garde, Helvetica; /* Specifies font family for text on our navbar */
    font-size: 20px; /* Specifies the font size for text on our navbar */
    text-align: center; /* Centers text within its container */
    position: relative; /* Sets the text relative to normal positioning, allowing us to use the 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 {
    from {top: -100vw;} /* Sets navbar text above the viewport */
    to {top: 0vw;} /* This lowers the navbar text onto the navbar */
}

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

/* Navbar hover effects */
.Navbar a:hover {
    background-color: #f4f4f4; /* Defines the background color that will display when you hover over the link */
    color: black; /* Defines font color that will display when navbar a elements are hovered over */
    font-weight: bold; /* Makes text on the navbar bold when hovered over */
}

/* Navbar home button */
.Navbar a.active { /* Targets element on the navbar with the "active" class */
    background-color: #9D2235;;
}
/***** END OF NAVBAR STYLING *****/

/***** VIDEO STYLING *****/
/* Formatting for background video */
#Audio_Meter_Video {
    position: fixed; /* Fixes the video to the page */
    right: 0; /* Ensures there is no space between the edge of the video and the edge of the page */
    bottom: 0; /* Ensures no space between bottom of video and bottom of page */
    min-width: 100%; /* Ensures the video is displayed across the full width of the page */
    z-index: -1; /* Places video behind the other elements */
}

/* 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(0, 0, 0, 0.5); /* 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; /* Adds padding around the video-text container so background goes slightly beyond text */
    position: relative; /* Sets text relative to its normal positioning, allowing us to use the animation below */
    -webkit-animation: moveVideoText 5.75s;
    animation: moveVideoText 5.75s;
}

/* Animation effect causes the overlay video text to move up from the bottom of the page upon page load */
@keyframes moveVideoText {
    from {top: -100vw;} /* Sets the position of the video text to above the viewport */
    to {top: 0vw;} /* Moves the video text to the normal positioning on the viewport */
}
/***** 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; /* This creates a box with a border within which we will place most of our text */
} 

div {
    display: block; /* Displays elements as a block */
}

.Column_1 {
    float: left; /* Specifies that text floats on the left on the navbar */
    width: 50%; /* This ensures the column takes up half of the page width */
    padding: 8px; /* Sets padding on all sides */
    padding-top: 3%; /* This ensures there is space between the top of the column and our headings */
    height: 420px; /* This sets the height of the column to 400px -  this may need to be adjusted depending on the text you enter */
    background-color: #f2f2f2; /* 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; /* Specifies that text floats on the left on the navbar */
    width: 50%; /* This ensures the column takes up half of the page width */
    padding: 8px; /* Sets padding on all sides */
    padding-top: 3%; /* This ensures there is space between the top of the column and our headings */
    height: 420px; /* This sets the height of the column to 400px -  this may need to be adjusted depending on the text you enter */
    background-color: #3d3f03; /* Sets the background color of the columns with class Column_1 */
}

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

/* 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; /* Clears any other elements from floating on the left or the right of an element */
}
/***** END OF TABLE STYLING *****/

/***** SLIDESHOW STYLING -  this section covers the styling of the columns and rows within the table *****/
#Slideshow_Background {
    background: rgba(255, 255, 255, 0.35);
}

#Slideshow_Container {
    width: 39.5vw; /* Relative sizing of the container for the slidewshow set to 39.5% of the viewport width */
    height: auto; /* The height of the container is automatically adjusted based on the content it is displaying */
    padding-top: 3%; /* Adds a small padding to the top of the slideshow container */
    position: relative; /* This sets the container relative to its normal positioning */
    margin: 0 auto; /* This will horizontally center the container on the page */
}

.fade {
    animation-name: fade; /* Fade animation is defined below */
    animation-duration: 1.5s; /* The animation lasts 1.5 seconds */
    -webkit-animation-name: fade; /* Same as above for Safari 4.0-8.0 */
    -webkit-animation-duration: 1.5s;
}

.mySlides {
    display: none; /* Prevents images from being displayed, we will use JS to display these */
}

/* r */
@keyframes fade { /* This and transition alter the page loading fade in effect */
0% {
    opacity: .4;
    transform: translateY(-40px); /* fade starts */
}
100% {
    opacity: 1;
    transform: translateY(0); /* fade ends */
    }
}

/* prev and next buttons */
.Previous, .Next {
    cursor: pointer; /* Changes the mouse to a grab icon when the buttons are selected */
    position: absolute; /* This makes the next and previous buttons positioned relative to the slideshow container */
    top: 3%; /* This moves the prev and next icons up in the slideshow container */
    width: fit-content; /* The width of the buttons is automatically adjusted based on the content */
    padding: 3vw; /* Adds padding equal to 2% of the viewport width */
    color: #9D2235; /* Font color for prev and next icons */
    font-weight: bold; /* Applies bold to font */
    font-size: 5.0vw; /* Font size for prev and next icons */
    user-select: none; /* Property makes it so that the user cannot highlight the text */
    transition: 0.6s ease; /* Specifies details of hover transition */
}

/* Positioning the next button on the right hand side */
.Next {
    right: 0; /* Moves next button to the right side of slideshow container */
    border-radius: 3px 0 0 3px; /* Changes border radius on the next button to the top and bottom left of the button */
}

/* Hover effect on slide show buttons */
.Previous:hover, .Next:hover {
    color: #9D2235;; /* Makes the arrows razorback red when hovered over */
}

/* Slideshow text */
.text {
    color: white; /* Sets the color of the text under the slideshow */
    padding: 0.5vw; /* Sets padding on all sides relative to the viewport */
    margin: auto auto auto auto; /* Allows browser to set auto adjust margins */
    max-width: 100%; /* Ensures images stay within the width of their container */
    max-height: 100%; /* Ensures images stay within the width of their container */
    position: center; /* Ensures text is positioned within image */
    bottom: 0; /* Sets the text at the bottom of the image */
    width: 335px; /* Ensures element covers the full width of the image */
    text-align: center; /* Center text within the image */
    font-family: Perpetua, Rockwell Extra Bold;
    letter-spacing: .1vw; /* Gives slight spacing between the letters */
    font-size: 1.5vw; /* Font size is relative to the size of the viewport width */
    background-color: rgba(0, 0, 0, 0.75); /* Gives a slightly transparent black background */
    font-weight: bold;
    border-radius: 0px 0px 7px 7px; /* Gives the text background rounded corners on the bottom left and right corners */
}

.dot {
    position: center;
    cursor: pointer; /* The cursor changes to grab when hovered over the dots */
    height: 2.5vw; /* The dots are sized relative to the viewport width */
    width: 2.5vw; /* The dots are sized relative to the viewport width */
    letter-spacing: 1vw; /* Expands the text slightly */
    margin: .35vw;
    background-color: rgb(201, 197, 9); /* Colors dot icons */
    border-radius: 35%; /* Makes the dots circles by rounding each corner */
    display: inline-block; /* Allows the dots to sit next to each other rather than on a new line */
    transition: background-color 0.6s ease; /* When clicked on the dots transition to a different color when clicked or hovered over (the affect is defined below) */
    z-index: 1; /* Ensures other elements don't display over the dots */

}

/***** CONTACT FORM STYLING *****/
/* input[type=text] targets all text input sections of the contact form */
input[type=text] {
    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; /* 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; /* Allows the user to resize the text boxes vertically */
    font-family: Georgia, 'Times New Roman', Times, serif; /* Font family for contact form */
}

/* Hover effects for input boxes */
input[type=text]:hover {
    box-shadow: 0 0 5px #9D2235; 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 grab icon 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: Georgia, 'Times New Roman', Times, serif; /* Font family for contact form submit button */
}

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

/* Form element */
form {
    border-radius: 5px; /* Rounds the corners of the contact form */
    background-color: #f2f2f2; 
    padding: 10px; /* Adds padding to the contact form */
    font-family: Arial, Helvetica, sans-serif;
}

/* Button used to open the contact form - fixed at the bottom of the page */
.pop-up-button {
    background-color: #9D2235; /* Sets the background color of the pop up button to Razorback Red */
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
    animation: movePopup 5s;
}

/* The popup form - hidden by default */
.form-popup {
    display: none;
    position: fixed;
    bottom: 0;
    right: 15px;
    border: 3px solid #f1f1f1;
    z-index: 9;
}

/* Add styles to the form container */
.form-container {
    max-width: 500px;
    padding: 10px;
    background-color: white;
    font-family: Didot, serif; /* Sets the font family for body */
}
  
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

/* Set a style for the submit/login button */
.form-container .btn {
    background-color: maroon;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;

}

/* Add some hover effects to buttons */
  .form-container .btn:hover, .open-button:hover {
  opacity: 0.6;
}

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