:root {
    --gradient-test-fg: linear-gradient(to right, darkblue, darkorchid);
    --neonline-lightblue: linear-gradient(to right, #08DAF3, #7A04EB);
}

/* HTML & Body */
html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-color: #212121;
    /* background: url("../img/bg/sierra.png") rgba(0,0,0,0.4);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover; */
    overflow-x: hidden;
}

/* Main Div */
#main {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-flow: column;
    /* border: 2px solid red; */
}

/* Topbar */
#topbar {
    height: 50px;
    width: 100%;
    /* border: 2px solid yellow; */
    background-color: #090909;
    /* background: var(#090909) padding-box, var(--neonline-lightblue) border-box; */
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid transparent;
    box-shadow: 
        -90vw 0px 15px 1px #08DAF3,
        -80vw 0px 15px 1px #15C2F2,
        -70vw 0px 14px 2px #21AAF1,
        -60vw 0px 14px 2px #2E93F0,
        -50vw 0px 13px 3px #3B7BEF,
        -40vw 0px 13px 3px #4763EF,
        -30vw 0px 12px 4px #544BEE,
        -20vw 0px 12px 4px #6134ED,
        -10vw 0px 12px 4px #6D1CEC,
        -0vw 0px  13px 8px #7A04EB;
}

#username {
    margin-left: 10px;
    margin-top: 6px;

    background: linear-gradient(to right, rgb(119, 239, 248), rgb(255, 184, 243));
    background-clip: text;
    color: transparent;
    font-size: 32px;
    font-family: sans-serif;
}

#button_back {
    height: 100%;
    width: 150px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 32px;
    font-family: sans-serif;
    cursor: pointer;
}

/* Content Div */
#content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    width: 100vw;
}

/* Main Menu */
#main_menu {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
    height: 70vh;
    margin-top: 5vh;
}

.main_menu_button{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
    height: 20%;
    min-height: 100px;
    max-height: 200px;
    background: rgba(0,0,0,0.8);
    border: none;
    color: white;
    font-size: 48px;
    cursor: pointer;
    animation-name: buttonhoverback;
    animation-timing-function: ease-in-out;
    animation-duration: 0.25s;
    border: 2px solid transparent;
    background: linear-gradient(#212121, #212121) padding-box, linear-gradient(to right, #08DAF3, #7A04EB) border-box;
}

.main_menu_button:hover{
    animation-name: buttonhover;
    animation-timing-function: ease-in-out;
    animation-duration: 0.25s;
    margin-left: 12%;

    border: 4px solid transparent;
    background: linear-gradient(#212121, #212121) padding-box, linear-gradient(to right, #08DAF3, #7A04EB) border-box;
    box-shadow: 
        -50px 0px 64px -16px #08DAF3,
         50px 0px 80px -16px #7A04EB;
    
}

@keyframes buttonhover {
    from {
        margin-left: 10%;
    }

    to {
        margin-left: 12%;
    }
}

@keyframes buttonhoverback {
    from {
        margin-left: 12%;
    }

    to {
        margin-left: 10%;
    }
}