body {
  position:absolute;
  /* background-image:url("images/background_image2.jpg"); */
  height:100vh;
  width:100vw;
  margin:0px;
  padding:0px;
  z-index:0;
  overflow:hidden;
}
#loadCard {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index: 5;
  position:absolute;
  height:100%;
  width:100%;
  font-family:"Roboto", sans-serif;
  font-size:2em;
  margin:auto;
  background-color:black;
  color:white;
  text-align:center;
  opacity:1;
  transition: opacity .7s ease-in-out;
}
#loadP {
  opacity: 1;
  animation-name: loadText;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#clickThrough {
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index: 5;
  position:absolute;
  height:100%;
  width:100%;
  font-family:"Roboto", sans-serif;
  font-size:2em;
  margin:auto;
  background-color:rgba(0,0,0,1);
  color:#000000;
  transition: opacity .7s ease-in-out, color .7s ease-in-out;
  cursor:pointer;
}
@keyframes loadText {
  0% {opacity: 1}
  50% {opacity: 0} 
  100% {opacity: 1}
}
.loader {
  width: 120px;
  height: 20px;
  background:
   linear-gradient(#ddd 0 0) 0/0% no-repeat
   #000;
  animation: l1 2s infinite linear;
}
@keyframes l1 {
    100% {background-size:100%}
}
#introDiv {
  z-index: 4;
  position:absolute;
  height:100%;
  width:100%;
  font-family:"Roboto", sans-serif;
  font-size:2em;
  background-color:black;
  color:#ffffff;
  align-content:center;
  text-align:center;
  opacity:.5;
  transition: opacity .7s ease-in-out;
}
#backgroundImg {
  position:absolute;
  height:110%;
  width:110%;
  left: -5%;
  top: -5%;
  background-image:url("images/background_image2.jpg");
  z-index:0;
  filter:blur(0px);
  transition: filter .7s ease-in-out;
}
#backgroundFilter {
  position:absolute;
  height:100%;
  width:100%;
  background-color:#000000;
  opacity:0;
  transition: opacity .7s ease-in-out;
  z-index:0;
}
#projectGrid {
  opacity: 1;
  position:fixed;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap:2px;
  height:100%;
  width:100%;
  top:0%;
  left:0%;
  right:0%;
  bottom:0%;
  transition: width .7s, left .7s, opacity .7s;
  transition-timing-function: ease-in-out;
  z-index:0;
}
#gridMask {
  width:300vw;
  height:300vh;
  top:-100vh;
  left:-100vw;
  position:absolute;
  mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 8%);
  -webkit-mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 8%);
  opacity:1;
  transition:opacity .7s ease-in-out;
}
#cursor {
  cursor:grab;
  border-radius: 50%;
  position:absolute;
  top:0;
  bottom:0;  
  left:0;
  right:0;
  margin: auto;
}
.projectSquare {
  border:2px rgba(255, 255, 255, .5) solid;
  overflow:hidden;
  height:96%;
  width:98%;
  left:0%;
  top:0%;
  transition: height .7s, width .7s;
  transition-timing-function: ease-in-out;
}
.projectCoverImg {
  position:relative;
  object-fit:cover;
  height: 100%;
  width:100%;
  left:0%;
  transition: opacity .7s, left .7s;
  transition-timing-function: ease-in-out;
  opacity:0;
  filter:blur(0px);
}
#mainContainer {
  display:flex;
  position:absolute;
  margin-top:0%;
  margin-bottom:0%;
  height:100%;
  margin-left: 0%;
  margin-right: 0%;
  width:100%;
  z-index:1;
}
#playPauseHome {
  color:white;
  position:fixed;
  /* left:calc(50% - .5em); */
  bottom:3%;
  opacity:1;
  transition: opacity .7s ease-in-out;
}
#menuBar {
  width:92%;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 2%;
  overflow:hidden;
  position:fixed;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  justify-content:space-between;
  font-family:"Roboto", sans-serif;
  font-weight: 800;
  font-style:normal;
  font-size: 3em;
  z-index:4;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
}
.menuItem {
  width:fit-content;
}
.inactiveText {
  color: #808080;
  cursor:pointer;
}
.inactiveDiv {
  width: 20%;
  background-color: #808080;
  cursor:pointer;
}
.activeText {
  color: #ffffff;
  cursor:default;
}
.activeDiv {
  width: 90%;
  background-color: #ffffff
}
#projectsButton {
  width: .7em;
  overflow: hidden;
  transition: width .7s, color .7s;
  transition-timing-function: ease-in-out;
  z-index:4;
}
#projectsButton:hover{
  color:#ffffff;
}
#aboutButton {
  display:grid;
  justify-self:right;
  width: .7em;
  transition: width .7s, color .7s;
  transition-timing-function: ease-in-out;
}
#aboutButton:hover {
  color:#ffffff;
}
#homeRectangle {
  justify-self:center;
  align-self:center;
  height: 15%;
  transition: width .7s, background-color .7s;
  transition-timing-function: ease-in-out;
  z-index: 4;
  border: black solid 1px;
}
#homeRectangle:hover {
  background-color: #ffffff;
}
#projectsMenu {
  left: -100%;
  position:absolute;
  color: #888888;
  font-family:"Roboto", sans-serif;
  font-weight: 400;
  font-style:normal;
  transition: left .7s;
  transition-timing-function: ease-in-out;
  opacity:1;
  transition: opacity .7s ease-in-out;
}
.projectMenuItem {
  display:grid;
  grid-template-columns: 10% 90%;
  width:fit-content;
  transition: color .7s;
  transition-timing-function: ease-in-out;
}
.projectMenuItem.clicked {
  color:#ffffff
}
.projectMenuItem.overImg {
  color:#ffffff
}
.projectTitle {
  position:absolute;
  left: 6vh;
}
.projectMenuItem:hover {
  color: #ffffff;
  cursor: pointer;
}
#imgContainer {
  opacity:0;
  transition: opacity 0.7s ease-in-out;
  position:absolute;
  display:grid;
  top:0%;
  right: 0%;
  bottom: 0%;
  overflow:auto;
  z-index:1;
}
.projectImg {
  position:relative;
  transition: left .7s;
  transition-timing-function: ease-in-out;
  width:100%;
  height:100%;
  object-fit:cover;
  margin: .5em solid black;
  z-index:2;
  opacity:1;
  transition: opacity .7s ease-in-out, left .7s ease-in-out;
}

