:root {
    --black: #121212;
    --gray-100: #1E1E1E;
    --gray-200: #B0A8A8;
    --gray-300: #666666; /*borders, dividers, and inactive states*/
    --white: #EAEAEA;
    --size-16: 16px;
    --spacing-half: 0.5px;
    
    --stripe-color: #fff;
    --bg: var(--stripe-color);
    --maincolor: var(--bg);
    
    --primary-bg: var(--black);
    --secondary-bg: var(--gray-100);
    --primary-cta: var(--orange);
    --secondary-cta: var();
    --primary-text: var(--white);
    --secondary-text: var(--gray-200);
    --icon: var(--yellow);
    --link-text: var(--red-200);
    --divider: var(--gray-300);
}

html {
    color-scheme: normal;
}

body {
    font-family: "JetBrains Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .01) 25%, rgba(0, 0, 0, .005) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02) 76%, transparent 77%, transparent),
			          linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .005) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .02) 75%, rgba(0, 0, 0, .02) 76%, transparent 77%, transparent);
    height:100%;
    background-size:50px 50px;
}

/* */
.cursor {
	pointer-events: none; /* Needed to prevent our cursor from becoming the unintended target of our mouse events */
	position: fixed; /* Required for setting inset values */
	height: 8px;
	width: 8px;
	border-radius: 32px;
	background-color: rgba(0, 0, 0, 0.2);
	transform: translate(-50%, -50%); /* Centers circle to cursor location */
	transform-origin: top left;
	z-index: 9999999;
}
.pressable {
	scale: 4.5;
	background-color: rgba(0, 0, 0, 0.4);
}


/* hero bg rays */
@property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0.1;
  }
}
@keyframes smoothBg {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}
.hero {
  height: 100%;
  min-height: 70vh;
  --stripes: repeating-linear-gradient(
    100deg,
    var(--stripe-color) 0%,
    var(--stripe-color) 7%,
    transparent 10%,
    transparent 12%,
    var(--stripe-color) 16%
  );
  --rainbow: repeating-linear-gradient(
    100deg,
    #60a5fa 10%,
    #e879f9 15%,
    #60a5fa 20%,
    #5eead4 25%,
    #60a5fa 30%
  );
  background-image: var(--stripes), var(--rainbow);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(100%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
&::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: smoothBg 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
  }
}
.content {
  position: absolute;
  inset: 0;
  place-content: center;
  mix-blend-mode: multiply;
  -webbkit-mix-blend-mode: multiply;
}
.h1--scalingSize::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  text-shadow: 0 0 1px #ffffff;
  -webkit-text-fill-color: transparent;
  -webkit-mask: linear-gradient(#000 0 0) luminance;
  mask: linear-gradient(#000 0 0) luminance, alpha;
  backdrop-filter: blur(19px) brightness(12.5);
  -webkit-text-stroke: 1px white;
  z-index: 999999999;
  pointer-events: none;
}

/* Typewriter effect 1 */
@keyframes typing {
  0.0000%, 27.3488% { content: ""; }
  1.1395%, 26.2093% { content: "d"; }
  2.2791%, 25.0698% { content: "de"; }
  3.4186%, 23.9302% { content: "des"; }
  4.5581%, 22.7907% { content: "desi"; }
  5.6977%, 21.6512% { content: "desig"; }
  6.8372%, 20.5116% { content: "design"; }
  7.9767%, 19.3721% { content: "designe"; }
  9.1163%, 18.2326% { content: "designer"; }

  30.7674%, 51.2791% { content: ""; }
  31.9070%, 50.1395% { content: "I"; }
  33.0465%, 49.0000% { content: "IN"; }
  34.1860%, 47.8605% { content: "INF"; }
  35.3256%, 46.7209% { content: "INFJ"; }
  36.4651%, 45.5814% { content: "INFJ-"; }
  37.6047%, 44.4419% { content: "INFJ-T"; }

  54.6977%, 75.2093% { content: ""; }
  55.8372%, 74.0698% { content: "r"; }
  56.9767%, 72.9302% { content: "re"; }
  58.1163%, 71.7907% { content: "rea"; }
  59.2558%, 70.6512% { content: "read"; }
  60.3953%, 69.5116% { content: "reade"; }
  61.5349%, 68.3721% { content: "reader"; }

  78.6279%, 96.8605% { content: ""; }
  79.7674%, 95.7209% { content: "h"; }
  80.9070%, 94.5814% { content: "hu"; }
  82.0465%, 93.4419% { content: "hum"; }
  83.1860%, 92.3023% { content: "huma"; }
  84.3256%, 91.1628% { content: "human"; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.typewriter {
  --caret: currentcolor;
}
.typewriter::before {
  content: "";
  animation: typing 13.5s infinite;
}
.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}
.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}
@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }
  @keyframes sequencePopup {
    0%, 100% { content: "designer"; }
    25% { content: "INFJ-T"; }
    50% { content: "reader"; }
    75% { content: "human"; }
  }
  .typewriter::before {
    content: "designer";
    animation: sequencePopup 12s linear infinite;
  }
}

/* for splash screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #555555;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-size: 2rem;
    animation: fadeOut 1s ease-in-out forwards;
    animation-delay: 1s;
}
@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* image ribbon */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #3498db;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-align: center;
}
/* top right*/
.ribbon-top-right {
  top: -10px;
  right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}
.ribbon-box {
    position: relative;
}

/* for sticky notes */
.note {
  list-style:none;
  float:left;
}
.sticky-note {
  text-decoration:none;
  background:#ffc; /*cfc*/
  display:block;
  /*height:10em;
  width:10em;*/
  padding:1em;
}

/* rotate icons */
.hvr-rotate {
  transition: transform 0.3s ease;
  display: inline-block;
}

.hover-group:hover .hvr-rotate {
  transform: rotate(-12deg);
}

/* button shadow */
.hvr-shadow {
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.hvr-shadow:hover {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}


/* zoom image */
.img-wrapper {
  display: inline-block;
}
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.img-wrapper:hover .zoom-img {
  transform: scale(1.03);
}

/* before vs after */
.comparisonSection {
  position: relative;
  padding-bottom: 56.25%; /* to maintain aspect ratio (responsive!) */
}
.comparisonImage {
  width: 100%;
  height: 100%;
}
.afterImage {
  position: absolute;
  overflow: hidden;
  top: 0;
  transform: translate(100%, 0px);
}
.afterImage img {
  transform: translate(-100%, 0px);
}
.comparisonImage img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}



/* other work */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.image-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .modal-dialog {
      margin: 0;
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 100%;
      border-radius: 1rem 1rem 0 0;
    }
    .modal-content {
      border-radius: 1rem 1rem 0 0;
    }
}

/* Wider modal on desktop */
@media (min-width: 992px) {
  .custom-width {
    max-width: 900px;
  }
}