:root {
  --h-h6: clamp(0.72rem, 0.21vi + 0.68rem, 0.84rem);
  --h-h5: clamp(0.9rem, 0.38vi + 0.82rem, 1.13rem);
  --h-h4: clamp(1.13rem, 0.63vi + 1rem, 1.5rem);
  --h-h3: clamp(1.41rem, 0.99vi + 1.21rem, 2rem);
  --h-h2: clamp(1.76rem, 1.51vi + 1.46rem, 2.67rem);
  --h-h1: clamp(2.2rem, 2.26vi + 1.75rem, 3.55rem);

  --t-s: clamp(0.83rem, 0.02vi + 0.83rem, 0.84rem);
  --t-m: clamp(1rem, 0.21vi + 0.96rem, 1.13rem);
  --t-l: clamp(1.2rem, 0.5vi + 1.1rem, 1.5rem);
}
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 16px;
}
/* Headings */
h1 {
  font-size: var(--h-h1);
}
h2 {
  font-size: var(--h-h2);
}
h3 {
  font-size: var(--h-h3);
}
h4 {
  font-size: var(--h-h4);
}
h5 {
  font-size: var(--h-h5);
}
h6 {
  font-size: var(--h-h6);
}

/* Base text elements */
p,
span,
li,
a,
label,
small,
strong,
em,
blockquote,
figcaption {
  font-size: var(--t-m);
}
a {
  text-decoration: none;
  color: inherit;
}
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f96f6f, #b97dde, #ef73ba);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
}
.wrapper {
  flex: 1;
}
.brandLogo {
  width: 7rem;
  object-fit: contain;
  cursor: pointer;
}
#hero {
  color: white;
}
#header {
  position: absolute;
  top: 0;
}
button {
  height: fit-content;
  padding: 1rem 2rem;
  border-radius: 10rem;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  font-weight: 900;
  &[type="glass"] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(5px);
    &:hover {
      background: rgba(255, 255, 255, 0.4);
    }
  }
  &:hover {
    transform: translateY(-0.25rem);
  }
  &.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    &:hover {
      background: rgba(255, 255, 255, 0.4);
    }
  }
}
#stickyOne {
  background-color: #fe6a6e;
  color: white;
  width: 20rem !important;
  border-radius: 1rem;
  position: relative;
  font-size: 2rem;
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
  &:hover{
    transform: rotate(-10deg);
  }

  #vStackDemo {
    background-color: white;
    border-radius: 1rem;
    .vStackDemoSquare {
      width: 100%;
      height: 2rem;
      background-color: #eeeeee;
      border-radius: 1rem;
    }
  }
}
#github{
  width: 2rem;
  filter: brightness(0) saturate(100%) invert(81%) sepia(93%) saturate(4096%) hue-rotate(191deg) brightness(131%) contrast(100%);
  transition: transform .3s ease;
  &:hover {
    transform: translateY(-0.25rem);
  }
}
#stickyTwo {
  background-color: #fde267;
  color: black;
  width: 20rem !important;
  border-radius: 1rem;
  position: relative;
  font-size: 2rem;
  transform: rotate(3deg);
  transition: transform 0.3s ease;
  &:hover{
    transform: rotate(10deg);
  }
  #hStackDemo {
    background-color: #e5f0ff;
    border-radius: 1rem;
    .hStackDemoSquare {
      width: 3rem;
      height: 3rem;
      background-color: #cfe6ff;
      border-radius: 1rem;
    }
  }
}