body{
    
    font-size:18px;
}
:root {
  --shiny-cta-bg: #000000;
  --shiny-cta-bg-subtle: #1a1818;
  --shiny-cta-fg: #ffffff;
  --shiny-cta-highlight: blue;
  --shiny-cta-highlight-subtle: #8484ff;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}

@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.25rem 2.5rem;
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 360px;
  color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))
      padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

  &::before,
  &::after,
  span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }

  &:active {
    translate: 0 1px;
  }
}

/* Dots pattern */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.shiny-cta span {
  z-index: 1;

  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
  }
}

/* Animate */
.shiny-cta {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;

  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }

  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);

  &,
  &::before,
  &::after {
    animation-play-state: running;
  }

  span::before {
    opacity: 1;
  }
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}
@media (min-width: 576px) {
    .position-sm-static {
      position: static !important;
    }
    .position-sm-relative {
      position: relative !important;
    }
    .position-sm-absolute {
      position: absolute !important;
    }
    .position-sm-fixed {
      position: fixed !important;
    }
    .position-sm-sticky {
      position: sticky !important;
    }
  }
  
  @media (min-width: 768px) {
    .position-md-static {
      position: static !important;
    }
    .position-md-relative {
      position: relative !important;
    }
    .position-md-absolute {
      position: absolute !important;
    }
    .position-md-fixed {
      position: fixed !important;
    }
    .position-md-sticky {
      position: sticky !important;
    }
  }
  
  @media (min-width: 992px) {
    .position-lg-static {
      position: static !important;
    }
    .position-lg-relative {
      position: relative !important;
    }
    .position-lg-absolute {
      position: absolute !important;
    }
    .position-lg-fixed {
      position: fixed !important;
    }
    .position-lg-sticky {
      position: sticky !important;
    }
  }
  
  @media (min-width: 1200px) {
    .position-xl-static {
      position: static !important;
    }
    .position-xl-relative {
      position: relative !important;
    }
    .position-xl-absolute {
      position: absolute !important;
    }
    .position-xl-fixed {
      position: fixed !important;
    }
    .position-xl-sticky {
      position: sticky !important;
    }
  }
