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

@font-face {
    font-family: Batang;
    src: url("BATANG.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;
}

a {
    text-decoration: none;
    color: inherit;
}

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

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

.small_text {
    background-color: #000000;
    font-family: MechanicalSansSerif;
    font-size: max(30pt, 1vw);
    position: absolute;
    width: 100%;
    text-align: center;
    top: 25%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    mix-blend-mode: color-dodge;
    color: transparent;
    text-shadow: 1px 1px 1px rgba(126, 139, 150, 0.5);
    opacity: .6;
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
}

.link_text {
    background-color: #000000;
    text-decoration: underline;
    font-family: MechanicalSansSerif;
    font-size: max(90pt, 1vw);
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    mix-blend-mode: color-dodge;
    color: transparent;
    text-shadow: 1px 1px 1px rgba(142, 247, 43, 0.925);
    opacity: .6;
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;
}

#date-slash {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 100pt;
    font-weight: 900;
}

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: Batang;
}

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