body {
    margin: 0;
    position: relative; /* Para conter o pseudo-elemento */
    
}

body::before {
    content: ""; /* Necessário para exibir o pseudo-elemento */
    position: fixed; /* Fixa no fundo da janela */
    top: 0;
    left: 0;
    width: 100vw; /* Ocupa toda a largura da janela */
    height: 100vh; /* Ocupa toda a altura da janela */
    z-index: -1; /* Coloca atrás do conteúdo da página */
    background: conic-gradient(from 180deg at 50% 70%,hsla(0,0%,98%,1) 0deg,#eec32d 72.0000010728836deg,#ec4b4b 144.0000021457672deg,#709ab9 216.00000858306885deg,#4dffbf 288.0000042915344deg,hsla(0,0%,98%,1) 1turn);
    width: 100%;
    height: 100%;
    mask:
      radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / var(--size) var(--size),
      url("https://assets.codepen.io/605876/noise-mask.png") 256px 50% / 256px 256px;
    mask-composite: intersect;
    animation: flicker 20s infinite linear;
   
}

@keyframes flicker {

    to {
        mask-position: 50% 50%, 0 50%;
    }
}

:root {
    --size: 20px;
  }

  #conteudo {
    transition: filter 0.3s ease; /* Suaviza o efeito de blur */
  }
  
  #conteudo.blur {
    filter: blur(5px); /* Aplique o efeito de desfoque */
  }