*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

:root {
  /*font-family variables*/
  --ff-JS: "Josefin Sans", serif;
  --ff-SM: "Stalemate", serif;
  --ff-Lato: "Lato", serif;

  /*font-weight options*/
  /*Josefin Sans*/
  /* Italic: 0, 100, 200, 300, 400, 500, 600, 700
         Regular: 0,100,... 700 */

  /* Stalemate*/
  /* Italic: 400
         Regular: 400 */

  /* Lato*/
  /* Italic: 100, 300, 400, 700, 900
         Regular: 100, 300, 400, 700, 900 */
}



/* NO class/ NO id "having"  Elements */


p {
  padding-top: 2%;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  text-align: justify;
  font-size: 1.5rem;
  letter-spacing: 0.1vw; /* This expands the text slightly */
}

q {
  font-style: italic;
  font-weight: bold;
}

center {
  padding-left: 1vw;
  padding-right: 1vw;
  text-align: center;
  letter-spacing: 0.1vw;
  font-size: 1.5vw;
}

img {
  position: relative;
  display: block;
  top: 0vh;
  left: 0vw;
  max-width: 100%;
  height: auto;
  display: block; /* By specifying block display we can ensure our images are able to be centered */
  filter: grayscale(45%); /* This rids our pictures of 75% of their color */
  transition: transform ease 2s;
}

video {
  transition: transform ease 2s; 
}

/* HOVERS */
center:hover {
  transition: transform ease 2s;
  transform: scale(1.1);
}

h1:hover {
  transition: transform ease 2s;
  transform: scale(1.1);
}
 
.img-container:hover {
  transition: transform ease 2s;
  transform:scale(1.05);
}


img:hover {
 
  filter:grayscale(0%);/* Brings back most of the image's color when hovered over */
  transition: transform ease 2s;
  transform: scale(1.05);
}

video:hover {
  filter: grayscale(
    0%
  ); /* Brings back most of the image's color when hovered over */
  transition: transform ease 2s;
  transform: scale(1.05);
}

button.button:hover{
  transform:scale(1.05);
}

/* Button styling */
button.button {
  width: 100%;
  height: auto;
  padding: 1.5vw 1.5vw;
  cursor: pointer;
  border-style: solid;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5vw;
  font-weight: bold;
  letter-spacing: 0.3vw;
  transition: transform ease 2s;
}



/*FORM BUTTON AND FORM*/
/* Makes contact form button slide in from right on page load */
@keyframes movePopup {
  from {
    right: -40vw;
  }
  to {
    right: 4vw;
  }
}


input#NameInput[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0 8px 0;
  box-sizing: border-box;
  overflow:hidden;
}

input#Telephone[type=tel] {
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  overflow:hidden;
}

input#EmailAddress[type=email]{
  width: 40%;
  padding: 12px 20px;
  margin: 8px 0 8px 0;
  box-sizing: border-box;
  overflow:hidden;
}
input#ContactMessage[type=text] {
  width: 100%;
  height:20vh;
  padding: 12px 20px;
  margin: 8px 0 8px 0;
  box-sizing: border-box;
  overflow:hidden;
}

/* Button used to open the contact form - fixed at the bottom of the page */
button.Pop_Up_Button {
  position: fixed;
  bottom: 5vh;
  right: 4vw;
  width: 15vw;
  padding: 5px;
  cursor: pointer;
  background-color: white;
  color: black;
  border: solid;
  font-size: 1.5em;
  font-weight: 900;
  -moz-webkit-animation: movePopup 5s;
  animation: movePopup 5s;
  z-index: 4;
}

/*The popup form - hidden by default */
.form-popup {
  position: fixed;
  display: none;
  bottom: 6px;
  right: 6px;
  border: 3px solid #f0f1f0;
  z-index: 8;
}

/* Form styling */
.form-container {
  max-width: 49vw;
  padding: 9px;
  background-color: white;
}
.form-holder{
  margin:5% 5% 5% 5%;

}

/* Input fields */
.form-container input[type="text"],
.form-container input[type="password"] {
  width: 100%;
  margin: 0.6vw 0 0.6vw 0;
  padding: 0.93vw;
  background: Gainsboro;
  border: none;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1vw;
}

/* Submit button */
.form-container .btn {

  width:10%;
  height:7%;
  padding:1%;
  background-color: black;
  color: white;
  border-style: solid;
  border-color: silver;
 
  border-color: black;
  transition:transform 2.5s ease;
}

.form-container .btn:hover{
  background-color: cornflowerblue;
  color: white;
  border-color: black;
  transform:scale(1.5em)
}

/* Close button */
.form-container .cancel {
  width:10%;
  height:7%;
  padding:1%;
  background-color: rgb(3, 3, 3);
  color:white;
  font-weight:400;
  border-color: black;
  transition: transform 2.5s ease;
}

.form-container .cancel:hover {
  background-color: orchid;
  color: white;
  border-color: black;
  transform:scale(1.5em);
}

/* Hover effect for buttons */
button:hover,
.form-container .btn:hover {
  background-color:lime;
  color:black;
  font-weight:400;
border:2pt solid black;
text-align:center;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

.form-container .cancel:hover {
  background-color: rgb(248, 104, 248);
  color: black;
  border-style: solid;
  border-color: black;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}






html {
  width: 100%;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth; /* This ensures that the page scrolling is smooth when the nav bar is clicked */
  z-index: -1;
}

body {
  position: absolute;
  box-sizing: border-box;
  top: 0vh;
  left: 0vw;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background-image: url("Golden-Moon_Portfolio-Video.mp4");
  background-color: black;
  font-weight: 300;
  letter-spacing: 0.2vw;
  /* ---------------------------------- */
  /* FADE IN EFFECT ON PAGE LOAD  */
  /* CSS: body sets opacity to "0" and transition: opacity 11s;
  ... in the HTML:  <body onload="document.body.style.opacity='1'">  */
  opacity: 0;
  transition: opacity 1.5s;
  /* --------------------------------- */
  z-index: -1;
  overflow: hidden;
}


/*  Navbar STARTS HERE */

/* Keyframes for Navbar Animations */
/*Animation effect slides NAVBAR in from the left-side of screen on-page-load*/
@keyframes moveNav {
  /*Name of the animation goes here ("movNav")*/
  from {
    left: -100vw;
  } /* "from" means "start here"*/
  to {
    left: 0vw;
  } /*("to" means "ends here" => can also use 100%)*/
}

/*Animation effect drops NAVBAR TEXT in from top of screen on-page-load*/
@keyframes moveNavText {
  /* Name : moveNavText */
  from {
    top: -100vh;
  } /*Animation starts at this location on the page
                          (top:-100vh; is out of sight above the top of page*/
  to {
    top: 0vh;
  } /*Animation ends here (top:0vh; is at the very top of page*/
} /* (back in sight again)*/

header {

  
  margin: 0;
  padding: 0;
  width: 98vw;
  max-height: 12vh;

  
}

.nav-container {
  position:fixed;
  top:0;
  left:0;
  width:98.7vw;
  height:7vh;
  z-index:10;
  background-color:black;
  

}

#NavBar {
 /*keeps navbar "fixed" to screen as we scroll*/
  display: flex;
  gap:2%;
  top: 0; /*This ensures no space is displayed above the navbar*/
  left: 0;
  width: 100%; /*Makes the navbar span the entire width of screen*/
  height: 100%;
  margin: 0;
  overflow: hidden; /*Ensures content overflow is not displayed*/
 
  /*(border thickness|line type(solid,dashed,etc.)|border color)*/
  z-index: 10; /*Ensures navbar sits on top layer of webpage*/
  -moz-animation: moveNav 5s; /* Safari 4.0 - 8.0 */
  animation: moveNav 4s; /*Animation name |set duration(seconds)*/
  z-index: 3;
  font-family: var(--ff-JS);
  font-size: var(--fs-reg);
  font-weight: 200;
  padding: 0 1%;
  /* border:5pt solid orchid; */
  justify-content:start;
  align-items:center;
  z-index:11;
  
}



