/* for demo */
.image-text {
    background-image: url("https://images.unsplash.com/photo-1701990003443-2c552816e468?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM3NzUyNzJ8&ixlib=rb-4.0.3&q=80&w=800");
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-size: var(--fs-900);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
  }
  
  .gradient-text {
    background-image: linear-gradient(90deg, red, blue);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-size: var(--fs-900);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
  }
  
  .page-title {
    text-shadow: 2px 2px 0 var(--clr-accent-400), 4px 4px 0 var(--clr-secondary-400), 6px 6px 0 var(--clr-primary-400);
  }
  
  hr {
    --size: 2px;
    border: 0;
    height: var(--size);
    background: white;
    border-radius: 100vw;
    box-shadow: 0 calc(var(--size)* 2) 0 var(--clr-accent-400), 0 8px 0 var(--clr-secondary-400), 0 12px 0 var(--clr-primary-400);
  }
  
  .btn {
    display: inline-block;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--clr-primary-500);
    text-decoration: none;
    background: white;
    padding: 0.75em 2.5em;
    border: 4px solid transparent;
    outline: 3px solid currentColor;
    outline-offset: -6px;
    transition: 500ms;
  }
  
  .btn:hover,
  .btn:focus {
    color: white;
    outline-offset: 0px;
    background: var(--clr-primary-400);
    border-color: var(--clr-primary-300);
    box-shadow: inset 0 0 0 5px var(--clr-primary-400), inset 0 0 0 10px var(--clr-primary-500);
  }
  
  .page-title span span {
    text-shadow: 0 0 0;
  }
  
  .fancy-link-1 {
    text-decoration: none;
    background-image: linear-gradient(90deg, red, blue);
    background-size: 0% 3px;
    background-position: left 1.4em;
    background-repeat: no-repeat;
    -webkit-padding-after: 0.25em;
            padding-block-end: 0.25em;
    transition: color 500ms, background-size 500ms;
  }
  
  .fancy-link-1:hover,
  .fancy-link-1:focus {
    color: white;
    background-size: 100% 3px;
  }
  
  .fancy-link-2 {
    text-decoration: none;
    background-image: linear-gradient(90deg, red, blue 50%, currentColor 50%);
    background-size: 200% 3px;
    background-position: right 1.4em;
    /* agar in line bala ro bardari style khat az bala be paeen */
    /* background-position: right 1.4em; */
    background-repeat: no-repeat;
    -webkit-padding-after: 0.25em;
            padding-block-end: 0.25em;
    transition: color 500ms, background-position 500ms;
  }
  
  .fancy-link-2:hover,
  .fancy-link-2:focus {
    color: white;
    background-position: left 1.4em;
  }
  
  /* general styling */
  :root {
    --font-family: system-ui;
    --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
    --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
    --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
    --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
    --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
    --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
    --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
    --clr-primary-300: hsl(219, 76%, 55%);
    --clr-primary-400: hsl(219, 76%, 40%);
    --clr-primary-500: hsl(219, 76%, 25%);
    --clr-secondary-300: hsl(269, 75%, 55%);
    --clr-secondary-400: hsl(269, 75%, 40%);
    --clr-secondary-500: hsl(269, 75%, 25%);
    --clr-accent-300: hsl(358, 72%, 65%);
    --clr-accent-400: hsl(358, 72%, 50%);
    --clr-accent-500: hsl(358, 72%, 35%);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    color-scheme: dark;
  }
  
  body {
    margin: 0;
    color: #ddd;
    font-family: var(--font-family);
    font-size: var(--fs-400);
    line-height: 1.6;
    padding-block: 6rem;
  }
  
  .wrapper {
    width: min(50rem, 100% - 2rem);
    margin-inline: auto;
  }
  
  .page-title {
    color: white;
    text-align: center;
    font-size: var(--fs-900);
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 900;
  }
  
  .page-title > span {
    position: relative;
  }
  
  .page-title > span > span {
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    bottom: 0.725em;
    right: -7ch;
    rotate: -8deg;
    text-transform: none;
    font-weight: 300;
    font-size: 0.325em;
    font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
  }
  
  .section-title {
    font-size: var(--fs-800);
    line-height: 1.1;
  }
  
  .visually-hidden {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }