:root {
  --rosso: crimson;
  --rosso-glow: red;
  --nero: black;
  --panel: black;
  --bianco: linen;
  --dim: darkgrey;
}
* {
  box-sizing: border-box;
}
.glow-box {
  position: relative;
  width: 450px;
  max-width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: var(--panel);
  isolation: isolate;
  top: 512px;
}
.glow-box1 {
  position: relative;
  width: 450px;
  max-width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: var(--panel);
  isolation: isolate;
  top: 400px;
  left: 550px;
}
.glow-box2 {
  position: relative;
  width: 450px;
  max-width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: var(--panel);
  isolation: isolate;
  top: 400px;
  left: 1040px;
}
.glow-box3 {
  position: relative;
  width: 450px;
  max-width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: var(--panel);
  isolation: isolate;
  top: 400px;
  left: 550px;
}
.glow-box4 {
  position: relative;
  width: 450px;
  max-width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: var(--panel);
  isolation: isolate;
  top: 400px;
  left: px;
}
.glow-box::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--rosso-glow) 82%,
    white 88%,
    var(--rosso-glow) 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}
.glow-box1::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--rosso-glow) 82%,
    white 88%,
    var(--rosso-glow) 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}
.glow-box2::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--rosso-glow) 82%,
    white 88%,
    var(--rosso-glow) 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}
.glow-box3::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--rosso-glow) 82%,
    white 88%,
    var(--rosso-glow) 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}
.glow-box4::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0%,
    transparent 65%,
    var(--rosso-glow) 82%,
    white 88%,
    var(--rosso-glow) 94%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 4s linear infinite;
  z-index: -1;
}
@keyframes spin {
  to {
    --angle: 360deg;
  }
}
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.inner {
  background: linear-gradient(180deg, var(--panel), black);
  border-radius: 14px;
  padding: 28px 26px;
  min-height: 260px;
}
.inner1 {
  background: linear-gradient(180deg, var(--panel), black);
  border-radius: 14px;
  padding: 28px 26px;
  min-height: 260px;
}
.inner2 {
  background: linear-gradient(180deg, var(--panel), black);
  border-radius: 14px;
  padding: 28px 26px;
  min-height: 260px;
}
.inner3 {
  background: linear-gradient(180deg, var(--panel), black);
  border-radius: 14px;
  padding: 28px 26px;
  min-height: 260px;}
  .inner4 {
  background: linear-gradient(180deg, var(--panel), black);
  border-radius: 14px;
  padding: 28px 26px;
  min-height: 260px;}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--rosso-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
  top: 500px;
}
.eyebrow1{
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--rosso-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
    top: 500px;}
    .eyebrow2{
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--rosso-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
    top: 500px;}
        .eyebrow3{
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--rosso-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
    top: 500px;}
            .eyebrow4{
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--rosso-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
    top: 500px;}
h1 {
font-family: Imperial Script;
    font-weight: 700;
  font-style: italic;
  font-size: 34px;
  margin: 0 0 10px;
  color: var(--bianco);
}
.aciklama {
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0;
  width: 500px;
position: relative;
top: 150px;
font-size: 20px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(5px);
animation:fadeIn 1s ease-in-out;
border-radius: 10px;
}
.f11{
  width: 1000px;
  position: absolute;
  left: 510px;
opacity: 0.7;
}
p{
font-size: 20px;
    color: aliceblue;
}
h2{
top: 100px;
position: relative;
    font-family: Advent pro;
    color: white;
    animation:fadeIn 2s ease-in-out;
    font-size: 40px;
}
body{
    background-color: black;
}
@keyframes fadeIn{
from{
    opacity:0;
translate:(0px)
}
to{
    opacity:1;
    translate:(-20px)
}  
}
@media (prefers-reduced-motion: reduce) {
  .glow-box::before {
    animation: none;
  }
}
