html, body {
    height: 100%;
    text-align: center;
    overflow: hidden;
    margin: 0;
}

#circles_canvas {
    position: relative;
    z-index: -1;
}

a {
    text-decoration: none;
    color: inherit;
}

#menu {
    width: 60vw;
    height: auto;
    background: rgba(240,240,240,0.8);/*rgba(50,50,50,0.8);*/
    border: 1px solid black;
    padding: 1%;
    border-radius: 10px;/*5%;*//*0.8em;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Arial", "sans-serif";
    font-weight: normal;
}

.menuItem {
    width: 10vw;
    height: 10vw;
    background: rgba(0,0,0,0.8);
    color: white;/*#6457A6;*/
    border: 1px solid black;
    display: inline-block;
    padding: 2% 5%;
    border-radius: 10%;
    margin: 1%;
    transition: background 0.7s, color 0.7s, font-size 0.7s;
    -webkit-transition: background 0.7s, color 0.7s, font-size 0.7s;
    vertical-align: bottom;

}

.menuItem:hover {
    background: rgba(250,250,250,0.8);/*rgba(157,172,225,0.8);*/ /*118,229,252*/
    color: black;/*#ccc;*/
    font-size: larger;
}

.menuItemImage {
    float: top;
    width: 65%;
    height: 65%;
    border-radius: 10%;
}

.menuItemLabel {
    display: block;
}

@media(max-width: 500px) {
    #menu {
        width: 70vw;
    }

    .menuItem {
        width: 25vw;
        height: 25vw;
    }
}