#menu_button{
    position: fixed;
    top:1em;
    right:1em;
    width:4em;
    height:4em;
    background-color: chartreuse;
    border-radius: 0.4em;
    transition:all 0.5s;
    cursor:pointer;
}
#menu_button:hover {
    background-color:coral;
}

.menu_first {
    animation-name:m_off;
    animation-duration: 1s;
    animation-delay: 7s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.menu_on {
    animation-name:m_on;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.menu_off {
    animation-name: m_off;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

#to-home {
	color:blue;
	font-size:1em;
	font-family: 'Abril Fatface', cursive;
	transition: all 0.3s;
}
#to-home:hover {
	color:red;
}

#home_btn {
	left:auto;
	right:auto;
	width:6em;
	height:1.5em;
	text-align:center;
	border:none;
	background-color:#99ff66;
	font-size:1em;
	font-weight: bold;
	color:#33cc99;
	transition: all 0.3s;
}
#home_btn:hover{
	background-color:#ffff33;
	color:#3333ff;
}

#mp_image {
    width:4em;
    height:4em;
}

@keyframes m_off {
    from {
        left:0em;
    }
    to {
        left:var(--menu-cls);
    }
    
}
@keyframes m_on {
    from {
        left:var(--menu-cls);
    }
    to {
        left: 0em;
    }
}
#menu {
    position:absolute;
    top:0;
    left:0;
}