html, body {
  margin: 0px;
  padding: 0;
  height: 100%;       /* garante fullscreen */
  overflow: hidden;   /* impede qualquer rolagem */
}

h1 {
  margin: 0;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, #ff0000, #ff0460);
  background-size: 200% 200%;
  -webkit-animation: bg 5s ease infinite;
  -moz-animation: bg 5s ease infinite;
  -o-animation: bg 5s ease infinite;
  animation: bg 5s ease infinite;
}
.box-text-arial {
  font-family: 'Arial';
  color: white;
  font-size: 0.75em;
   text-shadow: 
    1px 5px 10px rgba(16, 16, 16, 0.3),
    1px 10px 20px rgba(16, 16, 16, 0.2),
    1px 15px 40px rgba(16, 16, 16, 0.2),
    1px 20px 80px rgba(16, 16, 16, 0.3);

}

.box-text-arial h1 {
  text-align: center;
}

.box-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 15px;
  font-size: 2.5em;

}

.box-logo .pplus {
  font-family: 'Arial Black', Arial, sans-serif;
  -webkit-animation: pplus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -moz-animation: pplus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -o-animation: pplus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -ms-animation: pplus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  animation: pplus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  
}

.box-logo .plus {
  font-family: 'Mont Heavy DEMO';
  width: 100%;
  overflow: hidden;
  -moz-animation: plus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -webkit-animation: plus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -ms-animation: plus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  -o-animation: plus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  animation: plus 6s cubic-bezier(0.65, 0, 0.35, 1) infinite normal;
  
  

}


.box-logo .log {
  font-family: 'Snell Roundhand';
  letter-spacing: -1px;

}

@-ms-keyframes bg {
  0%{background-position:0% 91%}
  50%{background-position:100% 10%}
  100%{background-position:0% 91%}
}

@-webkit-keyframes bg {
  0%{background-position:0% 91%}
  50%{background-position:100% 10%}
  100%{background-position:0% 91%}
}

@-moz-keyframes bg {
  0%{background-position:0% 91%}
  50%{background-position:100% 10%}
  100%{background-position:0% 91%}
}

@-o-keyframes bg {
  0%{background-position:0% 91%}
  50%{background-position:100% 10%}
  100%{background-position:0% 91%}
}

@keyframes bg {
  0%{background-position:0% 91%}
  50%{background-position:100% 10%}
  100%{background-position:0% 91%}
}

@-ms-keyframes pplus {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(0deg);}
  45% {transform: rotate(1080deg);}
  50% {transform: rotate(1080deg);}
  55% {transform: rotate(1080deg);}
  95% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@-o-keyframes pplus {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(0deg);}
  45% {transform: rotate(1080deg);}
  50% {transform: rotate(1080deg);}
  55% {transform: rotate(1080deg);}
  95% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@-moz-keyframes pplus {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(0deg);}
  45% {transform: rotate(1080deg);}
  50% {transform: rotate(1080deg);}
  55% {transform: rotate(1080deg);}
  95% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@-webkit-keyframes pplus {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(0deg);}
  45% {transform: rotate(1080deg);}
  50% {transform: rotate(1080deg);}
  55% {transform: rotate(1080deg);}
  95% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@keyframes pplus {
  0% {transform: rotate(0deg);}
  5% {transform: rotate(0deg);}
  45% {transform: rotate(1080deg);}
  50% {transform: rotate(1080deg);}
  55% {transform: rotate(1080deg);}
  95% {transform: rotate(0deg);}
  100% {transform: rotate(0deg);}
}

@-ms-keyframes plus {
  0% {width:100%;}
  10% {width:100%;}
  45% {width:0%;}
  50% {width:0%;}
  55% {width:0%;}
  90% {width:100%;}
  100% {width:100%;}
}

@-o-keyframes plus {
  0% {width:100%;}
  10% {width:100%;}
  45% {width:0%;}
  50% {width:0%;}
  55% {width:0%;}
  90% {width:100%;}
  100% {width:100%;}
}

@-moz-keyframes plus {
  0% {width:100%;}
  10% {width:100%;}
  45% {width:0%;}
  50% {width:0%;}
  55% {width:0%;}
  90% {width:100%;}
  100% {width:100%;}
}

@-webkit-keyframes plus {
  0% {width:100%;}
  10% {width:100%;}
  45% {width:0%;}
  50% {width:0%;}
  55% {width:0%;}
  90% {width:100%;}
  100% {width:100%;}
}

@keyframes plus {
  0% {width:100%;}
  10% {width:100%;}
  45% {width:0%;}
  50% {width:0%;}
  55% {width:0%;}
  90% {width:100%;}
  100% {width:100%;}
}

@keyframes animate-gradient {
  to {
    background-position: 200%;
  }
}
/* rodapé fixo */
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px 16px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(4px);
  font-family: Arial, sans-serif;
  font-size: 14px;
  z-index: 10;
}

/* evita que o footer cubra conteúdo em telas pequenas */
body { padding-bottom: 0; } /* zera para não criar rolagem */