.letter {
    width: 100%;
    height: 100%;
    position: relative;
}

.letter-frame {
    width: 100%;
    height: 100%;
    border: .4vh solid black;
    position: relative;
    overflow: visible;
}

.letter-frame::before, .letter-frame::after, .h-bottom::before, .h-bottom::after {
    content: "";
    position: absolute;
    background: black;
    left: 50%;
    transform: translateX(-50%);
    width: .4vh;
}

.letter.y::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20%;
    background: white;
    z-index: 1;
}

.letter-frame div {
    background: white;
    border-bottom: .4vh solid black;
    position: absolute;

}


/* LETTER PSEUDOS */

.a .letter-frame::before {
    bottom: 0;
    height: 35%;

}

.a .letter-frame::after, .o .letter-frame::after {
    top: 20%;
    height: 35%;
    transform: rotate(45deg);
}

.r .letter-frame::before {
    bottom: 0;
    height: 35%;

}

.r .letter-frame::after, .p .letter-frame::after {
    top: 20%;
    height: 35%;
    transform: rotate(45deg);
}


.o .letter-frame::after {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) rotate(45deg);
}



.c .letter-frame::before {
    width: 45%;
    height: .4vh;
    left: unset;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.m .letter-frame::before, .n .letter-frame::before, .n .letter-frame::after {
    height: 20%;
    width: 35%;
    border-left: .4vh solid black;
    border-right: .4vh solid black;
    background: white;
    bottom: 0;
    top: unset;
}

.n .letter-frame::before, .y .letter-frame::before {
    height: 30%;
    border-right: none;
    left: 50%;
    width: 26%;
    bottom: -.4vh;
}

.n .letter-frame::after {
    border-left: none;
    bottom: unset;
    top: 0;
    width: 9%;
    background: transparent;
}

.y .letter-frame::before {
    border-width: 0 .4vh .4vh .4vh;
}

.u .letter-frame::before, .h .letter-frame::before, .y .letter-frame::before {
    height: 35%;
    width: .4vh;
    top: 0;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
}

.h .letter-frame::before {
    height: 28%;
    transform: translateX(calc(-50% + 2px));
}

.u .letter-frame::after, .h .letter-frame::after, .y .letter-frame::after {
    height: 32%;
    width: .4vh;
    top: 46%;
    bottom: unset;
    left: 38%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.y .letter-frame::after {
    left: 39%;
    top: 44%;
}

.h .letter-frame::after {
    top: 36%;
    left: 42%;
    height: 28%;
}

.h .letter-frame .h-bottom::before {
    content: "";

    height: 28%;
    width: .4vh;
    top: unset;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}

.h .letter-frame .h-bottom::after {
    height: 28%;
    width: .4vh;
    top: unset;
    left: unset;
    bottom: 9%;
    right: 40%;
    transform: translate(50%, -50%) rotate(45deg);
}

.letter-frame div.h-bottom, .letter-frame div.y-bottom {
    width: 100%;
    height: 100%;
    /* border-bottom: none; */
    background: transparent;
}

.letter-frame div.h-bottom {
    border-bottom: none;
}

.letter-frame div.y-bottom {
    border-left: .4vh solid black;
    border-right: .4vh solid black;
    bottom: -.4vh;
    width: 49%;
    height: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    overflow: visible;
    z-index: 5;
}

.y-bottom::before, .y-bottom::after {
    content: "";
    position: absolute;
    background: white;
    border-top: .4vh solid black;
    top: -86%;
    left: -135%;
    width: 100%;
    height: 200%;
    transform: rotate(45deg);
}

.y-bottom::after {
    left: unset;
    right: -135%;
    transform: rotate(-45deg);
}

.i .letter-frame {
    width: 52%;
    margin: 0 auto;
}


.s .letter-frame::before, .s .letter-frame::after {
    height: 40%;
    width: .4vh;
    top: unset;
    bottom: 6%;
    left: 10%;
    transform: rotate(65deg);
}

.s .letter-frame::after {
    top: 6%;
    bottom: unnset;
    left: unset;
    right: 10%;
}





.tl, .tr, .bl {
    width: 50%;
    height: 50%;
    transform: rotate(-45deg) translate(-10%, -85%);
    left: 0;
    top: 0;
}

.tr {
    transform: rotate(45deg) translate(10%, -80%);
    left: unset;
    right: 0;

}

.bl {
    top: unset;
    bottom: 0;
    transform: rotate(-135deg) translate(-6%, -85%);

}

.sq-r {
    width: 28%;
    height: 28%;
    border: .4vh solid black;
    left: unset;
    right: 0;
    top: 50%;
    transform: translate(calc(50% + 6px), -50%) rotate(-45deg);
}

.sq-b, .n .sq-b {
    width: 28%;
    height: 28%;
    border: solid black;
    border-width: 0 0 .4vh .4vh;
    left: 50%;
    right: unset;
    top: unset;
    bottom: 0;
    transform: translate(-50%, -.4vh) rotate(-45deg);
}




.sq-t, .n .sq-t {
    width: 28%;
    height: 28%;
    border: solid black;
    border-width: 0 0 .4vh .4vh;
    left: 50%;
    right: unset;
    top: 0;
    bottom: unset;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.n .sq-b, .n .sq-t {
    left: 60%;
    border-width: 0 0 0 .4vh;
    width: 37%;
    height: 42%;
}

.n .sq-b {
    left: 62%;
    width: 35%;
    height: 41%;
    background: transparent;
}

.n .sq-t {
    left: 55%;
    height: 32%;
    top: -.4vh;
}

.rect-br {
    background: white;
    position: absolute;
    width: 100%;
    height: 60%;
    bottom: 0;
    right: 0;
    left: unset;
    top: unset;
    transform: translate(50%, 50%);
    border-top: .4vh solid black;
    border-left: .4vh solid black;
}

/* .cap-off {
    border-top-width: 0;
}

.bum-off {
    border-bottom-width: 0;
} */