.fa-chevron {
  position:absolute;
  color:#ffffff;
  z-index:3;
  opacity:.75
}
.fa-chevron-right {
  right:0px;
  top:48%;
  margin-right:1%;
}
.fa-chevron-left {
  left:0px;
  top:48%;
  margin-left:1%;
}
#imgCaption {
  /* position:absolute; */
  bottom:0px;
  color: #ffffff;
  font-family:"Roboto", sans-serif;
  z-index:3;
  background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1) 100%)
}

#imgText {
  font-size: 1em;
  z-index:2;
  float:right;
}

#imgText a {
  color:#ffffff;
  text-decoration:none;
}

.fa-up-right-from-square.fa-solid {
  font-size:1em;
}

#playPause {
  z-index:4;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
}
#imgClear {
  font-size:1.7em;
  color: #ffffff;
  position:fixed;
  z-index:4;
  top:calc(3em + 2%);
  right:4%;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
}

.fa-solid {
  font-size:3em;
  justify-self:center;
  align-self:center;
  cursor:pointer;
}
#about {
  position:absolute;
  overflow:auto;
  top:-100%;
  /* height:98%; */
  /* display:grid; */
  font-family:"Roboto", sans-serif;
  color: #ffffff;
  transition: top .7s, transform .7s;
  transition-timing-function: ease-in-out;
  margin-left:4%;
  margin-right:4%;
}
#about a {
  color: #ffffff
}
#aboutBottom {
  position:absolute;
  /* display:inline; */
  bottom: 6%;
  font-size:1.1em;
  justify-self:left;
}
#aboutBottom a {
  position:relative;
  text-decoration:none;
  margin-bottom:50px;
}
#sliderDiv {
  position:fixed;
  display:flex;
  flex-direction:column;
  right:4%;
  opacity: 1;
  transition: opacity .7s;
}
.sliderLabel {
  z-index:2;
  font-size:1em;
  font-family:"Roboto", sans-serif;
  color:#ffffff;
}
.slider {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
  position:relative;
  z-index: 2;
  /* width:25vmin; */
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -12.5px; 
}
/* All the same stuff for Firefox */
.slider::-moz-range-thumb {
  height: 4%;
  width: 4%;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
/* All the same stuff for IE */
.slider::-ms-thumb {
  height: 4%;
  width: 4%;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
width: 100%;
height: 1vmin;
cursor: pointer;
background: #ffffff;
border-radius: 10%;
}
.slider:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
.slider::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}