/* --------------------------------------
My Portfolio CSS 
------------------------------*/


/* html */
html {
    background-color: wheat;/*This ensures that the page scrolling is smooth when the buttons on the nav bar is clicked */
      scroll-behavior: smooth;    
}

/* Body */
body {
    margin: 0%;
margin-right: 0%;
    /* fade-out  */
     opacity: 1;
    transition: 3s opacity;
 overflow-x: hidden; /* This prevents the horizontal scroll bar from appearing when the quote is hovered over */
 user-select: none; /* This prevents the text on the webpage from being highlighted by the user */
}
/*  'fade-out' */
body.fade-out {
    transition: none; 
opacity: .1;
}

/* Heading 1 elements */
h1 {
    text-transform: uppercase;
    font-family: Castellar, Optima;
    text-align: center;
    margin-top: 2%;
    color: #1a1a1a;
}

/* Heading 1 element hover effect */
h1:hover {
    filter: grayscale(5%);
    transform: scale(1.1);
    transition: transform 1s;
}

/* Styling for portfolio title text */
.white_tx {
    color: #fff;
    font-size: 4vw;
    font-family: Courier New, Rockwell Extra Bold;
     padding-top: 5vh; /* Adds padding (equal to 10% of the viewport height) to the top of the Portfolio Title text */
     padding-bottom: 1%;
     margin-bottom: 10px;
}

/* Styling for portfolio title text - hover */
.white_tx:hover {
    filter: grayscale(7%);
    transition: transform 1s;
    transform: perspective(576px) scale(1.1) rotateX(40deg);
    width: 100% transform 2s;
    color: rgb(235, 51, 48);
}

/* Paragraph elements */
p {
    font-family: Courier New, Rockwell Extra Bold;
    text-align: justify;
    letter-spacing: 1px;
    font-size: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;
}

/* Paragraph element hover effect */
p:hover {
    color: #761704;
    transition: transform 1s;
    transform: scale(1.03);
}

.p {
    font-family: Courier New, Rockwell Extra Bold;
    text-align: justify;
    letter-spacing: 1px;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 350px;
    padding-top: 10px;
}

/* Paragraph element hover effect */
.p:hover {
    color: #e3ce14;
    transition: transform 1s;
    transform: scale(1.03);
}


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

/* Center class hover effect - This only affects the quote, github link, and footer */
.center:hover {
    transition: transform 3s;
    transform: scale(1.05);
}

/* anchor elements */
a {
    color: blue;
 cursor: pointer; /* This ensures all links change the mouse to a pointer when hovered over or clicked */
    text-decoration: underline; /* This ensures all links are underlined */

}

/* quotation elements */
q {
    font-style: italic;
}

/* start slideshow */
#slideshow-img{ 
    position: relative;
     cursor: pointer; 
  border-radius: 7px;
  max-width: 350px;
  height: 360px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; 
   box-shadow: 0 0 50px rgba(0,0,0,0.4);  /* adjusted box-shadow values */
   
}

#slideshow-img > div { 
  position: absolute; 
  display: none;
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}
/* end slideshow*/

/* contact image zoom in and zoom out */

.img_zoom {
  overflow: hidden; 
}

.img_zoom img {

  cursor: zoom-in;
  filter: grayscale(80%);
    border-radius: 7px;
    max-width: 100%;
    height: 340px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@keyframes zoominout {

 0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }

}

.img_zoom:active img{
     animation: zoominout 2s ease-in-out infinite;
     filter: grayscale(8%);
}

@media screen and (max-width: 576px) {
    .img_zoom img {
        height: 100px;
        margin-top: 150px;

    }
}

/* contact image zoom in and zoom out - end*/


/* image elements */
img {
    filter: grayscale(80%);
    border-radius: 7px;
    max-width: 100%;
    height: 340px;
    display: block;
    margin-left: auto;
    margin-right: auto;
margin-top: 3%;
}

/* image hover */
img:hover {
    filter: grayscale(7%);
    transition: transform 1s;
    transform: perspective(576px) scale(1.1) rotateX(10deg);
    width: 80% transform 2s;
}

#img_contact1 {
margin-top: 0;
  border: none;
}

#img_contact2 {
margin-top: 0;
  border: none;
}

/* 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 {
    background-color: whitesmoke;
float:right;
width: 100%;
 }


/***** END OF GENERAL STYLING *****/

