* {
    margin: 0;
    padding: 0;
}

.imgbox {
    display: grid;
    height: 100%;
}

.center-fit {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

body
{
    font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
    font-size: 15px;
    margin: 10px;
    color: #ffffff;
    text-shadow: 2px 2px rgba(0,0,0,1);
    background-color: #eeeeee;
}

input {
    box-sizing: content-box;
    border: 0;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 0px;
    color: #ffffff;
    height: 45px;
    width: 170px;
    font-size: 15px;
    background: rgba(100,100,100,0.8);
    border-radius: 5px 5px 5px 5px;
}



h1, h2
{
    font-size: 1.5em;
    font-weight: normal;
}

h2
{
    font-size: 1.3em;
}

#SETUP
{
	position: absolute;
	top: 90px;
	left: -180px;
    width: 200px;
    height: 690px;
    padding: 10px;
    border: 0px inset #eee;
	border-radius: 0px 5px 5px 0px;
	background: rgba(0,0,0,0.2);

    -webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    animation: mymove 1s;

}


/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: -180px;}
}

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: -180px;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymoveout {
    from {left: -180px;}
    to {left: 0px;}
}

/* Standard syntax */
@keyframes mymoveout {
    from {left: -180;}
    to {left: 0px;}
}


#SETUP:hover {
    left: 0px;
    -webkit-animation: mymoveout 250ms; /* Chrome, Safari, Opera */
    animation: mymoveout 250ms;
}