html,body{
    margin: 0;
}

.button{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer ;
}

.menu.button.out{
    position: fixed;
    top: 0;
    right: 0;
    height: 12.5vh;
    width: 6.25vw;
    background: green;
}

.menu.container{
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(32, 1fr);
    grid-template-rows: repeat(16, 1fr);
}


.menu.container.hidden .button:not(.menu){
    transform: scaleY(0) scaleX(0);
    cursor: auto;
}

.menu.container .button{
    transition: transform .07s ease-in-out;
}

.button.vert{
    transform-origin: top;
}

.button.hor{
    transform-origin: right;
}

.menu.container .button:nth-of-type(1){
    grid-column: 31 / span 2;
    grid-row: 1 / span 2;
    background: green;
}

.menu.container .button:nth-of-type(2){
    grid-column: 29 / span 2 ;
    grid-row: 1 / span 2;
    background: chartreuse;
    transition-delay: .2s;

}
.menu.container .button:nth-of-type(3){
    grid-column: 29 / span 4 ;
    grid-row: 3 / span 2;
    background: crimson;
    transition-delay: .4s;

}
.menu.container .button:nth-of-type(4){
    grid-column: 25 / span 4 ;
    grid-row: 1 / span 4;
    background: cadetblue;
    transition-delay: .6s;

}
.menu.container .button:nth-of-type(5){
    grid-column: 25 / span 8 ;
    grid-row: 5 / span 4;
    background: cornsilk;
    transition-delay: .8s;

}
.menu.container .button:nth-of-type(6){
    grid-column: 17 / span 8 ;
    grid-row: 1 / span 8;
    background: violet;
    transition-delay: 1s;

}
.menu.container .button:nth-of-type(7){
    grid-column: 17 / span 16 ;
    grid-row: 9 / span 8;
    background: rosybrown;
    transition-delay: 1.2s;

}
.menu.container .button:nth-of-type(8){
    grid-column: 1 / span 16 ;
    grid-row: 1 / span 16;
    background: yellow;
    transition: transform .2s ease-in-out;
    transition-delay: 1.4s;
}