.navItem {
  position:relative;
  width:7%;
  vertical-align: middle;
  margin: 0;

  margin:0 1% 0 1%;
}

.navItem {
  position: relative;
  float: left; /*This ensures the list items are displayed side by side*/
  display: block;
  width: fit-content;
  gap: 2%;
  list-style-type: none;
  /* margin: 0 auto;
   display: inline-block;
  width: 100%;
  height: auto;
  text-decoration: none; /*Removes standard anchor tag underlines*/
  color: slateblue;
  text-shadow: 0.25px 0.25px 0.25px slateblue, 0.5px 0.5px 0.5px cyan,
    0.75px 0.75px 0.75px cornflowerblue, 1px 1px 1px white, 1.25px 1.25px 1.25px cyan,
    1.5px 1.5px 1.5px white, 1.75px 1.75px 1.75px white,
    2.25px 2.25px 2.25px black; /* makes the text on the navbar bold when hovered o*/
  
  /* "bold-ness" scale:100-900 */
  -moz-animation: moveNavText 9.75s; /* Safari 4.0 - 8.0 */
  animation: moveNavText 9.75s;
  margin: 0 2px;
  padding: 5px 5px 5px 0;
  cursor: pointer;
  background-color: transparent;
  transition: 0.5s ease;
  border-radius:10px;

}

.navItem a{
  text-decoration:none;
}
 
.contact-form-btn{
  position:relative;
  margin:1%;
}
/* Navbar hover effect */
.navItem:hover {
  cursor: pointer;

  background-color: rgb(244, 189, 118);
  color: fuchsia;
  text-shadow: 0.25px 0.25px 0.25px slateblue, 0.5px 0.5px 0.5px slateblue,
    0.75px 0.75px 0.75px fuchsia, 1px 1px 1px fuchsia, 1.25px 1.25px 1.25px cyan,
    1.5px 1.5px 1.5px cyan, 1.75px 1.75px 1.75px white, 2px 2px 2px white,
    2.25px 2.25px 2.25px black;
  font-weight: 300;
  margin:2%
}

.navItem a:hover{
  cursor: pointer;
  transform: scaleZ(1.5);
  background-color: rgb(244, 189, 118);
  color: fuchsia;
  text-shadow: 0.25px 0.25px 0.25px slateblue, 0.5px 0.5px 0.5px slateblue,
    0.75px 0.75px 0.75px fuchsia, 1px 1px 1px fuchsia, 1.25px 1.25px 1.25px cyan,
    1.5px 1.5px 1.5px cyan, 1.75px 1.75px 1.75px white, 2px 2px 2px white,
    2.25px 2.25px 2.25px black;
  font-weight: 300;
  margin:2%
}

.navItem .navLink.active{
  background-color: rgb(244, 189, 118);
  color: fuchsia;
  text-shadow: 0.25px 0.25px 0.25px slateblue, 0.5px 0.5px 0.5px slateblue,
    0.75px 0.75px 0.75px fuchsia, 1px 1px 1px fuchsia, 1.25px 1.25px 1.25px cyan,
    1.5px 1.5px 1.5px cyan, 1.75px 1.75px 1.75px white, 2px 2px 2px white,
    2.25px 2.25px 2.25px black;
  font-weight: 300;
  margin:2%;
  transition: 0.5s ease;
  cursor:pointer;

}

/* This causes the video to zoom out from a zoomed in position upon page load */
@keyframes zoomInOutSingleFeatured {
  0% {
    transform: scale(3, 1.5);
  }
  100% {
    transform: scale(1, 1.5);
  }
}

#Home {
  position: relative;
  top: 3vh;
  left: 0vw;
  width: 100%;
  height: 97vh;
}

audio#AudioPlayer{
  width:10em;
  height:10em;
  opacity:.55;
  background-color:transparent;
  color:black;
}




div#ContactButton button {

  position:fixed;
  width:13%;
  height:auto;
  bottom: 5vh;
    right: 4vw;
  
  background-color: white;
  color: fuchsia;
  object-position: center;
  padding: 0%;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  z-index: 100;
  transition:transform ease 2.5s;
 
}

div#ContactButton button:hover{
  background-color:cornflowerblue;
  color:lime;
  text-shadow:.25px 0.25px 0.25px lime, .5px 0.5px 0.5px slateblue,
  0.75px 0.75px 0.75px fuchsia, 1px 1px 1px cyan, 1.25px 1.25px 1.25px white,
  1.5px 1.5px 1.5px white, 1.75px 1.75px 1.75px white, 2px 2px 2px white,
  2.25px 2.25px 2.25px black;
  border:2pt solid fuchsia;
  transition:transform 2.5s ease;
  transform:scale(1.15);
} 


div#ContactButton.button.cancel button {
  position: relative;
  bottom: 0;
  right: 0;
  text-align: center;
  margin: auto;
  font-family: "Josefin Sans", sans-serif;
  font-size:1rem;
}

#MyAudioPlayer audio {
  display: none;
}

video#GoldenMoon {
  width: auto!important;
  height: 100% !important;
}

/* Video */
div#Moon_Background_Video_Container{
  position: fixed;
  top: -3vh;
  left: 17vw;
  width: 70%;
  height: 80%;
  margin: 0 auto;
  z-index: -1;
}

div#Moon_Background_Video_Container video {
  position: relative; /* This fixes our video to the page  */
  /* top: 7vh; /* This ensures no space between the edge of the video and the edge of the page */
  /* left: 18vw; */
  top:-3vh;
  width: 100%;
  /* height: 70vh; */
  margin: auto;
  opacity: 1;
}

@keyframes fly-in-from-bottom_TopGroupIntroText {
  /* name of animation (moveVideoText)..this actually  moves the overlay text on the video */
  from {
    top: 225vh;
  } /* again we are moving from below the screen - up towards the top */
  to {
    top: 25vh;
  }
}

#Top_Group_Intro_Text {
  position: relative;
  top: 25vh;
  left: 0vw;
  background-color: rgba(3, 3, 3, 0.55);
  transform: color 0.9s ease;
  -moz-webkit-animation: fly-in-from-bottom_TopGroupIntroText 12s;
  animation: fly-in-from-bottom_TopGroupIntroText 12s;
  z-index: 2;
}

h1#CreatingTheCode {
  position: relative;
  top: 0;
  left: 0;
  color: slateblue;
  text-shadow: 1px 1px cyan, 1.1px 1.1px 1.1px cyan, 1.2px 1.2px 1.2px cyan,
    1.3px 1.3px 1.3px limegreen, 1.45px 1.45px 1.45px limegreen,
    1.55px 1.55px 1.55px white, 1.65px 1.65px 1.65px white,
    1.75px 1.75px 1.75px orchid, 1.85px 1.85px 1.85px orchid,
    1.95px 1.95px 1.95px orchid;
  font-family: var(--ff-JS);
  text-align: center;
  font-size: 7rem;
  font-weight: 300;
  transition: transform ease 2s 0.25s;
  
}

h1#CreatingTheCode span {
  font-variant: small-caps;
}

h1#CreatingTheCode:hover {
  color: rgb(250, 104, 250);
  text-shadow: 1px 1px 1px fuchsia, 1.15px 1.15px 1.15px cyan,
    1.25px 1px 1px cyan, 1.5px 1.5px 1.5px cyan, 1.75px 1.75px 1.75px slateblue,
    2px 2px 2px slateblue, 2.15px 2.15px 2.15px black,
    2.25px 2.25px 2.25px white, 2.5px 2.5px 2.5px white,
    S 2.75px 2.75px 2.75px white, 3px 3px 3px white, 3.25px 3.25px 3.25px white;
  transform: scale(1.25);
}

