:root {
    --bw: 400px;
}

.text2,
.text {
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
    font-family: monospace;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    width: calc(var(--n) * var(--bw));
    height: calc(var(--n) * var(--h) * var(--bw));
    top: calc(var(--mt) * var(--bw));
    left: calc(var(--ml) * var(--bw));
}

.text {
    background-color: aliceblue;
    border: 5px solid var(--c1);
    color: rgb(84, 82, 93);
}

.text2 {
    color: white;
}

.text>h1,
.text2>h1 {
    font-size: 50px;
    font-weight: bolder;
    text-shadow: 4px 4px var(--c1);
}

.text>h2,
.text2>h2 {
    font-size: 30px;
    font-weight: normal;
}

.text>p,
.text2>p {
    font-size: 20px;
}

.red {
    --c1: rgb(254, 153, 153);
    --c2: rgb(255, 173, 173);
}

.orange {
    --c1: rgb(255, 193, 122);
    --c2: rgb(255, 221, 134);
}

.yellow {
    --c1: rgb(255, 229, 81);
    --c2: rgb(255, 248, 116);
}

.green {
    --c1: rgb(181, 241, 96);
    --c2: rgb(223, 255, 128);
}

.blue {
    --c1: rgb(125, 219, 228);
    --c2: rgb(161, 253, 245);
}

.violet {
    --c1: rgb(133, 126, 233);
    --c2: rgb(153, 157, 255);
}

.white {
    --c2: aliceblue;
    --c1: rgb(221, 234, 246);
}

.black {
    --c1: rgb(69, 67, 73);
    --c2: rgb(84, 82, 93);
}

.brown {
    --c1: rgb(209, 126, 111);
    --c2: rgb(236, 153, 120);
}

.grid {
    background: repeating-conic-gradient(var(--c1) 0deg 90deg, var(--c2) 90deg 180deg);
    background-size: var(--bw) var(--bw);
    width: calc(var(--n) * var(--bw));
    height: calc(var(--n) * var(--bw));
    display: block;
    position: relative;
}

.wrapper {
    display: flex;
}

.half {
    --n: 0.5;
}

.one {
    --n: 1;
}

.two {
    --n: 2;
}

.three {
    --n: 3;
}

.four {
    --n: 4;
}

.five {
    --n: 5;
}

.six {
    --n: 6;
}