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


:root {
  --first-color: #1e90ff;
  --second-color: #ffffff;
  --first-color-light: #f2f2f2;
  --color-zero: #c0b1c4;
  --color-one: #f3a48e;
  --color-two: #f7b67d;
  --color-three: #ffe5a0;
  --color-four: #91c7ba;
  --color-five: #a0d9f7;

  /* Font & Typography */
  --body-font: sans-serif;
  --normal-font-size: 1rem;
  --smaller-font-size: .750rem;

  /* Backdrop Filter */
  --tw-backdrop-blur: blur(64px);
  --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;

}


*{
	margin: 0;
    padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
}

body{
	font-family: "Helvetica Neue", "Sans", "arial", "verdana";
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
	min-height: 100vh;
	--fonts__family--title-fallback: Helvetica, sans-serif;
    --fonts__family--text-fallback: Helvetica, sans-serif;
}

b, strong{
	font-weight: bold;
}

div{
	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	--text-opacity: 1;
}


#container{
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: center;
	vertical-align: middle;
	background: linear-gradient(100deg, rgb(250,254,255) 10%, rgb(250,251,255) 25%, rgb(250,245,255) 38%, rgb(254,246,246) 68%, rgb(255,253,231) 90%);
}


.backdrop-blur-3xl{
	backdrop-filter:
	var(--tw-backdrop-blur)
	var(--tw-backdrop-brightness)
	var(--tw-backdrop-contrast)
	var(--tw-backdrop-grayscale)
	var(--tw-backdrop-hue-rotate)
	var(--tw-backdrop-invert)
	var(--tw-backdrop-opacity)
	var(--tw-backdrop-saturate)
	var(--tw-backdrop-sepia);
}

.centering{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	height: 100%;
	width: 100%;
}

.zero { background-color: var( --color-zero);}
.one  { background-color: var(--color-one);  }
.two  { background-color: var(--color-two);  }
.three{ background-color: var(--color-three);}
.four { background-color: var(--color-four); }
.five { background-color: var(--color-five); }



.btn{
    position: relative;
    width: 200px;
    padding: 20px 30px; /* Più padding per contenuto */
    border-radius: 12px;
    background: #120909;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-weight: bold;
    /* Rimuovi padding: 3px se presente */
}



/*
	.btn::before{
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    background: conic-gradient(from var(--angle), cyan, hotpink, #341f97, cyan);
    opacity: 0;
    animation: rotate 2s linear infinite;
    border-radius: 14px;
    z-index: -1;
    filter: brightness(1.2);
}

.btn:hover::before{
    opacity: 1;
}


.btn .text{
    position: relative;
    z-index: 2;
    display: block;
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}*/


.black_bg{
	background: black !important;
}


.btn {
  /* Struttura pulsante */
  position: relative;
  width: 200px;
  padding: 20px 30px;
  color: white;
  font-weight: bold;
  background: #120909;
  cursor: pointer;
  z-index: 1;

  /* Creiamo lo spazio per il bordo animato */
  border: 3px solid transparent;
  border-radius: 12px;

  /* Applichiamo il gradiente */
  background-image:
    linear-gradient(#120909, #120909), /* Colore interno */
    /*conic-gradient(from var(--angle), #00ffff, #ff00ff, #341f97, #00ffff); /* Bordo */
	conic-gradient(from var(--angle), cyan, hotpink, #341f97, cyan);

  /* Questa è la chiave: */
  background-origin: border-box;
  background-clip: padding-box, border-box;

  animation: rotate 2s linear infinite;
}

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