/* Custom made by me */
/* For About page hovering effects and animations */
/* initial state for the text of my address, phone, email */
.subheading.mb-5 {
  opacity: 0;
}

#email-and-address-container {
  height: 2em;
  transition: 1s;
  margin: 0.5em 0;
}
#email-and-address-container a {
  color: white;
  text-decoration: unset;
}

section.name-phone-email:hover #email-and-address-container {
  height: 5.3em;
  transition: 1s;
}

section.name-phone-email:hover #email-and-address-container > .subheading.mb-5 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0.2em);
  transition: 1s;
  color: var(--bs-gray-300);
}

.name-phone-email ~ h3,
.name-phone-email ~ p,
.name-phone-email ~ .social-icons {
  opacity: 0;
  transform: translateY(20em);
}

/* Abouts page animations */
.name-only > h1:first-of-type {
  opacity: 0;
  filter: drop-shadow(1px 0px 4px "rgb(79, 190, 255)");
  display: flex;
}

/* The blinking cursor */
/* .name-only>h1:first-of-type+h1::after { */
#blinking-cursor {
  width: 0.54em;
  height: 3.5px;
  position: relative;
  right: -0.2rem;
  top: 0.84em;
  animation: 530ms ease 0s infinite alternate none running blink;
  display: flex;
  background: white;
}

.name-only > h1:first-of-type + h1 {
  opacity: 0;
  /* padding-left: 0.5em; */
  filter: drop-shadow(rgb(79, 190, 255) 1px 0px 4px);
}

/* Abouts page - navbar animations */
#navbarResponsive > ul > li .nav-link.active::before {
  opacity: 1;
}

li.nav-item .nav-link:hover::before {
  content: "";
  display: inline-flex;
  width: 0.2em;
  background: white;
  height: 1em;
  transition: 0.5s;
  /* transition-delay: 0.1s; */
  transform: scaleY(1) translateY(0.25em);
  opacity: 1;
  position: relative;
  right: 0.2em;
}

li.nav-item .nav-link::before {
  content: "";
  bottom: 0.1em;
  display: inline-flex;
  width: 0.5em;
  background: white;
  height: 0.5em;
  transition: 0.5s;
  /* transition-delay: 0.1s; */
  transform: scaleY(1);
  opacity: 0;
  position: relative;
  right: 0.2em;
}

/* Abouts page */
#about {
  transition-duration: 0.25s;
}

.name-phone-email > h1 > span {
  padding-left: 0.5em;
}

.name-only {
  display: flex;
  flex-direction: row;
}

#sideNav-divider {
  position: absolute;
  opacity: 0;
  width: 0.4em;
  background: white;
  height: 0;
  left: 17em;
  bottom: 3em;
  transition: 1s;
  /* transform: scale(2,1); */
  content: "";
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#copyright {
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translate(-50%);
}

/* //# Education section */
/* #education .resume-section-content>*{
    opacity:0;
    transform: translateY(1em);
}
 */