/***** NAVBAR STYLING *****/
.nav {
    overflow: hidden;
    background-color: rgb(31, 5, 180);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    -webkit-animation: moveNav 4s;
    /* This applies the moveNav animation below for Safari 4.0 - 8.0 */
    animation: moveNav 4s;
    /* 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;
    }

    to {
        left: 0vw;
    }
}

/* navbar links */
.nav a {
    float: left;
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Felix Titling, Helvetica;
    font-size: 25px;
    text-align: center;
    position: relative;
    -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;
    }

    /* This sets the navbar text 100% 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) {
    .nav a {
        width: 25%;
        /* This makes each link take up 1/4 of the navbar */
        font-size: 12px;
    }
}

/* Navbar hover effects */
.nav a:hover {
    background-color: #fef7cf;
    color: black;
    font-weight: bold;
 cursor: pointer;
    transition: 0.5s ease-in; /* Creates a smooth transition for the hover trigger */
}


/* Navbar home button */
.nav a.active {
    background-color: #4854e0;
}

/***** END OF NAVBAR STYLING *****/

/***** VIDEO STYLING *****/
/* Formatting for background video */
#web_coding {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    z-index: -1;
    margin-bottom: 0%;
}

/* Screens that are 576px and smaller will not display the background video */
@media screen and (max-width: 576px) {
    #web_coding {
        display: none;
    }
}

/* Texts over the video */
.video_tx {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    padding: 20px;
    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;
    }

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

/***** END OF VIDEO STYLING *****/

/***** TABLE STYLING *****/
* {
    box-sizing: border-box;
}

.column_1 {
    float: left;
    width: 50%;
    /* padding: 10px; */
    /* padding: 1.6%; */
    padding: 3%;
    /* padding-top: 1%; */
    height: 450px;
    /* height: 470px; */
    background-color: #f8f8ff;
}

/* 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: 10px; */
    /* padding: 1.6%; */
     padding: 3%;
    /* padding-top: 3%; */
    height: 450px;
    background-color: #696969;
}

/* 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: "";
    display: table;
    clear: both;
}

/***** END OF TABLE STYLING *****/


/***** CONTACT FORM STYLING *****/
input[type=text] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 1px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: Bell MT, Rockwell Extra Bold;
}

/* Hover effects for input boxes */
input[type=text]:hover {
    box-shadow: 0 0 3px #2202a4 inset;
}

/* Submit button */
input[type=submit] {
 background-color: rgb(17, 3, 97);
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px; 
    font-family: Bell MT, Rockwell Extra Bold;  
    margin: left 50%;
    margin-right: right 50%;
}

/* Hover effect for submit button */
input[type=submit]:hover {
    background-color: rgb(56, 216, 44);
    color: black;
    transform: scale(1.3);
    transition: transform 1.2s;
    
}

/* Form element */
form {
border-radius: 2px;
background-color: #f2f2f2;
padding: 25px 40px;
font-family: "Courier New", Optima;
border: 2px solid #a7cded;
text-align: center;
width: 550px; /* Adjust width as desired */
height: 440px; /* Adjust height as desired */
}

/* start open button */

.container {
  position: relative;
  width: 100%;
overflow: hidden; 
   float: left;
    width: 50%;
    padding: 1px;
    padding-top: auto;
    height: 450px;
    background-color:#696969;
}

.container img {
  width: 100%; 
  height: 100%;
   filter: grayscale(50%);
    border-radius: 1px;
}


.container .btn_contact {
  position: absolute;
  background-color: #696969;
  border: none;
  color: white;
  padding: 16px;
  width: 200px;
  height: 200px;
  text-align: center;
  transition-duration: 1s;
  text-decoration: none;
  border-radius: 25px;
  top: 40%;
  left: 40%;
font-family: Castellar, Optima;
font-size: 25px;
opacity: 0.7;
 overflow: hidden;

}

/* create conteainer 1 image*/
.container1 {
  position: relative;
  width: 100%;
overflow: hidden; 
   float: left;
    width: 50%;
    padding: 1px;
    padding-top: auto;
    height: 450px;
    background-color:#696969;
    
}

.container1 img {
  width: 100%; 
  height: 100%;
   filter: grayscale(50%);
    border-radius: 1px;
    
}

