* {
        margin: 0;
        padding: 0;
        font-family: Roboto Condensed, arial;
        box-sizing: border-box;
    }

    html {
        background: linear-gradient(to right top, black, grey);
        min-height: 100vh;
    }

    body {
        width: 100%;
        height: 100%;
    }

    .wrapper {
        width: 100vw;
        height: 100vh
    }

    .wrapper2 {
        width: 100vw;
        height: 100vh;
        background: black;
    }

    li {
        list-style-type: none;
        display: inline-block;
        padding: 10px;
        margin: 0;
    }

    nav {
        position: relative;

        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 30px;
        z-index: 2;
    }

    nav a {
        background: linear-gradient(to left bottom, black, white);
        position: relative;
        display: inline-block;
        text-decoration: none;
        float: left;
        width: 250px;
        height: 72px;
        color: #C0C0C0;
        text-shadow: 2px 2px black;
        box-shadow: 5px 5px 5px 0 black;
        box-sizing: border-box;
        text-align: center;
    }

    nav a:hover {
        background: linear-gradient(to bottom, black, white);
        transform: scale(1.1);
        transition: all 1s ease;
    }

    h3 {
        color: #C2B280;
        text-shadow: 2px 2px black;
        text-align: center;
        font-size: 1.5em;
    }

    h6 {
        font-size: 1em;
        color: #C2B280;
        text-shadow: 2px 2px black;
        text-align: center;
        margin: 5%;
    }

    p {
        font-size: 1em;
        text-align: center;
        margin: 2%;
        color: #C2B280;
        text-shadow: 2px 2px black;
    }

    #black {
        position: absolute;
    }

    #black {
        width: 100vw;
        height: 100vh;
        background-color: transparent;
        z-index: 2
    }

    #button,
    #button2 {
        position: absolute;
        display: inline-block;
        background-color: #9F9FDF;
        bottom: 2%;
        left: 5%;
        text-align: center;
        width: 50px;
        height: 50px;
        float: none;
        border-radius: 10%;
        border: 10px;
        z-index: 3
    }

    #button2 {
        box-shadow: 0 0 20px 10px white;
    }

    #button:hover {
        box-shadow: 0 0 20px 10px white;
        transition: all 1s ease-in-out;
    }

    .button:hover + #black {
        background-color: black;
        box-shadow: 0 0 20px 10px white;
        transition: all 1s ease-in-out;
    }