:root {
    --color-white: #ffffff;
    --color-black-deep: #0e0d0e;
    --color-dark-normal: #172b4d;
    --color-grey-4: #6b788d;
    --color-off-white: #f8f9fa;
    --color-primary: #6e40ff;
    --color-primary-light: #f9f8fe;
}

.wrapper {
    display: flex;
}

.d {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    margin-right: 20px;
    border-radius: 16px;
}

.d-1 {
    background: var(--color-white);
}

.d-2 {
    background: var(--color-black-deep);
}

.d-3 {
    background: var(--color-dark-normal);
}

.d-4 {
    background: var(--color-grey-4);
}

.d-5 {
    background: var(--color-off-white);
}

.d-6 {
    background: var(--color-primary);
}

.d-7 {
    background: var(--color-primary-light);
}