@keyframes fly-in-from-right_BottomGroupIntroText_Hello_h4 {
  from {
    left: 300vw;
  }
  to {
    left: 15.15vw;
  }
}

#Bottom_Group_Intro_Text {
  position: relative;
  top: 32vh;
  display:flex;
  flex-direction: column;
  row-gap:5%;
  width: 60%;
  height: 40%;
  background-color: rgba(3, 3, 3, 0.55);
  z-index: 2;
  transition: transform ease 2s;
  margin:0 auto;
  padding:0 5%;
}

/* .Home-Video-Text_Wrap_2 {
  position: relative;
  top: 4vh;
  left: 33.25vw;
  -moz-webkit-animation: moveVideoTextFromRight_MyNameIs-Text_2 9s;
  animation: moveVideoTextFromRight_MyNameIs-Text_2 9s;
} */

h4#Hello {
  position: relative;
  display:block;
  top: 0vh;
  left: 15.15vw;
  width:30vw;
  color: peachpuff;
  text-shadow: 1px 1px 1px orangered, 1.15px 1.15px 1.15px coral,
    1.25px 1px 1.25px cornflowerblue, 1.5px 1.5px 1.5px rgb(252, 89, 225),
    1.75px 1.75px 1.75px rgb(252, 89, 225), 2px 2px 2px black,
    2.15px 2.15px 2.15px white, 2.25px 2.25px 2.25px white,
    2.5px 2.5px 2.5px white, 2.75px 2.75px 2.75px white;
  font-family: var(--ff-SM);
  font-weight: 400;
  font-size: 2.35rem;
  letter-spacing: 0.4rem;
  -moz-webkit-animation:fly-in-from-right_BottomGroupIntroText_Hello_h4 9s;
  animation: fly-in-from-right_BottomGroupIntroText_Hello_h4 9s;
  
}

/* 
@keyframes fly-in-from-left_BottomGroupIntroText_MyNameIs_h4 {
  from {
    left: -95vw;
  }
  to {
    left:17vw;
  }
  } */

span#MyNameIs {
    position: relative;
  
    top: 4vh;
    left: -2vw;
    /* width:15vw; */
    color:peachpuff;
    text-shadow: 1px 1px 1px orangered,
             1.15px 1.15px 1.15px coral,
            1.25px 1.25px 1.25px rgb(245, 171, 61),
            1.5px 1.5px 1.5px rgb(252, 89, 225),
            1.75px 1.75px 1.75px rgb(252, 89, 225),             
            2px 2px 2px black,
           2.15px 2.15px 2.15px white,
           2.25px 2.25px 2.25px white,
           2.5px 2.5px 2.5px white, 
           2.75px 2.75px 2.75px white;
    font-family: var(--ff-SM);
    font-weight: 300;
    font-size: 3rem;
    /* letter-spacing: 0.5rem;
    -moz-webkit-animation:fly-in-from-left_BottomGroupIntroText_MyNameIs_h4 11s;
    animation: fly-in-from-left_BottomGroupIntroText__MyNameIs_h4 11s; */
  }

@keyframes fly-in-from-left_BottomGroupIntroText_LaurieSue_h2 {
  from {
    left: -255vw;
  }
  to {
    left: .65vw;
  }
}

 #LaurieSue {
  position: relative;
  display:block;
  top: 2vh;
  left: .65vw;
  color: orchid;
  text-shadow: 1.05px 1.05px 1.05px orchid, 1.1px 1.1px 1.1px orchid,
    1.15px 1.15px 1.15px lime, 1.25px 1.25px 1.25px cyan,
    1.5px 1.5px 1.5px cornflowerblue, 1.57px 1.75px 1.7px cyan, 2px 2px 2px cyan,
    2.25px 2.25px 2.25px white, 2.5px 2.5px 2.5px fuchsia,
    2.6px 2.6px 2.6px coral, 2.7px 2.7px 2.7px coral, 2.85px 2.85px 2.85px white,
    2.95px 2.95px 2.95px white, 3.15px 3.15px 3.15px white,
    3.3px 3.3px 3.3px white;
  font-family: var(--ff-JS);
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.4rem;
  -moz-webkit-animation: fly-in-from-left_BottomGroupIntroText_LaurieSue_h2 12s;
  animation: fly-in-from-left_BottomGroupIntroText_LaurieSue_h2 12s;
  justify-content:center ;
  text-align:center;
}

@keyframes fly-in-from-top_BottomGroupIntroText_SoftwareEngineer_h3 {
  from {
    top: -135vh;
  }
  to {
    top: 0.25vh;
  }
}

/* div.Home-Video-Text_Wrap_4 {
  position: relative;
  top: 8vh;
  left: 18vw;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.45);
  -moz-webkit-animation: moveVideoText_IAmDev-Text_4 12s;
  animation: moveVideoText_IAmDev-Text_4 12s;
  z-index: 2;
} */

#Bottom_Group_Intro_Text h3#SoftwareEngineer {
  position: relative;
  display:block;
  top: 0.25vh;
  left: .5vw;
  color: peachpuff;
  text-shadow: 1px 1px 1px orangered, 1.15px 1.15px 1.15px coral,
    1.25px 1px 1px fuchsia, 1.5px 1.5px 1.5px slateblue,
    1.75px 1.75px 1.75px slateblue, 2px 2px 2px white;
  font-family: var(--ff-SM);
  font-size: 3rem;
  font-weight: 400;
  line-height: 3rem;
  letter-spacing: 0.4rem;
  -moz-webkit-animation: fly-in-from-top_BottomGroupIntroText_SoftwareEngineer_h3 12s;
  animation: fly-in-from-top_BottomGroupIntroText_SoftwareEngineer_h3 12s;
 text-align:center;
}

span#Dev {
  color: slateblue;
  text-shadow: 1px 1px 1px rgb(31, 230, 230), 1.1px 1.1px 1.1px lime,
    1.2px 1.2px 1.2px lime, 1.3px 1.3px 1.3px slateblue,
    1.45px 1.45px 1.45px white, 1.55px 1.55px 1.55px fuchsia,
    1.65px 1.65px 1.65px fuchsia, 1.75px 1.75px 1.75px cyan,
    1.85px 1.85px 1.85px cyan, 1.95px 1.95px 1.95px fuchsia,
    2.05px 2.05px 2.05px fuchsia, 2.15px 2.15px 2.15px white,
    2.25px 2.25px 2.25px white, 2.35px 2.35px 2.35px white,
    2.5px 2.5px 2.5px white;
  font-family: var(--ff-JS);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.95rem;
}



/* ------------------------ */
/*        SlideShow         */
/* ------------------------ */

/* section#Slideshow  ( A row basically) */
section#Slideshow {
  width: 100%;
  height: 100vh;
  padding: 2%;
  margin-top:3%;
  margin-bottom:3%;
}

.carousel-container {
  position: relative;
  max-width: 40%;
  height: 95vh;
  overflow: hidden;
  transition: transform 0.4s ease;
  /* padding: 2vh 2vw 2vh 2vw; */
  margin: auto;
  padding:1%;
  z-index: 3;
  margin-bottom:2%;
}

.mySlides {
  position:relative;
  display: none;
  max-width:100%;
}

.center {
  justify-content: center;
  align-items: center;
}

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

.slide-media-container {
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0 auto;

}

.slide-media-container img,
.slide-media-container video {
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 100%;
  height: 100%; 
  margin: 0 auto; 
  object-fit: cover;
  opacity: 85%;
  border: 8px rgb(247, 224, 205) dotted;
  border-radius: 8px; 
}


 video#typing{
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 26em;
  height: 29em;
  margin: auto;
  object-fit: cover;
  opacity: 85%;
  border: 8px rgb(247, 224, 205) dotted;
  border-radius: 8px;
}  



.between {
  justify-content: space-between;
}

/* p */

