@font-face {
    font-family: MechanicalSansSerif;
    src: url("MechanicalSansSerif-Slim.otf") format("opentype");
}

@font-face {
    font-family: Premios;
    src: url("Premios.otf") format("opentype");
}

#gradient-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    z-index: -1;
    --gradient-color-1: #050e14; 
    --gradient-color-2: #05080a; 
    --gradient-color-3: #06060a;  
    --gradient-color-4: #141f1c;
  }

.container {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#particles-js {
    z-index: 5;
}

.date {
    font-size: max(300pt, 1vw);
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: MechanicalSansSerif;
}

.text {
    background-color: #000000;
    mix-blend-mode: color-dodge;
    color: transparent;
    opacity: .2;
    text-shadow: 2px 2px 3px rgba(126, 139, 150, 0.5);
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
}

footer {
    width: 100%;
    position: absolute;
    bottom: 5px;
    z-index: 2;
}

.coordinates {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #fff;
    font-size: 20pt;
    font-family: Premios;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}