* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #020a13;
    
    color: #ffffffcc;
    -webkit-font-smoothing: antialiased;
    font-family: "Nunito Sans", sans-serif;
    font-weight: 200;
}

body::before {
    /*background horinzontal lines */
    content: "";
    height: 100vh;
    width: 100vw;
    color: rgba(113, 113, 113, 0.07);
    position: fixed;
    z-index: -1;
    transition: all 0.5s linear 0s;
    background: linear-gradient(currentcolor 1px, transparent 1px) 0% 0% / 94px 90px, 
                linear-gradient(to right, currentcolor 1px, transparent 1px) transparent;
}

body::after {
    /* background gradient */
    position: fixed;
    content: "";
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(100%);
    top: 0px;
    opacity: 0.1;
    transform: translateZ(0px);
    background-image: radial-gradient(at 40% 40%, rgb(30, 144, 255) 0px, transparent 50%),
        radial-gradient(at 90% 10%, rgb(255, 105, 180) 0px, transparent 50%),
        radial-gradient(at 50% 95%, rgb(0, 255, 255) 0px, transparent 50%),
        radial-gradient(at 20% 30%, rgb(50, 205, 50) 0px, transparent 50%),
        radial-gradient(at 90% 90%, rgb(255, 255, 0) 0px, transparent 50%),
        radial-gradient(at 33% 50%, rgb(255, 69, 0) 0px, transparent 50%),
        radial-gradient(at 79% 53%, rgb(128, 0, 128) 0px, transparent 50%);
}