/* .previous-button,
.next-button {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  top: 23vh;
  left:17vw;
  user-select: none;
  transition: 0.6s ease;
  font-weight: bold;
  font-size: 3rem;
  color: cornflowerblue;
  width: auto;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  margin-top: -22px;
  padding: 16px;
  transition: 0.06s ease;
} */

.slideshow-navigation {
  position:absolute;
  display:flex;
  flex-wrap: nowrap;
  top:27vh;
  left:3.5vw;
  width: 36rem;
  height: 4rem ;
  justify-content:space-between;
  align-items: center;
  margin:0 auto;
}

.slideshow-nav-item{
  position:relative;
  width:5vw;
  height:7vh;
  border-radius: 0 3px 3px 0;
  color:cornflowerblue;
  z-index:4;
  font-size:var(--fs-med);
  background-color:transparent;
}

.slideshow-nav-item.right,
.slideshow-nav-item.left {
  padding-left:8%;
}

.slideshow-nav-item.right:hover{
  color:rgb(250, 104, 250);
  transition: transform ease-in-out 3s;
}
.slideshow-nav-item.left:hover{
  color:rgb(250, 104, 250);
  transition: transform ease-in-out 3s;

}

center#Hi {
  font-size:var(--fs-sm);
}



@-webkit-keyframes fade {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}

@keyframes fade {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}

/* Fading animation for slideshow */




#mePic_slide-1 img {
  margin: 0 auto;
  width:26em;
  height: 29em;
}

#htmlPic_slide-2 img {
  margin: 0 auto;
  width: 26em;
  height: 29em;
}

#cSharpPic_slide-3 img {
  margin: 0 auto;
  width:26em;
  height: 29em;
}

#sqlPic_slide-4 img {
  margin: 0 auto;
  width: 26em;
  height: 29em;
}

#typingVid_slide-5 video {
  margin: 0 auto;
  width: 26em;
  height: 29em;
}

#rotaryPic_slide-6 img {
  margin: 0 auto;
  width: 26em;
  height: 29em;
}

/* Slideshow text */
div.Slide_Text {
  position: relative;
  top: 7vh;
  left: 1vw;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  width: 55%;
  height:40%;
  margin: auto;
  padding:1%;
  text-align: left;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: "Josefin Sans", sans-serif;
  line-height: 1.5rem;
  letter-spacing: 0.06vw;
  font-weight: 400;
  border-radius: 7px;
}

/* The dots under the slideshow */
#dotBox {
  position: relative;
  display: block;
  top: 57vh;
  left: 3vw;
  margin: 0 auto;
  width: 15vw;
}

.dot {
  position: relative;
  display: inline-block;
  bottom: 0;

  cursor: pointer;
  width: .75vw;
  height: .75vw;
  margin: 0.25vw;
  background-color: white;
  border-radius: 50%;
  transition: background-color 0.6s ease;
  z-index: 1;
  user-select: none;
}

/* Hover effect for slideshow dots */

.active,.dot:hover {
  background-color:rgb(247, 143, 247);
}

section#About {
  position: relative;
  top: 0vh;
  left: 0vw;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-top: 3vh;
  padding-top: 10vh;
  z-index: 2;
  
}

section#About h2 {
  position: relative;
  top: 0;
  left: 0vw;
  width: 100%;
  height: auto;
  margin: auto;
  padding: 17px 17px;
  text-align: center;
  font-family: "Stalemate", cursive;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 6.95rem;
  color: white;
  text-shadow: 1.25px 1.25px 1.25px white, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px black, 2.5px -0.1rem 2.5px white,
    2.75px 2.75px 2.75px magenta, 0px -0.15rem 3px coral,
    3.25px 3.25px 3.25px magenta, 0 -0.25rem 0px white,
    3.75px 3.75px 3.75px black, 4px 4px 4px black, 4.25px 4.25px 4.25px black;
  background-color: rgba(0, 0, 0, 0.65);
}

div#DisclaimerText {
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 70%;
  height: auto;
  margin: 0 auto;
  font-family:var(--ff-JS);
 
  color: rgba(246, 235, 235, 0.853);
  text-align: justify;
  font-weight: 100;
  background-color: rgba(0, 0, 0, 0.5);
}

div#DisclaimerText p {
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.5rem;
  color: rgba(248, 244, 244, 0.949);
  font-weight: 100;
}
div#DisclaimerText p span{
  font-weight:200;
  color: rgba(253, 249, 249, 0.926);
}



/* Public Service Announcement*/
div#DisclaimerText h3#PSA {
  position: relative;
  top: 4vh;
  margin: auto;
  padding-top: 3%;
  /* padding-left:2vw;
        padding-right:3vw; */
  padding-bottom: 0;
  text-align: center;
  font-family: var(--ff-JS);
  font-size:var(--fs-sm);
  font-weight: 300;
  color: rgba(255, 250, 250, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}
/* -------------------- */
/*GRID STARTS HERE */
/*  --------------------- */
article.grid-container {
 position: relative;
  top: 15vh;
  left: 0vw; 
  display: grid;
  width: 98%;
  height: auto;
  margin: 0 auto;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows:repeat(33,150px);
  gap:0.25%;
  padding: 0 1% 0 1%;
  background-color: rgba(0, 0, 0, 0.45);
}

/*Grid item-1 through grid item-7 */

div.item-1 {
  position: relative;
  grid-column: 1/span 7;
  grid-row: 1/37;
 
}

div#TheGist_Container {
  position: relative;
  width: auto;
  margin: 0;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.15);
}

div#TheGist_Container h2 {
  /* position:relative;
        top:-5vh;  */
  /* width:100%; */
  margin: 0;
  padding-bottom: 2vh;
  text-align: center;
  color: white;
  text-shadow: 1.25px 1.25px 1.25px white, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px black, 2.5px 2.5px 2.5px black,
    2.75px 2.75px 2.75px black, 3px 3px 3px black, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px black, 3.75px 3.75px 3.75px black, 4px 4px 4px black,
    4.25px 4.25px 4.25px black;
  font-family: var(--ff-SM);
  font-size: var(--fs-xl);
  font-weight:200;
}

div#TheGist_Container h5 {
  font-style: italic;
  text-align: justify;
  color: rgba(223, 219, 219, 0.801);
  font-family:var(--ff-JS);
  font-size:var(--fs-sm);
  font-weight: 100;
  margin: auto;
  padding: 0vh 2vw 0vh 2vw;
  line-height: 1.25;
  width:100%
}

span#Note {
  color: snow;
  font-weight: 400;
}

div#TheGist_Container p {
  color: white;
}

.content {
line-height:200%;
}

span#CriticalThinking {
  font-size:var(--fs-xxl);
  letter-spacing: 0.2rem;
  line-height: 5rem;
  color: magenta;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px white,
    1.75px 1.75px 1.75px turquoise, 2px 2px 2px slateblue,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px blue,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px black, 3.15px 3.15px 3.15px white,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px white;
    font-family:var(--ff-SM);
}

span#Skill {
  color: blue;
  text-shadow: 1.25px 1.25px 1.25px cyan, 1.5px 1.5px 1.5px darkblue,
    1.75px 1.75px 1.75px darkblue, 2px 2px 2px cyan, 2.25px 2.25px 2.25px cyan,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px black, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white, 4px 4px 4px white;
  font-size: var(--fs-lg);
  line-height: 2em;
}

span#ArtForm {
  color: rgb(68, 238, 232);
  text-shadow: 1.25px 1.25px 1.25px rgb(150, 14, 235), 1.5px 1.5px 1.5px darkblue,
    1.75px 1.75px 1.75px rgb(62, 88, 215), 2px 2px 2px cyan, 2.25px 2.25px 2.25px cyan,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px black, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white, 4px 4px 4px white;
  font-size: var(--fs-xl);
  line-height: 1.5rem;
}

#Para_2 {
  position: relative;
  top: -7vh;
  left: 0vw;
  width:85%;
  margin:0 auto;
}

