@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'TheYearofHandicrafts';
  src: url('/fonts/TheYearofHandicrafts-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

  html, body {
    transition: background-color 0.2s ease-in-out; /* smooth fade */
    font-family: 'TheYearofHandicrafts' !important;
    background-color: #F3F3EF;
    min-height: 100vh;
    padding: 0;
    margin: 0;
  }
  

  .glass{
    background-color: rgba(255, 255, 255, 0.1);
  }
  .glass-top{
    background-color: rgba(0, 0, 0, 0.1);
  }
  .glass-border{
    padding: 2px;
    background: conic-gradient(
    from 45deg,
    #FFFFFF 0deg, 
    #000000 90deg, 
    #FFFFFF 180deg, 
    #000000 270deg, 
    #FFFFFF 360deg
  );
  }



  .gradient-border {
    position: relative;
    padding: 1rem 2rem;
    border-radius: 16px;
    color: #333;
  }
  
  .gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px; /* border thickness */
    background: conic-gradient(
      from 0deg,
      var(--color-a) 0deg 25deg,   /* top-left corner */
      var(--color-b) 25deg 205deg, /* sides */
      var(--color-a) 205deg 230deg,/* bottom-right corner */
      var(--color-b) 230deg 360deg /* rest */
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center; /* moves arrow inward */
    background-size: 1rem;
  }