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

@font-face {
  font-family: 'Raleway';
  src: url('Raleway/static/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

:root {
  --background-body: #212534;
  --background-card: #191c29;
  /* --clr-1: #052b2f; */
  /* --clr-2: #073438; */
  /* 
  --clr-3: #0e4b50;
  --clr-4: #2d8f85;
  --clr-5: #637c54; */
  --clr-3: #4cf087;
  --clr-4: #79e2cc;
  --clr-5: #4286d7;
}
/* html {
  background-color: var(--background-body);
} */
html {
  height: -webkit-fill-available;
}
body {
  font-family: 'Raleway', sans-serif;
  background: var(--background-body);

  /* height: 100vh;
  height: 100;
  min-height: fill-; */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  /* height: -moz-available; 
  height: -webkit-fill-available; 
  height: fill-available; */

  display: grid;
  place-content: center;
}

.card {
  /* height: 60vh; */
  /* aspect-ratio: 1 / 1; */
  width: 65vw;
  max-width: 400px;
  background: var(--background-card);
  border-radius: 0.5rem;

  position: relative;
  color: white;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
}
.card img.logo {
  width: 80%;
  max-width: 200px;
  object-fit: cover;

  -webkit-filter: invert(1);
  filter: invert(1);
  mix-blend-mode: color-dodge;
}
.card p {
  text-align: center;
  line-height: 1.2;
  font-size: 1.4rem;
  margin-block: 0.5rem;
}

.card:before,
.card:after {
  content: '';
  position: absolute;
  inset: -0.5rem;
  border-radius: inherit;
  z-index: -1;
  background: conic-gradient(from var(--gradient-angle, 90deg), var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-4), var(--clr-3));

  animation: rotation 10s linear infinite;
}
.card::after {
  filter: blur(3.5rem);
  /* animation: rotation 2s linear infinite; */
}

@keyframes rotation {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}