#CodeIs {
  color: rgb(198, 158, 234);
  text-shadow: 1.25px 1.25px 1.25px darkturquoise, 1.15px 1.15px 1.15px fuchsia,
    1.5px 1.5px 1.5px fuchsia, 2.25px 2.25px 2.25px fuchsia,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px cyan, 3px 3px 3px white,
    3.25px 3.25px 3.25px yellow, 3.5px 3.5px 3.5px yellow;
Font-family:var(--ff-JS);
  font-size: 3.25rem;
  line-height: 3.75rem;
 
}

#Para_3 {
  position: relative;
  top: -10vh;
  left: 0vw;
}

#Fixing {
  color: pink;
  text-shadow: 1.15px 1.15px 1.15px slateblue,
    1.25px 1.25px 1.25px darkturquoise, 1.15px 1.15px 1.15px fuchsia,
    1.5px 1.5px 1.5px fuchsia, 2.25px 2.25px 2.25px fuchsia,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px cyan, 3px 3px 3px slateblue,
    3.25px 3.25px 3.25px yellow, 3.5px 3.5px 3.5px yellow;

  font-size: 3.75rem;
  line-height: 2.75rem;
}

#Shakespeare {
  position: relative;
  top: 0vh;
  left: 13vw;
  color: White;
  text-shadow: 1.25px 1.25px 1.25px white, 1.5px 1.5px 1.5px black,
    2.25px 2.25px 2.25px black, 2.5px 2.5px 2.5px black,
    2.75px 2.75px 2.75px black, 3px 3px 3px black;
  line-height: 1.25rem;
  font-size: 1.15rem;
}

#Polished{
  position: relative;
  text-align: center;
  color: cyan;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px fuchsia,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px black,
    2.75px 2.75px 2.75px black, 3px 3px 3px black, 3.15px 3.15px 3.15px black,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px white,
    3.75px 3.75px 3.75px white, 4px 4px 4px white, 4.25px 4.25px 4.25px white;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.5rem;
}

#Masterpiece{

}


#Doodle {

}


#Foundation {
  color: yellow;
  text-shadow: 1.25px 1.25px 1.25px yellow, 1.5px 1.5px 1.5px slateblue,
    2.25px 2.25px 2.25px slateblue, 2.5px 2.5px 2.5px rgb(167, 92, 237),
    2.75px 2.75px 2.75px rgb(245, 130, 29), 3px 3px 3px orange,
    3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
    4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
  font-size: 2.25rem;
  font-family:var(--ff-Lato);
  line-height:3.0;
}

#Styles {
  color:#f09148;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
  2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
  2.75px 2.75px 2.75px orange, 3px 3px 3px orange,
  3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
  3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
  4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
font-size:var(--fs-xxl);
font-family:var(--ff-Lato);
line-height:1.5;
}

#Sparkle{
  color:rgb(249, 175, 243);
  text-shadow:1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px fuchsia,
  2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px black,
  2.75px 2.75px 2.75px black, 3px 3px 3px black, 3.15px 3.15px 3.15px black,
  3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px white,
  3.75px 3.75px 3.75px white, 4px 4px 4px white, 4.25px 4.25px 4.25px white;
font-family:var(--ff-JS);
font-size:var(--fs-lg);
}



#Adventures,
#Trials,
#Discoveries {
  color: blueviolet;
  text-shadow: 1.25px 1.25px 1.25px blue, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px cyan,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px lime, 3.75px 3.75px 3.75px lime;
  font-size: 1.75rem;
  line-height: 2rem;
}

#Obstacles {
  color: lime;
  text-shadow: 1.25px 1.25px 1.25px lime, 1.35px 1.35px 1.35px lime,
    1.5px 1.5px 1.5px cyan, 2.25px 2.25px 2.25px cornflowerblue,
    2.5px 2.5px 2.5px black, 2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.35px 3.35px 3.35px white, 3.5px 3.5px 3.5px black,
    3.75px 3.75px 3.75px black;
  font-size: 2rem;
}

#Hunt {
  color: magenta;
  text-shadow: 1.25px 1.25px 1.25px magenta, 1.5px 1.5px 1.5px slateblue,
    2px 2px 2px slateblue, 2.25px 2.25px 2.25px slateblue,
    2.5px 2.5px 2.5px black, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white;
  font-size: 2.5rem;
  line-height: 3rem;
}

#Twists {
  text-align: center;
  color: yellow;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
    2.75px 2.75px 2.75px orange, 3px 3px 3px orange,
    3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
    4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
  font-size: 4rem;
  line-height: 3rem;
}

#Welcome {
  text-align: center;
  color: darkslateblue;
  text-shadow: 1.15px 1.15px 1.15px slateblue, 1.25px 1.25px 1.25px fuchsia,
    1.5px 1.5px 1.5px white, 2.25px 2.25px 2.25px white,
    2.5px 2.5px 2.5px fuchsia, 2.75px 2.75px 2.75px yellow, 3px 3px 3px yellow,
    3.15px 3.15px 3.15px yellow, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px yellow, 3.75px 3.75px 3.75px yellow, 4px 4px 4px white,
    4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
  font-size: 2.73rem;
  line-height: 2.37rem;
}

#Interruption {
  color: darkslateblue;
  text-shadow: 1.25px 1.25px 1.25px black, 1.5px 1.5px 1.5px black,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px cyan,
    2.75px 2.75px 2.75px slateblue, 3px 3px 3px slateblue,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px cyan,
    3.75px 3.75px 3.75px cyan, 4px 4px 4px black, 4.25px 4.25px 4.25px white,
    4.5px 4.5px 4.5px white;
  font-size: 1.25rem;
}

#Sponsor {
  color: darkslateblue;
  text-shadow: 1.25px 1.25px 1.25px black, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
    2.75px 2.75px 2.75px slateblue, 3px 3px 3px slateblue,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px cyan,
    3.75px 3.75px 3.75px cyan, 4px 4px 4px white, 4.25px 4.25px 4.25px white,
    4.5px 4.5px 4.5px white;
  font-size: 1.55rem;
}

#InTheLandOf {
  color: lime;
  text-shadow: 1.25px 1.25px 1.25px cornflowerblue,
    1.5px 1.5px 1.5px cornflowerblue, 2.25px 2.25px 2.25px cornflowerblue,
    2.5px 2.5px 2.5px black, 2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px black, 3.75px 3.75px 3.75px black;
  font-size: 1.75rem;
  line-height: 1.95rem;
}

#Shakespeare {
  color: lime;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
    2.25px 2.25px 2.25px cornflowerblue, 2.5px 2.5px 2.5px black,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px black, 3.75px 3.75px 3.75px black;
  font-size: 1.45rem;
  line-height: 1.45rem;
}

#unverified {
  color: lime;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
    2.25px 2.25px 2.25px cornflowerblue, 2.5px 2.5px 2.5px black,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px black, 3.75px 3.75px 3.75px black;
  font-size: 1.25rem;
  line-height: 1.25rem;
  position: relative;
  top: 0;
  left: 0;
}

#FullStack {
  color: darkslateblue;
  text-shadow: 1.15px 1.15px 1.15px slateblue, 1.25px 1.25px 1.25px slateblue,
    1.5px 1.5px 1.5px white, 2.25px 2.25px 2.25px white,
    2.5px 2.5px 2.5px fuchsia, 2.75px 2.75px 2.75px yellow, 3px 3px 3px yellow,
    3.15px 3.15px 3.15px yellow, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px yellow, 3.75px 3.75px 3.75px yellow;
  font-size: 2.15rem;
  line-height: 2.95rem;
}

#TechAcademy a {
  color: rgb(68, 238, 232);
  text-shadow: 1.25px 1.25px 1.25px rgb(150, 14, 235), 1.5px 1.5px 1.5px darkblue,
    1.75px 1.75px 1.75px rgb(62, 88, 215), 2px 2px 2px cyan, 2.25px 2.25px 2.25px cyan,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px black, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white, 4px 4px 4px white;
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.5rem;
  ;
}

