@import url('https://fonts.googleapis.com/css2?family=Rubik+80s+Fade&family=Syne+Mono&display=swap');
html, body{
    padding:0px;
    margin: 0px;
    text-overflow: clip;
    height: 100%;
    width: 100%;
}
.syne-mono-regular {
    font-family: "Syne Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
.rubik-80s-fade-regular {
    font-family: "Rubik 80s Fade", system-ui;
    font-weight: 400;
    font-style: normal;
}
#hi {
    position: fixed;
    margin: 0px;
    display: grid;
    mix-blend-mode:difference;
}

p{
    margin: 0.2em;
    font-size: 3em;
    font-family: "Rubik 80s Fade", system-ui;
    font-weight: 400;
    font-style: normal;
    color: white;
}
.titlee{
    color: white;
    mix-blend-mode: difference;
    position:absolute;
    top: 30%;
    left: 15%;
    font-size: 10em;
}
#site{
    font-size: 1em;
}
#bg{
    top: 50%;
    left: 15%;
    font-size: 60px;
}

.johnny{
    position: fixed;
    height: 100%;
    width: 100%;
    mix-blend-mode: difference;
}

.gradientBox{
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
    width: 100vw;
    height: 100%;
    position: fixed;
    z-index: 1;
    
}