*{
    box-sizing: border-box;
}

#container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 450px;
    height: 300px;
    display: grid;
    grid-template-columns: auto 35px auto 150px auto;
    grid-gap: 3px;
}
font{
    color: white;
    font-weight: bold;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,0);
}
div{
    position: relative;
}
#fd3{
    margin: 0;
    padding: 0;
    width: 100%;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%,-50%);
}
#d1{
    background-color:  rgb(255, 0, 119);

}
#d2{
    background-color:  rgba(217, 0, 255, 0.87);
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
    
}
#d3{
    background-color:  rgba(255, 102, 0, 0.918);
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 4;
    
}
#d4{
    background-color:  rgba(255, 230, 0, 0.87);
}
#d5{
    background-color:  rgba(9, 107, 25, 0.87);
}
#d6{
    background-color:  rgba(8, 91, 168, 0.931);
}
#d7{
    background-color:  rgba(19, 218, 52, 0.87);
}

#d8{
    background-color:  rgba(15, 134, 21, 0.794);
    grid-column-start: 2;
    grid-column-end: 3;
   
}
#d9{
    background-color:  rgba(16, 208, 233, 0.87);
    grid-column-start: 3;
}
#d10{
    background-color:  rgba(21, 196, 88, 0.87);
}
#d11{
    background-color:  rgba(76, 0, 255, 0.87);
    grid-column-start: 1;
    grid-column-end: 4;
}
#d12{
    background-color:  rgba(255, 0, 0, 0.87);
}