#Tools {
  color: magenta;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px white,
    1.75px 1.75px 1.75px turquoise, 2px 2px 2px slateblue,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px blue,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px black, 3.15px 3.15px 3.15px white,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px white;
  font-size: 2rem;
  font-weight: 300;
  line-height: 2.5rem;
}

#SecretCodes{
      color: yellow;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
    2.75px 2.75px 2.75px orange, 3px 3px 3px orange,
    3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
    4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
  font-size: 4.75rem;
  line-height: 4rem;
    
}

#Negatives{
     color: blueviolet;
  text-shadow: 1.25px 1.25px 1.25px blue, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px cyan,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px lime, 3.75px 3.75px 3.75px lime;
  font-size: 4rem;
  line-height: 1.5rem;
    
}

#TakePride{
     color: magenta;
  text-shadow: 1.25px 1.25px 1.25px magenta, 1.5px 1.5px 1.5px slateblue,
    2px 2px 2px slateblue, 2.25px 2.25px 2.25px slateblue,
    2.5px 2.5px 2.5px black, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white;
  font-size:3rem;
  line-height: 3rem;
    
}


#Smile{
   color: lime;
  text-shadow: 1.25px 1.25px 1.25px lime, 1.35px 1.35px 1.35px lime,
    1.5px 1.5px 1.5px cyan, 2.25px 2.25px 2.25px cornflowerblue,
    2.5px 2.5px 2.5px black, 2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.35px 3.35px 3.35px white, 3.5px 3.5px 3.5px black,
    3.75px 3.75px 3.75px black;
    font-size:1.75rem;
    
}

#Laugh{
    color: rgb(68, 238, 232);
  text-shadow: 1.25px 1.25px 1.25px rgb(150, 14, 235), 1.5px 1.5px 1.5px darkblue,
    1.75px 1.75px 1.75px rgb(62, 88, 215), 2px 2px 2px cyan, 2.25px 2.25px 2.25px cyan,
    2.5px 2.5px 2.5px cyan, 2.75px 2.75px 2.75px white, 3px 3px 3px white,
    3.15px 3.15px 3.15px black, 3.25px 3.25px 3.25px black,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white, 4px 4px 4px white;
  font-size: var(--fs-lg);
  line-height: 1.5rem;
    
}

#LearnNew {
    color: yellow;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
    2.75px 2.75px 2.75px orange, 3px 3px 3px orange,
    3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
    3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
    4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
  font-size: 4rem;
  line-height: 3rem;
    
    
}

#KeepImproving{
    color: darkslateblue;
  text-shadow: 1.25px 1.25px 1.25px black, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
    2.75px 2.75px 2.75px slateblue, 3px 3px 3px slateblue,
    3.25px 3.25px 3.25px white, 3.5px 3.5px 3.5px cyan,
    3.75px 3.75px 3.75px cyan, 4px 4px 4px white, 4.25px 4.25px 4.25px white,
    4.5px 4.5px 4.5px white;
  font-size: 2.10rem;  
    
    
}

#Mission {
     color:#f09148;
  text-shadow: 1.25px 1.25px 1.25px slateblue, 1.5px 1.5px 1.5px cornflowerblue,
  2.25px 2.25px 2.25px fuchsia, 2.5px 2.5px 2.5px fuchsia,
  2.75px 2.75px 2.75px orange, 3px 3px 3px orange,
  3.15px 3.15px 3.15px fuchsia, 3.25px 3.25px 3.25px fuchsia,
  3.5px 3.5px 3.5px slateblue, 3.75px 3.75px 3.75px slateblue,
  4px 4px 4px white, 4.25px 4.25px 4.25px white, 4.5px 4.5px 4.5px white;
font-size:3.0rem;
font-family:var(--ff-Lato);
line-height:1.5;
    
}

#NiceToMeetYou {
    color: white;
    font-size:2.0rem;
    font-family:var(--ff-Lato);
  padding-left:5vw;
}

#LaurieSue {
  color: blueviolet;
  text-shadow: 1.25px 1.25px 1.25px blue, 1.5px 1.5px 1.5px white,
    2.25px 2.25px 2.25px cyan, 2.5px 2.5px 2.5px cyan,
    2.75px 2.75px 2.75px fuchsia, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px white, 3.25px 3.25px 3.25px white,
    3.5px 3.5px 3.5px lime, 3.75px 3.75px 3.75px lime;
  font-size: 3.5rem;
}

#CantWait {
  padding-left:10vw;
  color: yellow;
  text-shadow: 1.25px 1.25px 1.25px yellow, 1.5px 1.5px 1.5px slateblue,
    2px 2px 2px fuchsia, 2.15px 2.15px 2.15px fuchsia,
    2.25px 2.25px 2.25px white, 2.5px 2.5px 2.5px orange,
    2.75px 2.75px 2.75px orange, 3px 3px 3px fuchsia,
    3.15px 3.15px 3.15px slateblue, 3.25px 3.25px 3.25px slateblue,
    3.5px 3.5px 3.5px white, 3.75px 3.75px 3.75px white;
  font-size: 2rem;
}

.in-line-word{
  opacity:.25;
    filter:grayscale(100%);
    transition: filter 2s 1.15s ease,
                opacity 1.5s 1s ease;
    will-change: filter, opacity;
}


.in-line-word.is-visible{
  opacity:1;
  filter:grayscale(0%);
}
/* 
.show-on-scroll{
  opacity:1;
  filter:grayscale(0%);
  transform:translateY(20px);
  transition: opacity 1.5s 1s ease-out,
              transform 1.5s 1s ease-out;
  will-change: opacity, transform;
  animation: scroll-fade-in-out linear;
  animation-timeline: view()
}

@keyframes scroll-fade-in-out{
  0%{
      opacity:0;
  }
100%  {
      opacity:1;
  }
} */


.item-2 {
  grid-column: 8/span 4;
  grid-row: 1/ span 3;
  
  padding-left: 5vw;
}
/* Right side of the About Row - About_Column_1 */
div#Earth_Lightbulb_Container {
  position:relative;
  margin: 0 auto;
  width: 30vw;
  height:auto;
    padding: 1% 3% 3% 3%;
 
  object-fit: cover;
 
  overflow:hidden;
  border-radius: 10px;
  border: 10px dotted rgba(234, 236, 238, 0.896);
}

div#Earth_Lightbulb_Container img {
  position:relative;

width:100%;
height:100%;
  margin: 2vh auto;
  background-color: rgba(0, 0, 0, 0.65);
  object-position: 50% 50%;

  background-color: rgba(201, 197, 197, 0.65);

}

div#Earth_Lightbulb_Text {
  position: relative;
  top: 1vh;
  left: 0vw;
  color: rgb(247, 224, 205);
  padding: 1% 3% 3% 3%;
  margin: 0 auto;
  text-align: center;
  margin:2% 5% 2% 5%;
  background-color:rgba(0, 0, 0, 0.65);
}

span#Author {
  display: inline-block;
  margin-left: 7vw;
}

#Earth_Lightbulb_Pic img:hover {
  filter: grayscale(0%); /* Brings back most of the image's color when hovered over */
  transition: transform ease-in-out 3s;
  transform: scale(1.15);
}

/*LinkedIn Stuff */

div.item-3 {
  position:relative;
  grid-column: 8/span 5;
  grid-row: 9/11; 
 
  padding-left: 3vw;
  padding-right:3vw;
}

div.linkedIn_Container {
  position: relative;
  top:0vh;
  width: 90%;
  height: 100%;
 background-color: coral;
  border: 10px dotted rgba(234, 236, 238, 0.896);
  border-radius: 10px;
  margin:auto;
 padding:5% 4% 0% 3%;
  object-fit:cover;

}

#LinkedInPic{
  position:relative;
  top:0vh;
  left:-3vw;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
