*, ::before, ::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: monospace;
}

*:focus {
    outline: none;
}

:root {
    --BLACK: #1d1f21;
    --WHITE: #c5c8c6;
    --DARK_GREY: #373b41;
    --MED_GREY: #373b41;
    --LIGHT_GREY: #707880;
    --RED: #a54242;
    --LIGHT_RED: #cc6666;
    --GREEN: #8c9440;
    --LIGHT_GREEN: #b5bd68;
    --ORANGE: #de935f;
    --YELLOW: #f0c674;
    --BLUE: #5f819d;
    --LIGHT_BLUE: #81a2be;
    --MAGENTA: #85678f;
    --LIGHT_MAGENTA: #b294bb;
    --TEAL: #5e8d87;
    --LIGHT_TEAL: #8abeb7;

    --HOVER: var(--GREEN);
    --FORGROUND: var(--WHITE);
    --BACKGROUND: var(--BLACK);
    --BUTTON: var(--WHITE);
    --ACTIVE: var(--LIGHT_BLUE);

}

body{
    background-color: var(--BACKGROUND);
    width: 100%;
    height: 100vh;
    /*padding: 10px;*/
    color: var(--BLACK);
}

#main-holder{
    position: fixed;
    width: 100%;
    height: 100%;
}

#top-screen{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 24%, rgba(187,187,187,1) 72%, rgba(189,189,189,1) 100%);
}

#bottom-screen{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 24%, rgba(187,187,187,1) 72%, rgba(189,189,189,1) 100%);
}

#title-holder{
    position: absolute;
    width: 100%;
    font-size: 50px;
    text-align: center;
    top: 50vh;
    font-weight: bold;
}

.title-shadow{
    position: absolute;
    width: 100%;
    font-size: 50px;
    text-align: center;
    top: 80vh;
    color: black;
    filter: blur(5px);
    opacity: 0;
    transform: scale(1, 0.5);
}

.name{
    position: absolute;
    top: 50vh;
    font-size: 50px;
    opacity: 0;
    white-space: nowrap;
    text-shadow: 2px 2px 2px var(--LIGHT_MAGENTA);
    color: var(--BLACK);
    z-index: 0;
}

.shadow{
    position: absolute;
    font-size: 50px;
    top: 95vh;
    color: black;
    filter: blur(5px);
    opacity: 0;
    transform: scale(1, 0.5);
    white-space: nowrap;
}

.show{
    position: absolute;
    /*bottom: 0;*/
    left: 50vw;
    font-size: 30px;
    opacity: 0;
    white-space: nowrap;
}

.show-shadow{
    position: absolute;
    font-size: 30px;
    top: 80vh;
    left: 50vw;
    color: black;
    filter: blur(5px);
    opacity: 0;
    transform: scale(1, 0.5);
    white-space: nowrap;
}

.image{
    position: absolute;
    height: 100vh;
    top: 0;
    opacity: 0;
    /*padding-right: 10px;*/
}

#scroll-div{
    height: 1500vh;
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}