/* //# Experience section */
.resume-overlay {
  --primary-font-color: rgb(52, 58, 64);
  -ms-overflow-style: none;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  transition: transform 0.5s, opacity 0.5s, background 0.5s, visibility 0.5s;
  position: fixed;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  inset: 0;
  justify-content: center;
  align-items: center;
}
.resume-overlay *::-webkit-scrollbar {
  display: none;
}
.resume-overlay * {
  transition: 0.25s;
  font-family: "segoe_uilight", Tahoma, Geneva, Verdana, sans-serif;
}
.resume-overlay.show {
  opacity: 1;
  visibility: visible;
}
.resume-overlay.show.warning {
  background: rgba(185, 155, 113, 0.23);
}
@media screen and (min-width: 0px) {
  .resume-overlay .gallery-container {
    display: none;
  }
  .resume-overlay .rotation-warning {
    transition: 0.25s;
    transform: scale(0.8);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 0px 30px 0px rgba(41, 255, 255, 0.2);
    gap: 1rem;
    flex-direction: column;
    font-weight: 300;
    opacity: 0;
    border: solid 1px #D9D9D9;
  }
  .resume-overlay .rotation-warning.show {
    opacity: 1;
    transform: scale(1);
  }
  .resume-overlay .rotation-warning.show img {
    transform: rotate(90deg);
  }
  .resume-overlay .rotation-warning p {
    margin: 0;
  }
  .resume-overlay .rotation-warning img {
    max-width: 50px;
    transition-delay: 2s;
    transition: transform 1s;
  }
}
@media screen and (min-width: 576px) and (min-height: 288px) {
  .resume-overlay {
    display: flex;
  }
  .resume-overlay .gallery-container {
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.25s, opacity 0.25s;
    transition-delay: 0s, 0s;
    width: 1000px;
    height: 500px;
    background: white;
    aspect-ratio: 2/1;
    display: flex;
    position: relative;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.25);
  }
  .resume-overlay .gallery-container.show {
    transform: scale(0.55);
    opacity: 1;
  }
  .resume-overlay .gallery-container img.close-popup {
    z-index: 2;
    position: absolute;
    width: 55px;
    right: 10px;
    top: 10px;
    aspect-ratio: 1/1;
    cursor: pointer;
  }
  .resume-overlay .gallery-container img.close-popup:hover {
    transform: scale(1.1);
  }
  .resume-overlay .gallery-container img.arrow {
    margin: 0;
    width: 100px;
    height: 140px;
    z-index: 2;
    cursor: pointer;
  }
  .resume-overlay .gallery-container img.arrow.right {
    position: absolute;
    top: 50%;
    transform: translateX(15px) translateY(-70px) scale(0.85);
    right: 0;
  }
  .resume-overlay .gallery-container img.arrow.right:hover {
    transform: translateX(15px) translateY(-70px) scale(0.9);
  }
  .resume-overlay .gallery-container img.arrow.left {
    position: absolute;
    top: 50%;
    transform: translateX(-15px) translateY(-70px) scale(0.85);
    left: 0;
  }
  .resume-overlay .gallery-container img.arrow.left:hover {
    transform: translateX(-15px) translateY(-70px) scale(0.9);
  }
  .resume-overlay .gallery-container img.arrow.disabled {
    opacity: 0.5;
  }
  .resume-overlay .gallery-container .inner-content:nth-of-type(1) h1 > span {
    color: #74ad8b;
  }
  .resume-overlay .gallery-container .inner-content:nth-of-type(2) h1 > span {
    color: #a284bc;
  }
  .resume-overlay .gallery-container .inner-content:nth-of-type(3) h1 > span {
    color: #CB3970;
  }
  .resume-overlay .gallery-container .tract-logo {
    width: 150px;
    top: 0;
    left: 20px;
    position: absolute;
  }
  .resume-overlay .gallery-container > div {
    display: flex;
  }
  .resume-overlay .gallery-container .inner-content {
    min-width: 100%;
    position: relative;
    opacity: 0;
  }
  .resume-overlay .gallery-container .inner-content .description-container {
    display: flex;
    padding: 40px;
    align-items: flex-end;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    /* (<flex-grow> | <flex-shrink> | <flex-basis>) */
  }
  .resume-overlay .gallery-container .inner-content .description-container > p, .resume-overlay .gallery-container .inner-content .description-container h1 {
    text-align: end;
    font-size: larger;
  }
  .resume-overlay .gallery-container .inner-content .description-container > h1 {
    font-weight: 300;
    font-size: xxx-large;
    padding-bottom: 20px;
    margin: 0;
  }
  .resume-overlay .gallery-container .inner-content.show {
    opacity: 1;
  }
  .resume-overlay .gallery-container .inner-content .gallery-divider {
    align-self: center;
    width: 3px;
    height: 90%;
    background: var(--primary-font-color);
  }
  .resume-overlay .gallery-container .inner-content .photo-container {
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: scale(1);
    transition-delay: 0.25s;
    scroll-snap-type: y mandatory;
  }
  .resume-overlay .gallery-container .inner-content .photo-container > *:not(p) {
    scroll-snap-align: start;
  }
  .resume-overlay .gallery-container .inner-content .photo-container:hover {
    transform: scale(1.1);
  }
  .resume-overlay .gallery-container .inner-content .photo-container > p {
    position: absolute;
    align-self: center;
    right: 50%;
    transition: 0.25s;
    transition-delay: 0.25s;
    font-size: small;
    bottom: 0;
    transform: translateX(50%);
  }
  .resume-overlay .gallery-container .inner-content .photo-container:hover ~ p, .resume-overlay .gallery-container .inner-content .photo-container:hover > p {
    opacity: 0;
  }
  .resume-overlay .gallery-container .inner-content .photo-container:hover img.three.vertical:hover,
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container:hover img.three.vertical:hover,
  .resume-overlay .gallery-container .inner-content .photo-container img.three.vertical:hover {
    transform: scale(1.2) translateX(25%);
    transition-delay: 0.5s;
    /* padding: 40px; */
  }
  .resume-overlay .gallery-container .inner-content .photo-container .single-slide-container {
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container {
    justify-content: center;
    display: flex;
    align-items: center;
    min-height: 100%;
    max-height: 100%;
    position: relative;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container > img.single.zoom {
    transform: scale(1.1);
    z-index: 4;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container img {
    cursor: pointer;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple {
    height: 100%;
    flex-basis: 0;
    display: flex;
    align-items: center;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.first {
    flex-grow: 2;
    z-index: 1;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.first img.single {
    position: absolute;
    pointer-events: none;
    transform: scale(0.8);
    left: -5px;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.first:hover > img {
    transform: scale(1.1);
    left: 130px;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.first:hover {
    z-index: 4;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.second {
    flex-grow: 2;
    z-index: 2;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.second img.single {
    position: absolute;
    transform: scale(0.9);
    left: 130px;
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.second:hover > img {
    transform: scale(1.1);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.second:hover {
    z-index: 4;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.third {
    flex-grow: 4;
    z-index: 3;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.third img.single {
    position: absolute;
    left: 290px;
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.third:hover > img {
    left: 130px;
    transform: scale(1.1);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .triple-card-container .hover-container.triple.third:hover {
    z-index: 4;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container {
    min-height: 100%;
    display: flex;
    position: relative;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(1) {
    width: 45%;
    margin: 0;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(1):hover {
    z-index: 3;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(1) img {
    position: absolute;
    transform: scale(0.9);
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(2) {
    flex-grow: 1;
    flex-basis: 0;
    margin: 0;
    display: flex;
    align-items: center;
    z-index: 2;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(2) img {
    position: absolute;
    transform: scale(0.7) translateX(-10%);
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(2):hover {
    z-index: 3;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .two-stack-container figure:nth-of-type(2):hover img {
    transform: translateX(-40%);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container {
    display: grid;
    padding: 20px;
    min-height: 100%;
    grid-gap: 20px;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: 47% 1fr;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:first-of-type {
    margin: 0;
    grid-row: 1/3;
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:first-of-type:hover img {
    transform: translateX(50%) scale(1.1);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:first-of-type img {
    pointer-events: none;
    max-width: 100%;
    max-height: 100%;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(2) {
    margin: 0;
    grid-column-start: 2;
    display: flex;
    align-items: flex-end;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(2):hover img {
    transform: translate(-50%, 50%) scale(1.7);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(2) img {
    max-width: 100%;
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(3) {
    margin: 0;
    grid-row-start: 2;
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(3):hover img {
    transform: translate(-50%, -50%) scale(1.7);
  }
  .resume-overlay .gallery-container .inner-content .photo-container .masonry-slide-container > figure:nth-of-type(3) img {
    max-width: 100%;
    pointer-events: none;
  }
  .resume-overlay .gallery-container .inner-content .photo-container img {
    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
  }
  .resume-overlay .gallery-container .inner-content .photo-container img.single {
    max-width: 90%;
    max-height: 90%;
  }
  .resume-overlay .gallery-container .inner-content .photo-container img.fit-width {
    max-width: 100%;
  }
  .resume-overlay .gallery-container .inner-content .photo-container img.fit-height {
    max-height: 100%;
  }
  .resume-overlay .gallery-container .inner-content > p {
    position: absolute;
    align-self: center;
    right: 30%;
    transition: 0.25s;
    font-size: small;
    bottom: 0;
    transform: translateX(50%);
  }
  .resume-overlay .gallery-container .photo-container {
    flex-grow: 3;
    flex-basis: 0;
  }
}
@media screen and (min-width: 768px) and (min-height: 338px) {
  .resume-overlay .gallery-container {
    transform: scale(0.65);
    opacity: 0;
  }
  .resume-overlay .gallery-container.show {
    transform: scale(0.7);
    opacity: 1;
  }
  .resume-overlay .gallery-container img.close-popup {
    width: 35px;
  }
  .resume-overlay .gallery-container img.close-popup .description-container {
    padding: 40px;
  }
  .resume-overlay .gallery-container img.close-popup .description-container > p {
    font-size: medium;
  }
}
@media screen and (min-width: 992px) and (min-height: 496px) {
  .resume-overlay .gallery-container {
    transform: scale(0.85);
    opacity: 0;
  }
  .resume-overlay .gallery-container.show {
    transform: scale(0.9);
    opacity: 1;
  }
  .resume-overlay .gallery-container .inner-content .description-container {
    padding: 30px;
  }
  .resume-overlay .gallery-container .inner-content .description-container > p {
    font-size: medium;
  }
  .resume-overlay .gallery-container .inner-content .description-container > h1 {
    font-size: xx-large;
  }
  .resume-overlay .gallery-container img.close-popup {
    width: 35px;
  }
  .resume-overlay .gallery-container .description-container {
    padding: 30px;
  }
  .resume-overlay .gallery-container img.arrow.right {
    transform: translateX(25px) translateY(-70px) scale(0.5);
  }
  .resume-overlay .gallery-container img.arrow.right:hover {
    transform: translateX(25px) translateY(-70px) scale(0.55);
  }
  .resume-overlay .gallery-container img.arrow.left {
    transform: translateX(-25px) translateY(-70px) scale(0.5);
  }
  .resume-overlay .gallery-container img.arrow.left:hover {
    transform: translateX(-25px) translateY(-70px) scale(0.55);
  }
  .resume-overlay .gallery-container img.arrow.disabled {
    opacity: 0.5;
  }
}
@media screen and (min-width: 1200px) and (min-height: 600px) {
  .resume-overlay .gallery-container {
    transform: scale(1);
    opacity: 0;
  }
  .resume-overlay .gallery-container.show {
    transform: scale(1.1);
    opacity: 1;
  }
  .resume-overlay .gallery-container .inner-content .description-container {
    padding: 30px;
  }
  .resume-overlay .gallery-container .inner-content .description-container > p {
    font-size: medium;
  }
  .resume-overlay .gallery-container .inner-content .description-container > h1 {
    font-size: xx-large;
  }
  .resume-overlay .gallery-container img.close-popup {
    width: 140px;
    transform: translateY(-60px) translateX(60px) scale(0.25);
  }
  .resume-overlay .gallery-container img.close-popup:hover {
    transform: translateY(-60px) translateX(60px) scale(0.3);
  }
  .resume-overlay .gallery-container img.close-popup .description-container {
    padding: 30px;
  }
}
@media screen and (min-width: 1400px) and (min-height: 700px) {
  .resume-overlay .gallery-container {
    transform: scale(1.2);
    opacity: 0;
  }
  .resume-overlay .gallery-container.show {
    transform: scale(1.3);
    opacity: 1;
  }
  .resume-overlay .gallery-container .inner-content .description-container {
    padding: 30px;
  }
  .resume-overlay .gallery-container .inner-content .description-container > p {
    font-size: medium;
  }
  .resume-overlay .gallery-container .inner-content .description-container > h1 {
    font-size: xx-large;
  }
  .resume-overlay .gallery-container img.arrow {
    margin: 0;
    z-index: 2;
    cursor: pointer;
  }
  .resume-overlay .gallery-container img.arrow.right {
    position: absolute;
    top: 50%;
    transform: translateX(25px) translateY(-70px) scale(0.5);
    right: 0;
  }
  .resume-overlay .gallery-container img.arrow.right:hover {
    transform: translateX(25px) translateY(-70px) scale(0.6);
  }
  .resume-overlay .gallery-container img.arrow.left {
    position: absolute;
    top: 50%;
    transform: translateX(-25px) translateY(-70px) scale(0.5);
    left: 0;
  }
  .resume-overlay .gallery-container img.arrow.left:hover {
    transform: translateX(-25px) translateY(-70px) scale(0.6);
  }
  .resume-overlay .gallery-container img.arrow.disabled {
    opacity: 0.5;
  }
}
@media screen and (min-width: 1700px) and (min-height: 850px) {
  .resume-overlay .gallery-container {
    transform: scale(1.5);
    opacity: 0;
  }
  .resume-overlay .gallery-container.show {
    transform: scale(1.6);
    opacity: 1;
  }
  .resume-overlay .gallery-container .inner-content .description-container {
    padding: 30px;
  }
  .resume-overlay .gallery-container .inner-content .description-container > p {
    font-size: medium;
  }
  .resume-overlay .gallery-container .inner-content .description-container > h1 {
    font-size: xx-large;
  }
}

@media screen and (min-width: 0px) {
  .resume-section .resume-block:nth-of-type(2):hover figure.message-bubble {
    opacity: 1;
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(0.85);
  }
  .resume-section .resume-block:nth-of-type(2) .message-bubble {
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(0.8);
  }
}
@media screen and (min-width: 576px) {
  .resume-section .resume-block:nth-of-type(2):hover figure.message-bubble {
    opacity: 1;
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(0.98);
  }
  .resume-section .resume-block:nth-of-type(2) .message-bubble {
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(0.95);
  }
}
@media screen and (min-width: 992px) {
  .resume-section .resume-block:nth-of-type(2):hover figure.message-bubble {
    opacity: 1;
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(1.1);
  }
  .resume-section .resume-block:nth-of-type(2) .message-bubble {
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px));
  }
}
.resume-section a.resume-block {
  text-decoration: unset;
  color: unset;
}
.resume-section .resume-block {
  padding: 2rem;
  border-radius: 10px;
  transition: 0.5s;
  cursor: pointer;
}
.resume-section .resume-block:hover {
  transition-delay: 0;
  background: white;
  box-shadow: 0px 0px 30px 0px rgba(41, 255, 255, 0.2);
}
.resume-section .resume-block:nth-of-type(2) figure.message-bubble {
  position: absolute;
  transition: 0.5s;
  transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px));
  /* bottom: 0; */
  height: 154px;
  right: 0;
  width: 260px;
  display: flex;
  opacity: 0.7;
}
@media screen and (min-width: 0px) {
  .resume-section .resume-block:nth-of-type(2) figure.message-bubble {
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px)) scale(0.8);
  }
}
@media screen and (min-width: 992px) {
  .resume-section .resume-block:nth-of-type(2) figure.message-bubble {
    transform: translateX(calc(30px - 5%)) translateY(calc(-100% - 15px));
  }
}
.resume-section .resume-block:nth-of-type(2) figure.message-bubble p {
  position: absolute;
  inset: 30px 30px 45px 30px;
  text-align: center;
  align-self: center;
  margin: 0;
  display: inline-block;
  line-height: 21.5px;
  padding: 18px;
  /* right: 0; */
}

/* PROJECTS page */
@keyframes shimmy {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 1em);
  }
}
#youtubeilist-demo-gif {
  align-self: center;
  width: 80%;
  padding: 3%;
  max-width: 600px;
  opacity: 1;
  transition: all 1s ease 3500ms;
  color: white;
}

.fa-arrow-down {
  opacity: 0;
  height: 2em;
  display: flex;
  animation: shimmy 2s infinite;
  animation-timing-function: cubic-bezier(0.49, 0.02, 0.41, 0.99);
  animation-direction: alternate;
}

section.scroll-down-disclaimer {
  margin: 2em 0 2em 0;
  opacity: 0;
  transition: 2s;
  /* color: white; */
}

#hidden-nav {
  height: 0;
  transition: 1s;
}

#hidden-nav .project-child > a {
  visibility: hidden;
  transition: 0.7s;
  transform: scaleY(0);
}

span.text-primary {
  opacity: 1;
}

h1.mb-0 {
  opacity: 0;
}

/* WEBAPPS page */
.development-container {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}

.development-tile {
  display: flex;
  flex-direction: column;
  min-width: 15em;
  max-width: 15em;
  min-height: 19em;
  max-height: 19em;
}

.development-tile > figure {
  /* min-height: 7.5em;
  max-height: 7.5em; */
  min-width: inherit;
  margin: 0 0 1rem;
}

section#project2, section#project3 {
  max-height: auto;
}

section#project2 h4, section#project3 h4 {
  margin: 0 0 1em 0;
}

#project2 > div.resume-section-content > p.mb-4 {
  opacity: 0;
}

/*development tile Image sizes */
.development-tile > figure, .development-tile > figure > a > img {
  /* height: 100%; */
  width: 100%;
  transition: 0.7s;
}

.development-tile > figure > a {
  width: 100%;
}

/* Anchors within the paragraph */
.development-tile p a {
  color: lightgrey;
}

.development-tile p a:hover {
  color: white;
}

.development-tile > p {
  margin: 0;
}

.development-tile > figure > a > img:hover {
  filter: drop-shadow(0px 0px 3px rgb(171, 171, 171));
  transition: 0.5s;
  transform: scale(1.07);
}

.development-container {
  opacity: 0;
  transition: 0.7s;
  position: relative;
  top: 4em;
}

/* The grid system */
section.grid {
  display: grid;
  grid-gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(max(250px, 25%), 1fr));
  grid-auto-rows: 5px;
  position: relative;
  z-index: 1;
}

.grid > .item {
  /* margin:0.3em; */
  /* background: white; */
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.34);
  /* opacity: 0; */
  /* transform: translateY(5em); */
}

/* Fonts */
@font-face {
  font-family: "timeburnerregular";
  src: url("../assets/fonts/timeburnernormal-webfont.woff2") format("woff2"), url("../assets/fonts/timeburnernormal-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "sairaregular";
  src: url("../assets/fonts/saira-regular-webfont.woff2") format("woff2"), url("../assets/fonts/saira-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* The grid system */
section.grid {
  display: grid;
  grid-gap: 7px;
  grid-template-columns: repeat(auto-fill, minmax(max(250px, 25%), 1fr));
  grid-auto-rows: 5px;
  position: relative;
  z-index: 1;
}

.grid > .item {
  /* margin:0.3em; */
  background: white;
  overflow: hidden;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: translateY(5em);
}

.grid > .item.img {
  position: relative;
  z-index: 2;
}

.item.img > .content {
  position: relative;
  z-index: 3;
  /* height: 100%; */
}

.item.text {
  display: flex;
  align-items: center;
}

.item.text > .content > .disc {
  padding: 2em;
}

.item.img > .content > img {
  width: 100%;
  z-index: 4;
  position: relative;
  /* max-height: 200px; */
}

/* .overlay span>img{
    height: 1em;
} */
.content .overlay {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, 0.2117647059);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transition: 0.5s;
  display: flex;
  flex-flow: column;
  padding: 1em;
  color: white;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translateX(100%);
}

.content img:hover ~ .overlay, .content .overlay:hover {
  transition: 0.5s;
  transform: translateX(0%);
}

.disc > p, .overlay span > img {
  margin: 0;
  color: #E6E6E6;
}

.overlay > p {
  margin: 0;
  color: #ffffff;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

/* Boat Cruise Text */
.grid #text1 {
  background: #e49292;
}

/* Hot dog text */
.grid #text2 {
  background: #D9D9D9;
}

/* H5 can be edit on JS under interests. */
.grid #text2 .disc > p {
  color: #735C5C;
}

.grid #text3 {
  background: #e49292;
}

/* H5 can be edit on JS under interests. */
.grid #text3 .disc > p {
  color: "#E6E6E6";
}

/* Scrollbar theme */
body::-webkit-scrollbar {
  width: 1em;
  background: black;
}

body::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(213, 228, 230, 0.29);
}

body.resize-animation-stopper *:not(section#gradient-bg,
.rotation-warning.show > img,
.gallery-container) {
  animation: none !important;
  transition: none !important;
  transition-delay: none !important;
}
body.no-scroll {
  overflow: hidden;
}

/* Skills */
#skills .subheading.mb-3 {
  margin-top: 1rem;
}

@property --c {
  syntax: "<color>";
  inherits: false;
  initial-value: rgb(230, 100, 101);
}
@keyframes changeGradient {
  0% {
    --c: rgb(127 137 255);
  }
  33% {
    --c:blue;
  }
  66% {
    --c: rgb(0, 217, 232); /* Cyan */
  }
  100% {
    --c: rgb(232, 0, 151);
  }
}
@keyframes noGradient {
  0% {
    --c: rgb(245, 247, 244);
  }
  100% {
    --c: rgb(245, 247, 244);
  }
}
section#gradient-bg {
  position: fixed;
  width: 100%;
  min-height: 100vh;
  inset: 0;
  animation: 17s linear infinite alternate changeGradient;
  transition: opacity 0.5s;
  transition-delay: 0s, 1s;
  z-index: 1;
  opacity: 0;
}
section#gradient-bg.show {
  opacity: 1;
  background: conic-gradient(at top left, rgb(230, 100, 101) 0deg, var(--c) 270deg);
}
section#gradient-bg.default {
  background: conic-gradient(at top left, rgb(230, 100, 101) 0deg, var(--c) 270deg);
}
section#gradient-bg.experience {
  z-index: 3;
}
section#gradient-bg.first {
  transition-delay: 0s, 0s;
  background: conic-gradient(at top left, rgb(102, 230, 100) 0deg, var(--c) 270deg);
}
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
  section#gradient-bg.first {
    transition-delay: 0s, 0s;
    background: conic-gradient(at top left, rgb(102, 230, 100) 0deg, var(--c) 270deg);
  }
  section#gradient-bg.default {
    background: conic-gradient(at top left, rgb(102, 230, 100) 0deg, var(--c) 270deg);
  }
  section#gradient-bg.show {
    opacity: 1;
    background: conic-gradient(at top left, rgb(102, 230, 100) 0deg, var(--c) 270deg);
  }
}

#copyright {
  position: fixed;
  top: 95%;
  left: 50%;
  transform: translate(-50%);
}

#sideNav.hide {
  display: none;
}/*# sourceMappingURL=custom.css.map */