div.linkedIn_Container a{

  position:relative;
  display:block;
  top:-10vh;
  left:0vw;
  width:100%;
  height:auto;
  margin:0 auto;
  color:fuchsia;
  font-size:1.25rem;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  background-color:peachpuff;

}


div.linkedIn_Container img#LinkedInPic {
  position: relative;
  left: 1vw;
  top: -4vh;
  /* top:10vh;
    left:6vw; */
  width: 100%;
  height:100%;
  object-fit:contain;
  object-position:50% 50%;
}

.item-4 {
  position:relative;
  grid-column: 8/span 5;
  grid-row: 13/18;
  padding-left: 5vw;
  padding-right:3vw;
 
}

#Faucet-Container {
  position: relative;
  object-fit: inherit;
  width: 100%;
  height: 100%;
  top:-8vh;
  background-color:cornflowerblue;
  border-radius: 10pt;
  margin: auto;
  /* padding:1% 5% 3% 2%; */
  border: 10pt dotted rgba(234, 236, 238, 0.896);
  transition: transform ease-in-out 2.5s;
  z-index: 2;
  color: rgb(247, 224, 205);
}

#Faucet-Container img {
  position: relative;
  top: 7vh;
  left: -3vw;
  right: 0;
  bottom: 0;
  object-fit: scale-down;
  margin: auto 0;
  padding-top: 10vh;

}

#Albert_Text {
  position: relative;
  left: 1vw;
  top: 11vh;

  padding: 1% 5% 3% 2%;
  margin: 0 auto;
  text-align: center;
}

#Faucet-Container:hover {
  filter: grayscale(0%);
  background-color: rgb(250, 149, 183);
 color:slateblue;
 font-weight:bold;
  transform: scale(1.01);
}

.item-5 {
  grid-column: 8/span 4;
  grid-row:19/22; 
  padding-left: 5vw;
}

#GitHub{
  position: relative;
  width: 35vw;
  height: 100%;
  top:-13vh;
  /* margin: 0 auto; */
  background-color:silver;
  border: 10px dotted rgba(234, 236, 238, 0.896);
  border-radius: 10px;
  object-fit:contain;
  overflow:hidden;
  padding:1.5% 1.5% 2.5% 1.5%;
  margin:0 auto;
}

a img#GitHubImage {
position:relative;
top:-5vh;
left:0vw;
width:100%;
height:100%;
border-radius:10px;
object-fit:cover;

  /* top:4;
  left:-1; */
  margin: 0 auto ;
  /* padding: 4vh 2vw 0vh 2vw; */
  z-index: 3;
}

#GitHubAddress{
  position:relative;
  top:-12vh;
  left:2vw;
  width:100%;
  height:10vh;
  margin:0 auto;
 
  font-size:var(--fs-sm);
  font-family:var(--ff-JS);
  font-weight:100;
  z-index:7;
}

#GitHubAddress a{
  position: relative;
  /* display:inline-block; */
  top: -13vh;
  left: 5.15vw;
  width: 20vw;
  margin: 0 auto;
  z-index: 5;
  /* color:rgb(230, 31, 200);
    font-size:medium;
    font-weight:bold; */
  color: slateblue;
  font-size: 1em;
  /* text-shadow:1.5px 1.5px 0px slateblue,
                1.75px 1.75px 1.75px white ,
                2px 0px 2px black;
    line-height:2em; */
  font-weight:bold;
  text-decoration: none;
  text-align:center;
}


/**** BEGIN item-6  ****/


/* .item-6 {
  grid-column: 8/span 4;
  grid-row: 19/22;
  position: relative;
  width: 37vw;
  height: auto;
  padding-left: 5vw;
}

div#Shine_Container {
  position: relative;
 
  width: 35vw;
  height: 100%;
  border: 10px dotted rgb(247, 224, 205);
  border-radius: 10px;
  overflow: hidden;
  object-fit:cover;
  /* padding:.5% .5% .5% .5%; */


/* div#Shine_Container video {
  position:relative;

  width: 100%;
  height: 100%;
  object-fit:contain;
}

div#Shine_Container p#LightOfMine {
  position: relative;
  display: block;
  top: -50vh;
  left: 10vw;
  width: 20vw;
  height: 35vh;
  color: white;
  padding-left: 1vw;
}

span#Teacher {
  position: relative;
  display: block;
  width: 20vw;
  top: -3vh;
  left: -5vw;
  font-size: large;
  font-style: italic;
  font-weight: bold;
} */ 

/**** BEGIN item-7  ****/

.item-7 {
  grid-column: 8/span 4;
  grid-row: 22/27;
  padding-left:15%;
}

div#Lightbulb_Container {
  position: relative;
  /* top:90vh;
    left:1vw;  */
  width: 35vw;
  height: 100%;
  margin: 0 auto;
  padding-left:5%;
  border: 10px dotted rgba(234, 236, 238, 0.896);
  border-radius: 10px;
  z-index: 1;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.75);
}

div#Lightbulb_Container video {
  position: relative;
  top: 0vh;
  left: 1vw;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* padding-right:10px; */
  filter: grayscale(85%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  /* object-fit: scale-down; */
  /* opacity:60%; */
}




div#Lightbulb_Container h2#LetsTalk {
  position: relative;
 top:-85vh;
  text-align: center;
  color: rgb(235, 57, 235);
  font-family: "Abril Fatface";
  font-size: 3.5em;
  font-weight: bold;
  z-index: 1;
}

div#Lightbulb_Container h4#ClickMe {
  position: relative;
  top: -39vh;
  text-align: center;
  color: rgb(96, 140, 243);
  font-family: "Josefin Sans";
  font-size: 1.15em;
  font-weight: 600;
  z-index: 1;
}

#Resume{
  position: relative;
  top: -85vh;
  text-align: center;
  
  font-family: "Josefin Sans";
  font-size: 1.75rem;
  font-weight: 600;
  z-index: 1;
background-color:rgba(0, 0, 0, 0.35);
cursor:pointer;

}

#Resume_Click a{
  display:block;
  text-decoration:none;
  transition:all 2.5s linear;
  color: cornflowerblue;
height:5%;
width:75%;
margin:0 auto;
text-align:center;

}

#Resume_Click a:hover{
  background-color:rgba(234, 236, 238, 0.896);
  
  transform:scale(1.2);
}


#Lightbulb_Container {
     width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}


div#Lightbulb_Container h4#ClickMe a {
  color: rgb(248, 69, 248);
  text-shadow: 1.15px 1.15px 1.15px cyan;
  font-family: "Josefin Sans";
  font-size: 1.75rem;
  font-weight: bold;
 z-index: 1;
  position: relative;
  text-align: center;
  padding: 10px; 
}

/****  END GRID ****/

/* .row{ 
    position:relative;
    top:0;
    background-color:rgba(0, 0, 0, .25 );
   
    width:100%;
    height:30%;
    z-index:2;

} */


section#Poem {

position:relative;
top:-35vh;
left:0;
width:70%;
height:90vh;
margin:0 auto;


}

div#Poem_Container {
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;

  /* background-color:rgba(15, 15, 15, 0.3); */
  border: 10pt dotted rgb(247, 224, 205);
  border-radius: 10pt;
  overflow: hidden;
  opacity: 0.85;
  z-index: 3;
  font-family:var(--ff-JS);
  font-size:var(--fs-sm);

}

div#Poem_Container video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;

  /* filter: grayscale(60%); */
}


div#Poem_Text_Container {
  position: relative;
  width: 100%;
  height: 100vh;
  top: -100vh;
  left: 0vw;
  z-index: 4;
  margin: 0 auto;
  padding:2% 10% 2% 12%;
  background-color:rgba(3, 3, 3, 0.45);
  z-index:4;

}

