*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
   padding: 10px;
    margin: 300px 350px ;
    display: grid;
    grid-template-columns: repeat(30, 30px);
    grid-template-rows: repeat(6, 60px);
    grid-column-gap:10px ;
    grid-row-gap:10px ;
    background-color:#4f4b4b;
    border-radius: 10px;
    
}
.container > div{
    border: 4px solid black;
    grid-column: span 2;
    border-radius: 10px;
    background-color: #222;
    text-align: center;
    font-weight: bold;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.76),-2px -2px 2px rgba(255, 255, 255, 0.76);
}
.container > div:nth-child(2){
    grid-column: span 24;
}
.container > div:nth-child(18){
    grid-column: span 4;
}
.container > div:nth-child(19){
    grid-column: span 3;
}
.container > div:nth-child(32){
    grid-column: span 3;
}
.container > div:nth-child(33){
    grid-column: span 4;
}
.container > div:nth-child(45){
    grid-column: span 4;
}
.container > div:nth-child(46){
    grid-column: span 5;
}
.container > div:nth-child(57){
    grid-column: span 5;
}
.container > div:nth-child(60){
    grid-column: span 3;
}
.container > div:nth-child(61){
    grid-column: span 3;
}
.container > div:nth-child(62){
    grid-column: span 8;
}
.container > div:nth-child(63){
    grid-column: span 3;
}
.container > div:nth-child(64){
    grid-column: span 3;
}
.container > div:nth-child(66){
    display: flex;
    flex-direction: column;
    justify-content: space-around ;
    background-color:#4f4b4b;
    border: none;
}
.container > div:nth-child(66) > div{
    border: 2px solid black;
    border-radius: 10px;
    background-color:#222;
    padding: 3px;
    width: 100%;
}
.container > div:nth-child(66) > div:hover{
    background-color: white;
    color: black;
    transition: 1.2s;
}
.container > div:hover{
    color: black;
    background-color: white;
    transition: 1.2s;
}