:root {
  --website-hover: #ffe60040;
  --website: #ffe500;
  --bg: black;
  /* --bg: #070602; */
}

.shadow-color {
  box-shadow: 0 0 30px -5px var(--website);
}

.page-width {
  max-width: 1600px;
  margin: auto;
}

/*  */
/* circle line animate */
/*  */

.circle_line {
  position: relative;
}
.circle_line::before {
  content: "";
  position: absolute;
  height: 105%;
  width: 101%;
  background-image: conic-gradient(
    from var(--angle),
    transparent 50%,
    var(--website)
  );
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 1px;
  border-radius: 999px;
  animation: 3s spin linear infinite;
}
@keyframes spin {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}
/*  */
/*  Under Line */
/*  */
.under-Line span.u_l {
  position: relative;
  display: inline-flex;
}
.under-Line span.u_l::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  height: 2px;
  width: 0;
  transition: 2s;
}
.under-Line.line-visible span.u_l::before {
  width: 100%;
}

/*  */
/* before ass css */
/*  */
/* end of css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
  .aspect-\[9\/16\] {
    aspect-ratio: 9 / 16;
  }
  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --angleScreen {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --angleScreenTwo {
  syntax: "<angle>";
  initial-value: 360deg;
  inherits: false;
}