.poem_text{
  position:relative;
  top:0;
  left:0;
  width:60%;
  text-align:center;
  margin: 0 auto;
}

 p#JobsQuote {
 
  position: relative;
  top: 0vh;
  font-family:var(--ff-JS);
  font-size: 1.35em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.75em;
  text-align: left;
  color: white;
  margin:0 auto;
}

span#HeresToTheCrazyOnes {
  position: relative;
  display: inline-block;
  top: 3vh;
  left:4vw;
  font-size: 1.35em;
  font-weight: 300;
  color: white;
  font-style: italic;
  line-height: 1.5em;
  margin:0 auto;
}

p#JobsQuote span#TheMisfits {
  position: relative;
  display: block;
  top: 3vh;
  left:4vw;
}

p#Jobs {
  position: relative;
  display: inline-block;
  top: 1.5vh;
  left:0vw;
  font-size: 1.35em;
  font-weight: 300;
  color: white;
}

#Goodbye{
  position:relative;
  top:-25vh;
  left:0;
  width:90%;
  height:auto;
  margin:5%;
  background-color:rgba(0, 0, 0, 0.35);
  z-index:3;
}
div.goodbye {
  position: relative;
  top: 5vh;
  left: 0vw;
  width: 80vw;
  height: auto;
  color: white;
  font-family: "Josefin Sans";
  font-size: 1.15em;
  font-weight: 600;
  text-align: center;
  padding: 1.5vh;
  margin:0 auto;
  background-color:rgba(0, 0, 0, 0.75);

} 

div.goodbye h4 {
  position: relative;
  top: 3vh;
  left: -20vw;
  font-family: "Stalemate", cursive;
  z-index: 3;
  color: peachpuff;
  text-shadow: 1px 1px 1px orangered, 1.15px 1.15px 1.15px coral,
    1.25px 1px 1.25px cornflowerblue, 1.5px 1.5px 1.5px rgb(252, 89, 225),
    1.75px 1.75px 1.75px rgb(252, 89, 225), 2px 2px 2px black,
    2.15px 2.15px 2.15px white, 2.25px 2.25px 2.25px white,
    2.5px 2.5px 2.5px white, 2.75px 2.75px 2.75px white;

  font-size: 4em;
}

div.goodbye h3 {
  position: relative;
  top: 7vh;
  left: -15vw;
  font-family: "Stalemate", cursive;
  z-index: 3;
  color: orchid;
  text-shadow: 1.05px 1.05px 1.05px orchid, 1.1px 1.1px 1.1px cornflowerblue,
    1.15px 1.15px 1.15px white, 1.25px 1.25px 1.25px slateblue,
    1.5px 1.5px 1.5px slateblue, 1.57px 1.75px 1.7px cyan, 2px 2px 2px cyan,
    2.25px 2.25px 2.25px white, 2.5px 2.5px 2.5px fuchsia,
    2.6px 2.6px 2.6px coral, 2.7px 2.7px 2.7px coral, 2.85px 2.85px 2.85px white,
    2.95px 2.95px 2.95px white, 3.15px 3.15px 3.15px white,
    3.3px 3.3px 3.3px white;
  font-size: 4em;
}

div.goodbye h2 {
  z-index: 3;
  position: relative;
  top: 2vh;
  left: 0vw;
  color: slateblue;
  text-shadow: 1px 1px cyan, 1.1px 1.1px 1.1px cyan, 1.2px 1.2px 1.2px cyan,
    1.3px 1.3px 1.3px limegreen, 1.45px 1.45px 1.45px limegreen,
    1.55px 1.55px 1.55px white, 1.65px 1.65px 1.65px white,
    1.75px 1.75px 1.75px orchid, 1.85px 1.85px 1.85px orchid,
    1.95px 1.95px 1.95px orchid;
  font-family: "Josefin Sans";
  text-align: center;
  font-size: max(7em);
  font-weight: 300;
  transition: transform ease-in-out 2s 0.25s;
  margin:0 auto;
}

/* FOOTER SECTION*/
footer {
  width:98%;

  margin:2% 1% 3% 1%;
 
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(135, 156, 197);
}

div#OscarWilde{
  position:relative;
  top:-15vh;
  left:6vw;;
  width:50%;
  height:50%;
margin:0 auto;
  background-color: rgba(0, 0, 0, 0.5);
}

div#OscarWilde p q {
  position: relative;
  top: 0vh;
  left:0vw;
  text-align: center;
  color: cornflowerblue;
  text-shadow: 1.15px 1.15px 1.15px white;
  font-size: 1.5em;
  margin: 0 auto;
  z-index: 3;
}

span#Oscar {
  position: relative;
  display:block;
  top: 1vh;
  left: 16vw;
  z-index: 3;
  
}

img#PinkBeeMe_Logo {
  filter: grayscale(0%);
  position: relative;
  top: -2vh;
  left: 3.5vw;
  display: block;
  margin: auto;
  z-index: 3;
}

#Done_Btn {
  color: steelblue;
}

#Good-bye_Footer-Text {
  position: relative;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 110vh;
}

#Goodbye #ThankYou {
  position: relative;
  top: 53vh;
  left: 46.5vw;
  color: peachpuff;
  text-shadow: 1.1px 1.1px 1.1px white;
}

h2#GoodbyeCTC span#Com {
  font-size: 0.5em;
  color: rgb(250, 104, 250);
  text-shadow: 1px 1px 1px fuchsia, 1.15px 1.15px 1.15px cyan,
    1.25px 1px 1px cyan, 1.5px 1.5px 1.5px cyan, 1.75px 1.75px 1.75px slateblue,
    2px 2px 2px slateblue, 2.15px 2.15px 2.15px black,
    2.25px 2.25px 2.25px white, 2.5px 2.5px 2.5px white,
    S 2.75px 2.75px 2.75px white, 3px 3px 3px white, 3.25px 3.25px 3.25px white;
}

#Good-bye_Footer-Text #Until_Footer-Text {
  position: relative;
  top: 49vh;
  left: 53vw;
  color: peachpuff;
  text-shadow: 1.1px 1.1px 1.1px white;
}

#Good-bye_Footer-Text #Great-Day_Footer-Text {
  position: relative;
  top: 37vh;
  left: 45vw;
  color: orchid;
  text-shadow: 2px 2px 2px peachpuff;
  font-size: 1.77em;
}

#From_Footer-Text {
  position: relative;
  top: 35vh;
  left: 51vw;
  color: peachpuff;
  text-shadow: 1.25px 1.25px 1.25px peachpuff;
  font-family: "Stalemate", cursive;
}

#CreatingTheCode_Footer-Text {
  position: relative;
  top: 30vh;
  left: 0vw;
  text-align: center;
  color: rgb(97, 124, 179);
  text-shadow: 2px 4px 5px orchid;
  font-family: "Optima";
  font-size: 5em;
}

#CreatingTheCode_Footer-Text span {
  font-variant: all-petite-caps;
}

div#copy p{
  font-size:var(sm);
}

/*Mobile version*/
@media (min-width: 40em) {
  :root {
    --fs-xxxl: 10.5rem;
    --fs-xxl: 7.5rem;
    --fs-xl: 5.25rem;
    --fs-lg: 3.75rem;
    --fs-med: 2.625rem;
    --fs-reg: 1.5rem;
    --fs-sm: 1rem;
  }

}

@media only screen and (max-width: 600px) {
}




@media only screen and (max-width: 600px) {
}





@media screen and (max-width: 780px) {
  /* General styles for the nav bar */
  nav.navBar {
    display: flex;
    flex-direction: column;
    background-color: #333;
    color: white;
    padding: 10px;
  }

  .navBar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-menu {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
  }

  .navItem {
    margin: 5px 0;
  }

  .navLink {
    text-decoration: none;
    color: white;
    transition: color 0.3s;
  }

  .navLink:hover {
    color: #ffa500;
  }

  /* Hamburger menu styles */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: white;
  }}

  /* .show-on-scroll {

  }

  .show-on-scroll.is-visible{ */