/*FONTS*/

/*Audiowide font from fonts.google.com (Primary)*/
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/*Titillium Web font from fonts.google.com (secondary*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

/*OVERALL STYLING*/

body{
    margin: 0%; /*Confirms webpage displays all the way to
    all edges*/
    overflow-y: scroll;
    overflow-x: hidden;
}

h1{
    font-family: "Audiowide", sans-serif; /*Font from fonts.google.com*/
    font-weight: 400;
    text-transform: uppercase; /*Displays in all caps*/
    text-align: center;
    margin-top: 5%; /*Slight margin above element*/
    color: rgb(11, 11, 11);
}

h1:hover{
    filter: grayscale(10%); /*Adds minor gray shade to text*/
    transform: scale(1.3); /*increases scale of element when hovered over*/
    transition: transform 1.5s; /*Duration of scale transform*/
}

/*Style for title text*/
.white-text{
    color: azure;
}

/*Paragraph elements styling*/
p{
    font-family: "Titillium Web", sans-serif; /*Font from
    fonts.google.com*/
    font-weight: 400;
    text-align: justify; /*Adjust space between words/characters
    to make them fill full width of line*/
    letter-spacing: 1px; /*slight space between characters*/ 
    font-size: 20px;
    /*Adds padding to left/right*/
    padding-left: 20px;
    padding-right: 20px; /*(May increase padding to the edge side of text)*/
}

p:hover{
    transition: transform 1.5s; /*Duration of scale transform*/
    transform: scale(1.03); /*increases scale of element when hovered over*/
}

/*Applies to all elements w/ center class*/
.center{
    text-align: center; /*Centers text w/ assigned class*/
}

/*Hover effect for center class - Applies to quote, GitHub and footer*/
.center:hover{
    transition: transform 1.5s; /*Duration of transform*/
    transform: scale(1.03); /*Increases the scale when hovered over*/
}

/*Links*/
a{
    color: darkblue; /*All links will be this color*/
    cursor: pointer;
}

/*Quote*/
q{
    font-style: italic; /*Makes element italicized*/
}

/*Bullet point list*/
ul{
    text-align: center;
    font-size: 20px;
    font-family: "Titillium Web", sans-serif;
    list-style-type: none;
}






/*Image*/
img{
    filter: grayscale(50%); /*Adds medium gray shade over element*/
    border-radius: 10px; /*Rounds corners of element*/
    max-width: 100%; /*Keeps images within the width of container*/
    height: 340px; 
    display: block;
    margin-left: auto; /*In junction of right, it is meant to center 
    all images*/
    margin-right: auto;
}

img:hover{
    filter: none; /*Reduces grayscale to 0%*/
    transition: transform 1.5s; /*Duration of transform*/
    transform: scale(1.3); /*Increases scale of element when
    hovered over*/
}

/*Rule used to apply a change in scale for elements when viewed on a
smaller screen like a smartphone*/
@media screen and (max-width: 576px){
    img{
        height: 100px;
        margin-top: 150px;
    }
}

/*Styling of footer element*/
footer{
    padding: 2%; /*Footer padding equal to 2% of width of the element*/
    background-color: rgb(11, 11, 11);
}

footer p{
    color: azure;
}

/*END OF OVERALL*/

/*NAVBAR*/

.navbar{
    overflow: hidden;
    background-color: rgb(11, 11, 11);
    position: fixed; /*Stays at top of screen no matter how far
    down you scroll*/
    top: 0; /*No space above nav is visible*/
    width: 100%; /*Spans the entire width of page*/
    z-index: 1; /*Stays atop page elements as you scroll*/
    -webkit-animation: movenav 5s; /*Applies animation for 
    Safari browser 4.0 - 8.0*/
    animation: movenav 5s; /*Applies same animation; all other browsers*/
}

/*effect for moving navbar from the left of the screen*/
@keyframes movenav{
    from {left: -100vw;} /*Starting off to the left*/
    to {left: 0vw;} /*Moves navbar into place on screen*/
}

.navbar a{
    float: left; /*Places links to left of the page*/
    display: block; /*Links will display in a single line*/
    color: azure;
    padding: 14px 16px;
    text-decoration: none; /*No underline on text*/
    font-family: "Audiowide", sans-serif; /*Font from fonts.google.com*/
    font-size: 20px;
    text-align: center; /*Centers within the container*/
    position: relative; /*Sets relative to its normal position with the 
    animation applied below*/
    -webkit-animation: movenavtext 5.75s; /*For Safari browser 4.0 - 8.0*/
    animation: movenavtext 5.75s; /*Applies animation for the declared duration*/
}

@keyframes movenavtext{
    from {top: -100vw;} /*Sets text above the viewport 100%*/
    to {top: 0vw;} /*Lowers text onto the navbar*/
}

/*For screens like that of a smartphone*/
@media screen and (max-width: 576px){
    .navbar a{
        width: 25%; /*Makes each line take only a .25 of the navbar*/
        font-size: 12px;
    }
}

/*Hover effets*/
.navbar a:hover{
    background-color: azure; /*Background of text when hovered over*/
    color: rgb(11, 11, 11); /*Text color when hovered over*/
    font-weight: bold;
}

/*END OF NAVBAR*/

/*VIDEO*/

#coding_video{
    position: fixed;
    right: 0; /*No spcae between edge of video 
    and of page*/
    bottom: 0; /*No space between bottom of 
    video and of page*/
    min-width: 100%; /*Displays across full width of page*/
    z-index: -1; /*Places video behind all other elements*/
}



.vid_text{
    background: rgba(0, 0, 0, 0.5); /*Semi-transparent outline for text*/
    color: azure;
    width: 100%; /*Fills to width of video container*/
    padding: 20px; /*Adds padding around text*/
    position: relative; /*Sets to relative of its normal position allowing for
    following animation*/
    -webkit-animation: movevidtext 5.75s;
    animation: movevidtext 5.75s;
}

/*Causes overlay text to move up from bottom of page upon load*/
@keyframes movevidtext{
    from {top: -100vw;} /*Sets position of text to above viewport*/
    to {top: 0vw;} /*Sets to normal position on viewport*/
}

/*END OF VIDEO*/

/*SLIDESHOW STYLING*/

/*Slight transparent background behind images*/
#slideshow_background{
    background: rgba(255, 255, 255, 0.25)
}

.mySlides{
    display: none; /*Prevents images from being diplayed, JS will be used*/
}

#slideshow_container{
    width: 39.5vw; /*Relative size of container*/
    height: auto; /*Auto adjust per image displayed*/
    padding-top: 4%; /*Adds minor padding to top*/
    position: relative; /*Sets container relative to normal positioning*/
    margin: auto; /*Horizontally center container on page*/
}

#slideshow_container a{
    text-decoration: none; /*Removes underline on text*/
}

.slideshow_images{
    vertical-align: middle; /*Centers images vertically*/
    height: auto;
    box-shadow: 0px 5px 10px 12px rgba(0, 0, 0, 0.75); /*Creates a semi transparent shadow around
    edge of of image border*/
    width: 100%; /*Width of images is auto adjusted based on content*/
}

#slideshow_static{
    transition: none;
    transform: none;
}

.Prev, .Next{
    cursor: pointer;
    position: absolute; /*Make next/prev button position relative to container*/
    top: 50%; /*Moves the buttons up in the container*/
    width: auto; /*Width of buttons are auto adjusted*/
    padding: 2vw; /*Adds padidng to 2% of veiwport width*/
    color: darkgray;
    font-weight: bold;
    font-size: 1.5vw;
    border-radius: 0 3px 3px 0; /*Adds a slight rounded edge on the top and bottom right corners*/
    user-select: none; /*User cannot highlight text*/
    transition: 0.6s ease; /*Details the hover tansition*/
}

/*Positions the next button to the right of the image*/
.Next{
    right: 0; /*Moves next button to right of container*/
    border-radius: 3px 0 0 3px; /*Changes the edges of the top and bottom left corners*/
}

/*Hover effect on slideshow buttons*/
.Prev:hover, .Next:hover{
    background-color: rgba(0, 0, 0, 0.8);
    color: azure; /*Makes arrows azure hwen highlighted*/
}

/*Slideshow text*/
.text{
    color: azure;
    padding: 1vw;
    position: absolute; /*Ensure text is positioned within the image*/
    bottom: 0; /*Property sets text at the bottom of the image*/
    width: 100%; /*Covers full width of the image*/
    text-align: center; /*Center aligned within image*/
    font-family:  "Titillium Web", sans-serif; /*Font from
    fonts.google.com*/
    letter-spacing: .1vw; /*Slight spacing between letters*/
    font-size: 1.5vw; /*Size is relative to size of viewport width*/
    background-color: rgba(0, 0, 0, 0.75); /*Slight transparent black background*/
    font-weight: bold;
    border-radius: 0px 0px 7px 7px; /*Gives text background slightly rounded edges, 
    bottom left/right*/
}

/*Styling of dots under slideshow*/
.dot{
    cursor: pointer;
    height: 1vw; /*Dots are sized relative to viewport width*/
    width: 1vw;
    margin: .25vw; /*Added spacing between dots*/
    background-color: azure;
    border-radius: 50%; /*Makes dots circles by rounding them*/
    display: inline-block; /*Allows dots to sit next to each other*/
    transition: background-color 0.6s ease; /*Transitions to diff color when hovered over*/
    z-index: 1; /*Ensures dots are on top of background elements*/
}

/*Hover effect for slideshow dots*/
.active, .dot:hover{
    background-color: rgb(11, 11, 11);
}

