html,
body {
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: black;
    background: linear-gradient(to bottom, black 0%, green 100%);
}

.filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:  green;

    animation-fill-mode: both;
    mix-blend-mode: overlay;
}

@keyframes colorChange {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: .9;
    }
}

.landscape {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclipart-library.com%2Fimages_k%2Fnew-york-city-silhouette-skyline%2Fnew-york-city-silhouette-skyline-13.png&f=1&nofb=1);
    background-size: 900px 300px;
    background-repeat: repeat-x;
    background-position: center bottom;
}

.canvas-container {
    flex: none;
    width: 400px;
    height: 128px;
    background: #111;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
            0 2px 2px rgba(0,0,0,0.11), 
            0 4px 4px rgba(0,0,0,0.11), 
            0 8px 8px rgba(0,0,0,0.11), 
            0 16px 16px rgba(0,0,0,0.11), 
            0 32px 32px rgba(0,0,0,0.11);
}


.division{
    width:80px;
    margin:10px;
    background:#2f2f2f;
    height:2px;
    border-radius: 1px;
}

.menuItem{
    width:100%;
    height:70px;
    padding-top:5px;
    transition: all 500ms linear;
}

.menuIcon{
    width:80px;
    height:70px;
    margin-left: 10px;
    margin-right: 10px;
    float:left;
}

.menuText{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    font-family: Monaco,Courier,"Courier New";
    color:#20c20e;
    width:120px;
    height:fit-content;
    float:left;
    margin-left:10px;
}

.menuText::after{
    top:50%;
    transform: translateY(-50%);
}

.menuItem:hover{
    filter: drop-shadow(0px 0px 8px #20c20e);
    
    
    
}

img{
    width:55px;
    height: 55px;
}

.menuExpander{
    width:60px;
    height:8px;
    border-radius: 2px;
    background:#aaaaaa;
    margin-bottom:6px;
    margin-left:10px;
}

.menuMenu{
    height:fit-content;
    width:100%;
    background:#111;
    padding-bottom: 10px;
    padding-top:10px;
    margin-bottom:10px;
    padding-left:10px;
}


.expandedMenu:hover{
    transform:translateX(-140px);
}

.expandedMenu{
    position:absolute;
    right:-160px;
    top:0px;
    height:100%;
    width:260px;
    background:#1e1e1e;
    transition: all 500ms linear;
    z-index: 1;
}