@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

*{
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;  
}

:root {
  --bg-color: #181A1E;
  --card-color: #272B30;
  --text-color: #FFFFFF;
  --accent-color: #FDCA40;
}

.highlight {
  color: var(--accent-color);
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--bg-color);
  color: var(--text-color);
}

h1 {
  font-size: clamp(5rem, 6vw + 1rem, 8rem);
  font-family: 'Sriracha', cursive;
}

.card {
  display: inline-block;
  padding: clamp(0.5rem, 1vw + 0.5rem, 2rem) clamp(2rem, 3vw + 2rem, 6rem);
  width: max-content;
  background: var(--card-color);
  text-align: center;
  border-radius: 0.6rem;
  position: relative;
}

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

.card::after, .card::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), transparent, transparent, transparent, transparent, var(--accent-color), transparent, transparent, transparent, transparent, var(--accent-color), transparent);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: clamp(0.2rem, 0.3vw + 0.1rem, 1rem);
  border-radius: 0.85rem;
  animation: 8s spin linear infinite;
}
/*
.card::before{
  filter: blur(1rem);
  opacity: 0.2;
}*/
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}