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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0%;  /* site displays all the way to the edge of the browser screen */
    opacity: 1;
    transition: 3s opacity;
    letter-spacing: .2vw;
    font-family: Avant Garde, Helvetica;
    font-size: 1.5vw;
    overflow-x: hidden;
    user-select: none;
}

body.fade-out {
    opacity: .1;
}

h1 {
    text-transform: uppercase;
    font-family: "Trebuchet MS", Optima;
    text-align: center;
    margin-top: 3%;
    color: #1a1a1a; 
}

h1:hover {
    filter: grayscale(5%);
    transform: scale(1.1);
    transition: transform 1s;
}

/* Styling for portfolio title text */
.white-text {
    color: rgba(255, 255, 255, 0.699); 
    padding-top: 10vh;
}

p {
    font-family: Perpetua, Rockwell Extra Bold;
    text-align: justify; /* Justify text within paragraph elements */
    letter-spacing: .1vw;
    font-size: 2.5vw;
    padding-left: 1vw;
    padding-right: 1vw;
}

p:hover {
    transition: transform 1s;
	transform: scale(1.01);
}

.center {
    text-align: center;
}

.center:hover {
    transition: transform 2s;
    transform: scale(1.1);
}

/* Anchor elements */
a {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

q {
    font-style: italic;
}

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

img:hover {
	filter: grayscale(35%);
    transition: transform 1s;
	transform: scale(1.1);
}

/* 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: rgba(255, 255, 255, 0.685);
}
/***** END OF GENERAL STYLING *****/

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

/* moveNav 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: rgb(214, 213, 213);
    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;
}

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

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

.Navbar a:hover {
    background-color: #f4f4f4ab;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s ease-in;
}

/* Navbar home button */
.Navbar a.active { 
    background-color: darkgray;
}
/***** END OF NAVBAR STYLING *****/

/***** VIDEO STYLING *****/
/* Formatting for background video */
#Typing_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) {
    #Typing_Video {
        display: none;
    }
}

.Video_Text {
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.726);
    width: 100%;
    height: 100vh;
    padding-top: 2vw;
    position: relative;
    -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;}
    to {top: 0vw;}
}
/***** END OF VIDEO STYLING *****/

/** Slideshow Styling **/
#Slideshow_Background {
    background: rgba(255, 255, 255, 0.35);
}

.mySlides{
    display: none;
}

#Slideshow_Container {
    width: 39.5vw;
    height: auto;
    padding-top: 4%;
    position: relative;
    margin: auto;
}

#Slideshow_Container a {
    text-decoration: none;
}

.Slideshow_Images {
    vertical-align: middle;
    height: auto;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .75);
    width: 100%;
}

.Previous, .Next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 2vw;
    color: darkgray;
    font-weight: bold;
    font-size: 1.5vw;
    border-radius: 0 3px 3px 0;
    user-select: none;
    transition: 0.6s ease;
}

.Next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.Previous:hover, .Next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
}

.text {
    color: white;
    padding: 1vw;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-family: Perpetua, Rockwell Extra Bold;
    letter-spacing: .1vw;
    font-size: 1.5vw;
    background-color: rgba(0, 0, 0, 0.75);
    font-weight: bold;
    border-radius: 0px 0px 7px 7px;
}

.dot {
    cursor: pointer;
    height: 1vw;
    width: 1vw;
    margin: .35vw;
    background-color: white;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    z-index: 1;
}

.active, .dot:hover {
    background-color: black;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {opacity: .4;}
    to {opacity: 1;}
}

@keyframes fade {
    from {opacity: .4;}
    to {opacity: 1;}
}
/** end of slideshow 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 */
} 

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

/* 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: 1.6%;
    padding-top: 1.9%;
    height: 400px;
    background-color: #4d4d4d;
}

/* 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 */
}
/***** END OF TABLE STYLING *****/

/***** CONTACT FORM STYLING *****/
.Pop_Up_Button {
    position: fixed;
    bottom: 1.75vw;
    right: 1.75vw;
    width: 25vw;
    background-color: white;
    color: black;
    border: solid black;
    cursor: pointer;
    -webkit-animation: movePopup 5s;
    animation: movePopup 5s;
}

@keyframes movePopup {
    from {right: -40vw;}
    to {right: 1.75vw;}
}

@-webkit-keyframes movePopup {
    from {right: -40vw;}
    to {right: 1.75vw;}
}

.form-popup {
    z-index: 8;
    display: none;
    position: fixed;
    bottom: .5vw;
    right: .5vw;
}

.form-container {
    max-width: 49vw;
    padding: 1vw;
    background-color: white;
}

.form-container input[type=text] {
    width: 100%;
    padding: .93vw;
    margin: .6vw 0 .6vw 0;
    border: none;
    background: Gainsboro;
    font-size: 1vw;
}

button {
    font-family:'Trebuchet MS', Optima;
    letter-spacing: .3vw;
    font-size: 1.5vw;
    font-weight: bold;
    padding: 1.5vw;
    cursor: pointer;
    width: 100%;
    height: auto;
}

button:hover, .form-container .btn:hover {
    color: white;
    background-color: black;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    border-color: silver;
}

.form-container .btn {
    background-color: white;
    color: black;
    border-color: black;
    margin-bottom: 1vh;
}

.form-container .cancel {
    background-color: black;
    color: white;
    border-color: gray;
}

.form-container .cancel:hover {
    color: white;
    background-color: darkred;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    border-color: black;
}
/***** END OF CONTACT FORM STYLING *****/

/** media query section **/
@media screen and (max-width: 527px) {
    p {
        font-size: 3.75vw;
    }
}

@media screen and (min-width: 528px) and (max-width: 660px) {
    p {
        font-size: 3.5vw;
    }
}

@media screen and (min-width: 661px) and (max-width: 799px) {
    p {
        font-size: 2.75vw;
    }
}

@media screen and (min-width: 800px) and (max-width: 924px) {
    p {
        font-size: 2.5vw;
    }
}

@media screen and (min-width: 925px) and (max-width: 1050px) {
    p {
        font-size: 2.25vw;
    }
}

@media screen and (min-width: 1051px) and (max-width: 1310px) {
    p {
        font-size: 2vw;
    } 
}

@media screen and (min-width: 1311px) and (max-width: 1535px) {
    p {
        font-size: 1.75vw;
    }
}

@media screen and (min-width: 1536px) and (max-width: 2269px) {
    p {
        font-size: 1.5vw;
    }
}

@media screen and (min-width: 2270px) {
    p {
        font-size: 1.35vw;
    }
}

/** different screen sizes **/
@media screen and (max-width: 1080px) {
    .Navbar a{
        width: 20%; /* This sets each navbar link to 1/5 of the navbar */
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 1080px) {
    .quote{
        font-size: 3.5vw;
    }

    .white-text {
        font-size: 4.5vw;
    }
}

@media screen and (min-width: 1725px) {
    .Column_1 {
        height: 550px;
    }
    .Column_2 {
        height: 550px;
    }
}

@media screen and (min-width: 2000px) {
    h1{
        margin-top: 0;
    }
}
/**end media query**/