.bg{
    position:fixed;
    top:0;
    left:0;
    width:calc(100%);
    height:100vh;
    background-image:url('../images/black-grunge-brick-wall-background-sm.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    
}
.blend{
    background: radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(67,9,121,1) 75%, rgba(0,0,0,1) 100%);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.spotlight{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
    mix-blend-mode: overlay;
   pointer-events: none;
}

.header-text {
    color: #c8c2bd;
    font-size: 3em;
    line-height: 1.0625;
    font-weight: 600;
    letter-spacing: -0.009em;
    margin: 0;
}

.glow-filter{
    position: relative;
    display: inline-block;
    scale: 1;
    transition:scale 1s ease-out;
    /*animation: onloadscale 1s ease-out forwards;*/
}
.glow-filter.active{
  scale:1.02;
}

.glow-filter::before{
    content: attr(data-text);
    position: absolute;
    pointer-events: none;
    color:  #fffaf6;
    background: linear-gradient(0deg, #dfe5ee 0%, #fffaf6 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: url(#glow-4);
    -moz-filter: url(#glow-4);
    -webkit-filter: url(#glow-4);

    opacity: 0;
   /* animation: onloadopacity 1s ease-out forwards;*/
   transition:opacity 1s ease-out;
}
.glow-filter.active::before{
    opacity: 1;
}

@keyframes onloadscale {
    24% { scale: 1; }
    100% { scale: 1.02; }
}
@keyframes onloadopacity {
    24% { opacity: 0; }
    100% { opacity: 1; }
}
*{
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
}


.wrapper{
    
    display:flex;
    flex-direction: row;
    gap:5em;
    padding-top: 2em;
    z-index: 1000000000;
    position: relative;
    color:#fff;
    margin-bottom:3em;
}
.left{
    
    flex:0.4;
    padding-bottom:2em
}
.right{
    flex:0.6;
    color:#fff;
}
p{
    line-height:1.3;
    color:rgb(148, 163, 184);
    text-shadow: rgba(0, 0, 0, 0.9) 6px 2px 7px;
    text-wrap: pretty;
}
nav .indicator{
    width:1em;
    height:0.5px;
    background-color:#fff;
    display: inline-block;
    opacity: 0.5;
    transition: all 0.5s ease-in-out;
}
nav li{
    list-style: none;
    
}
nav ul{
    padding-left: 0;
}
li{
    text-wrap: pretty;

}
nav a{
    display:flex;
    flex-direction: row;
    gap:0.5em;
    align-items: center;
    color:#fff;
    text-decoration: none;
    font-size:1em;
    font-weight: 500;
}
nav a:hover .indicator{
    width:3em;
    height:0.1px;
    opacity: 1;
}
nav a.active .indicator{
  width:3em;
  height:0.1px;
  opacity: 1;
}
.crd{
    margin:0.25em;
    padding: 0.5em;
    border-radius: 0.5em;
    margin-bottom: 1em;
   
    background-color: rgba(30,41,59,0.4);
    transition:all 0.5s ease-in-out;
    color:rgb(148, 163, 184);
    opacity:0.9;
    border:1px solid rgba(148, 163, 184,0.2);
}
.crd:hover{
   /* background-color: rgba(71, 98, 124, 0.1);*/
   background-color: rgba(30,41,59,.6);
    backdrop-filter: blur(10px);
    opacity: 1;
}
.sectionHeader{
   
    font-size:1.5em;
    font-weight: 500;
    color:rgb(148, 163, 184);
    margin-bottom: 0.5em;
    text-shadow: rgba(0, 0, 0, 0.9) 6px 2px 7px;
}
section{
    margin-bottom: 2em;
}
.skill{
    display:inline-flex;
    padding:0.25em 0.5em;
    border-radius:0.5em;
    background-color:rgba(67,9,121,0.75);
    margin:0.15em;
}


/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;

  }
  
  ::-webkit-scrollbar-track {
    background-color: #000;
  }
  
  ::-webkit-scrollbar-thumb {
    background: radial-gradient(circle, rgba(0,212,255,0.5) 0%, rgba(67,9,121,0.5) 100%);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;

  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: radial-gradient(circle, rgba(0,212,255,1) 0%, rgba(67,9,121,1) 100%);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
  }
#returnToTop{
    margin: 1em;
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
    background-color: rgba(67, 9, 121, 0.9);
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 10px;
    cursor: pointer;
}
.project-thumbnail{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: 0.5em;
}
#creatorsVideo{
    display:none;
    background-color:rgba(0,0,0,0.9);
    z-index:100000000000;
}
#creatorsVideo.active{
    display:flex;
}
.closer{
    position: absolute;
    top:1em;
    right: 1em;
    font-size:3em;
    cursor: pointer;
    color: #fff;
    background-color: rgba(67, 9, 121, 0.9);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 10px;
    width:1em;
    height:1em;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height:0.75;
    cursor:pointer;
}
.closer span{
    position:relative;
    top:-0.05em
}
.anchor:first-of-type{
  scroll-margin-top: 3em;
}

.btn {
  
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
  background-color: rgba(67, 9, 121, 0.9);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.9) 0px 0px 10px;
  cursor: pointer;
}
p strong{
    color:#fff;
}
.social-link img{
    width:2em;
    height:2em;
    cursor:pointer;

}
.social-link{
  margin-left:0.5em;
}
.social-link:first-of-type {
  margin-left: 0;
}
.social-link img:hover{
    filter: drop-shadow(0px 0px 10px rgba(0,212,255,0.9));
}
.profile-image{
  width:5em;
  height: 5em;
  border-radius:50%;
  margin:0 auto;
  overflow:hidden;
  position:relative
}
.profile-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scaleX(-1);

}