html {
    background-color: rgb(0, 0, 0);
    font-size: 20px;
    font-family: 'Orbitron', sans-serif;
}
body {
    padding: 0;
    margin: 0;
}

h1 {
    margin: 0;
}

/* IMAGES / EFFECTS */

.background-image {
    z-index: -5;
    position: fixed;
    width: 107% ;
    height: 107%;
    background-repeat: no-repeat;
    object-fit: cover;
    opacity: 0%;
    overflow: hidden;
    transition: 500ms linear;
}

#vignette {
    z-index: 0;
    position: fixed;
    width: 107%;
    height: 107%;
    object-fit: cover;
    opacity: 90%;
    overflow: hidden;
    transition: 500ms linear;
}
.particles-js-canvas-el {
    position: absolute;
}

/* MENU ITEMS */


#menu-div {
    position: absolute;
    z-index: 5;
    margin: 25vh 25vw 25vh 25vw;
    width: 50vw;
    height: 50vh;
}

#title {
    z-index: 1;
    text-align: center;
    background-color: transparent;
    color: white;
    position: relative;
    font-size: 9.5vh;
    font-weight: 700;
}

.menu {
    z-index: 1;
    font-size: 6vh;
    font-weight: 500;
    background-color: transparent;
    color: white;
    position: relative;
    text-align: center;
    filter: brightness(50%);
}

.menu:hover {
    filter: brightness(200%);
    animation-name: brighten;
    animation-duration: 0.5s;
    animation-fill-mode: forwards; 
    cursor: pointer;  
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
       
.mystyle { 
    animation-name: reverse; 
    animation-duration: 1s; 
} 
          
@keyframes brighten { 
    from { 
        filter: brightness(50%)
    } 
    to { 
        filter: brightness(150%)
    } 
} 
          
@keyframes reverse { 
    from { 
        filter: brightness(150%)
    } 
    to { 
        filter: brightness(50%) 
    } 
} 


/*  ABOUT PAGE  */

#main-div {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    box-sizing: border-box;
    padding: 8vh 5vw 10vh 5vw;
    z-index: 10;
    margin: 0 25vw 0 25vw;
    background-color: rgb(0, 0, 0);
    width: 50vw;
    height: 100vh;
    transition: visibility 0s, opacity 0.5s linear;
}

.about {
    color: rgb(243, 242, 242);
    text-align: center;
    padding-bottom: 1.5vh;
    font-family: 'Comfortaa';
}

#about-heading {
    padding-bottom: 2vh;
    font-family: 'Orbitron', sans-serif;
}


#about-body {
    font-size: 20px;
    padding-bottom: 3vh;
}

.about-footer {
    font-size: 12px;
    font-family: 'Comfortaa';
}

#close-button {
    font-size: 20px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s linear;
}

#close-button:hover {
    opacity: 1;
}

@media only screen and (max-device-width: 800px) {
    #title {
        font-size: 9vw;
    }
    .menu {
        font-size: 7vw;
    }
    #menu-div {
        margin: 30vh 0 20vh 0;
        width: 100vw;
        height: 50vh;
    }
    #main-div {
        margin: 0;
        width: 100vw;
        height: 100vh;
    }

    #about-heading {
        font-size: 8vw;
    }

    #about-body {
        font-size: 4vw;
    }
}