/* On screens 576px and smaller the images will be 100px tall and centered vertically in the column */
@media screen and (max-width: 576px) {
    .btn_contact {
        height: 100px;
        margin-top: 150px;
         position: absolute;
 overflow: hidden;

    }
}

/* On screens 576px and smaller the images will be 100px tall and centered vertically in the column */
@media screen and (max-width: 576px) {
    #contactBtn {
        height: 100px;
        margin-top: 150px;
         position: absolute; 
  width: 100px;
  height: 100px;
 align-items: center;
  top: 30%;
  left: 30%;
font-family: Castellar, Optima;
font-size: 16px;
opacity: 0.8;
    }
}

/* start - open small button right*/
#sticky {
  background-color: yellow; 
  color: blue; 
  padding: 10px 20px; 
  border: none;  
  border-radius: 25px; 
  cursor: pointer; 
position: -webkit-sticky;
position: sticky;
top: 0;
width: 150px;
  height: 80px;
  text-align: center;
z-index: 7;
margin: -5% auto;
 float: right;
  bottom: 0; 
  font-family: Castellar, Optima;
}

.sticky-container {
  height: 2000px; 
  margin-top: -2000px; 
  margin-bottom: -2000px;
}

/* container button */
.sticky-container #sticky:after {
  content: "Thank you!";
  background: yellow; 
  color: blue;
  position: absolute;
  opacity: 0;
  transition: all 0.8s;
  padding-top: 100%;
  padding-left: 100%;
  margin-left: -20px !important;
  margin-top: -90%;
  width: 150px;
  height: 80px;
 border-radius: 25px; 
padding: 10px 20px; 
bottom: 0; 
z-index: 7;
margin: -5% auto;
display: flex; 
  justify-content: center; 
  align-items: center;
}

.sticky-container #sticky:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s;
}
/* end - open small button right*/

/* container button */
.container .btn_contact:after {
  content: "";
  background: #041172;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.container .btn_contact:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #696969;
  color: white;
  cursor: pointer;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: xx-large;
  float: left;
    width: 50%;
height: 450px;
    border: none;
opacity: 0.8;
}
/* end open button */

/* close button  */
.form-container .cancel {
       background-color: rgb(148, 6, 30);
    color: white;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Trebuchet MS", Optima; 
    margin-bottom: auto;
    margin-right: auto;
    margin: 10px; /* Adjust margin as needed */
}

/* close button hover */
.form-container .cancel:hover {
    background-color: rgb(138, 7, 57);
    color: black;
    transform: scale(1.3);
    transition: transform 1.2s;
}

/* form aling and pop up */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
}

.contact-form {
    background-color: #f2f2f2;
}

/* Hover open contact form cell */
#contactBtn:hover {
    opacity: 0.7;
}

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


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

.mySlides{
    display: none; 
}

/* Slideshow section / container */
#Slideshow_Container {
width: 36vw;
    height: auto; 
    padding-top: 5%; 
    position: relative; 
    margin:auto; 
    padding-bottom: 4%;
}

/* Remove the underline from the previous and next buttons on the slideshow */
#Slideshow_Container a {
    text-decoration: none;
}

/* Images contained within the slideshow */
.Slideshow_Images {
    vertical-align: middle; 
    height: auto; 
    box-shadow: 0px 5px 10px 12px rgba(0, 0, 0, .75); 
    width: 100%; 
}

/* Next and previous buttons */
.Previous, .Next {
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    padding: 2vw; 
    color: rgb(169, 169, 169); 
    font-weight: bold;
    font-size: 1.5vw;
    user-select: none; 
    transition: 0.6s ease; 

}

/* Positioning the next button on the right hand side */
.Next {
    right: 0; 
    border-radius: 3px 0 0 3px; 
}
/* Hover effect on slide show buttons */
.Previous:hover, .Next:hover {
    background-color: rgba(0, 0, 0, 0.8); 
    color: white; 
    
}

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

/* Styling of the dots under the slideshow */
.dot {
    cursor: pointer; 
    height: 1vw; 
    width: 1vw;
    margin: .25vw; 
    background-color: white; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
    z-index: 1; 
}

/* Hover effect for slideshow dots */
.active, .dot:hover {
    background-color: black; 
}
/* Fading animation for slideshow */
.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 Slideshow Styling *****/


/***** Media Query Section *****/
/*Media rules for paragraph font size for different screen sizes*/
@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: 1.3vw;
       
    }
}

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

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

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

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