*{
        margin: 0;
        padding: 0;
}

html{
        height: 100%;
}

body{
        background-color: burlywood;

        height: 100%;

        display: grid;
        grid-template-rows: auto 6fr;
}
#navbar{
        background-color: rgb(58, 115, 221);

        display: grid;
        grid-template-columns: 1fr 13fr;

        align-content: center;
}
h1{
        /* background-color: darkseagreen; */

        text-align: center;
        align-items: center;
        align-content: center;
}
#left-pane{
        display: grid;
        justify-items: center;
}
#ham-box{
        border: 3px solid rgb(255, 145, 0);
        border-radius: 10px;

        margin: 7px;
        margin-left: 30px;

        width: 60px;
        height: 60px;

        align-content: center;
}
.ham-bar{
        background-color: white;

        margin: 10%;

        width: 80%;
        height: 15%;
}

#ham-box:hover{
        transition: 0.2s;
        background-color: rgba(100, 99, 99, 0.781);
}

#ham-box:hover #bar1{
        transform: translate(20px, 15px) rotate(-90deg);
        transition: 0.6s;
}

#ham-box:hover #bar2{
        width: 45%;
        translate: 10px;
        transition: 0.6s;
}

#ham-box:hover #bar3{
        transform: translate(-20px, -15px) rotate(90deg);
        transition: 0.6s;
}

#bar1{
        transition: 0.4s;
}

#bar2{
        transition: 0.4s;
}

#bar3{
        transition: 0.4s;
}