body {
  background-color: #21213b;
  margin: 0;
  padding: 0;
  z-index: -1;
}

body::-webkit-scrollbar {
  display: none;    
}
.principal{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.con{
  width: 100%;
  height: 100%;
  padding: 20px;
}

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}


.gradiante {background: radial-gradient( 100% 100% at var(--g3-3-x-position) var(--g3-3-y-position), #ff0000 -80%, transparent ), radial-gradient( 100% 100% at var(--g3-1-x-position) var(--g3-1-y-position), #0751f2 -71%, transparent ), radial-gradient( 100% 100% at var(--g3-2-x-position) var(--g3-2-y-position), #33063f -52%, transparent ), #180744;animation-name: g-3; animation-iteration-count: infinite; animation-duration: 6s; transition-timing-function: ease-in;}@property --g3-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 16.09375%; }@property --g3-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 33.12500000000001%; } @property --g3-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 48.55468750000001%; }@property --g3-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 9.648437500000002%; } @property --g3-3-x-position { syntax: "<percentage>"; inherits: false; initial-value: 78.6328125%; } @property --g3-3-y-position { syntax: "<percentage>"; inherits: false; initial-value: 79.8046875%; }:root {--g3-1-x-position: 16.09375%;--g3-1-y-position: 33.12500000000001%;--g3-2-x-position: 48.55468750000001%;--g3-2-y-position: 9.648437500000002%;--g3-3-x-position: 78.6328125%;--g3-3-y-position: 79.8046875%;}@keyframes g-3 { 50% { --g3-1-x-position: 42.69531250000001%; --g3-1-y-position: 91.5625%; --g3-2-x-position: 91.7578125%; --g3-2-y-position: 33.046875%; --g3-3-x-position: 5.742187500000001%; --g3-3-y-position: 5.546875000000001%; } }