html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}
:root {
  cursor: none;
  --cursorX: 50vw;
  --cursorY: 50vh;
}
:root:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 14vmax at var(--cursorX) var(--cursorY),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.50) 50%,
    rgba(0,0,0,1) 100%
  )
}
body{
background-color: #000000;
background-image: url("img/img-copy.webp");
background-size: contain;
background-position: center top;
background-repeat: no-repeat;
background-origin: content-box;
background-attachment: fixed;
z-index: 1;

animation-name:krizla-animation;
animation-duration:9s;
animation-iteration-count:infinite;
}
@keyframes krizla-animation {
  0%, 100% {
    background-color:#000000;
  }

  25% {
    background-color:#090505;
  }

  50% {
    background-color:#090A09;
  }

  75% {
    background-color:#0B0C0F;
  }
}
.flexBody{
display: flex;
align-items: center;
justify-content: center;
align-content: center;
}
.krizlaCard{
opacity: 0.55;
position: absolute;
top: 50%;
transform: translateY(-50%);
}