.fade{
    animation-name: fade; /*Fade animation defined below*/
    animation-duration: 2s;
    -webkit-animation-name: fade; /*Applies same for Safari browsers*/
    -webkit-animation-duration: 1.5s;
}

@-webkit-keyframes fade{
    from {opacity: .4;} /*Image starts transparent*/
    to {opacity: 1;} /*Image ends opaque*/
}

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

/*TABLE/COLUMNS*/

/*Universal selector; applies all effects to elements on the page*/
*{
    box-sizing: border-box; /*Creates box with border, with which we
    will place most of the text*/
}

.column_1{
    float: left;
    width: 50%; /*Takes up half the page width*/
    padding: 10px;
    padding-top: 0%; /*Space between column and headings*/
    height: 450px; /*Sets height of column (may need to be adjusted based on amount of text)*/
    background-color: #edb53b;
}

/*For screens 576px and smaller, like that of a smartphone*/
@media screen and (max-width: 576px){
    .column_1{
        overflow: auto;
    }
}

.column_2{
    float: left;
    width: 50%;
    padding: 10px;
    padding-top: 3%; 
    height: 450px; 
    background-color: #b53bed;
}

.column_git{
    padding-top: 4%; /*Override to help center the github text*/
}

/*Creates insert for content after selected element (this being .row)*/
.row:after{
    content: ""; /*Leaving blank, allows the footer to be displayed w/o 
    overwriting a column*/
    display: table; /*Specifies how this value shall be treated. Like a table*/
    clear: both; /*Clears any elements from floating left or right of an element*/
}

/*END OF TABLE/COLUMNS*/

/*CONTACT FORM*/

/*Button used to open contact form*/
.pop_up_button{
    position: fixed; /*Keeps button fixed in same position up and down screen*/
    bottom: 1.75vw; /*Positions slightly up from bottom of viewport*/
    right: 1.75vw; /*Positions slightly to right of viewport*/
    width: 25vw; /*Sets widh relative to viewport width*/
    background-color: #b53bed;
    color: rgb(11, 11, 11);
    border: solid rgb(11, 11, 11);
    cursor: pointer;
    -webkit-animation: movePopup 5s; /*For Safari browsers*/
    animation: movePopup 5s; /*Animation set for 5 seconds*/ 
}

/*Animation moves button from off the right side of the screen to fixed location on viewport*/
@keyframes movePopup{
    from {right: -40vw;}
    to {right: 1.75vw;}
}

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

/*Styling for contact form*/
/*Form element*/
form{
    font-family: "Audiowide", sans-serif; /*Font from fonts.google.com*/
}

.form-popup{
    z-index: 8; /*Ensure contact form will saty atop all oither elements*/
    display: none; /*JS will be used to display the form*/
    position: fixed; /*Form stays in same location up and down page*/
    bottom: .5vw; /*Sets slightly up from bottom of viewport*/
    right: .5vw; /*Sets slightly to right of viewport*/
}

/*Form styling*/
.form-container{
    max-width: 49vw; /*Relative sizeing of form container*/
    padding: 1vw; /*Adds padding between form pop-up and container*/
    background-color: #edb53b;
}

/*Input fields*/
.form-container input[type="text"]{
    width: 100%; /*Box cover full width of container*/
    padding: .93vw;
    border: 2px solid rgb(195, 203, 203); /*Border/outline of the boxes*/
    border-radius: 5px; /*rounds the corners of the boxes*/
    box-sizing: border-box; /*Creates a box w/ a border around inputs*/
    margin: .6vw 0 .6vw 0; /*Adds space between input boxes and labels*/
    font-family: "Titillium Web", sans-serif; /*Font from
    fonts.google.com*/
    font-weight: bold;
}

.form-container input[type="text"]:hover{
    box-shadow: 0 0 5px #710ca0; /*Creates hue/shadow on border when hovering over*/
}

button{
    font-family: "Audiowide", sans-serif; /*Font from fonts.google.com*/
    letter-spacing: .3vw; /*Adds slight spacing between letters*/
    font-size: 1.5vw; /*Relative sizing of text*/
    font-weight: bold;
    background-color: #b53bed; /*Sets the color for the button itself*/
    color: azure;
    padding: 1.5vw; /*Adds padding to text in  button*/
    cursor: pointer;
    width: 100%;
    height: auto; /*Allows height to be resized depending on contact*/
}

button:hover, .form-container .btn:hover{
    background-color: #710ca0;
    transition-duration: 1s; /*Transition of color change when hovered over*/
    -webkit-transition-duration: 1s; /*For Safari browsers*/
}

.form-container .btn{
    border-color: rgb(11, 11, 11);
    margin-bottom: 1vh; /*Adds slight space between submit and close button*/
}
/*END OF CONTACT FORM*/