:root {
    --border-one: 5px;
    --oct-one-corner: 20px;
    --oct-one-padding: 10px;

    --border-two: 3px;
    --oct-two-corner: 20px;
    --oct-two-padding-top: 10px;
    --oct-two-padding-left: 20px;
    --oct-two-br-corner: 70px;
}

.Card {
    width: 100%;
}

.Card2 {
    width: 100%;
    height: 100%;

    background: rgba(66, 181, 135, 0.5);
    backdrop-filter: blur(20px);
    clip-path: polygon(25px 0px,
            0px 15px,
            0 calc(100% - 45px),
            45px 100%,
            calc(100% - 15px) 100%,
            100% calc(100% - 15px),
            100% 75px,
            calc(100% - 75px) 0px);
}

.border-one {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    right: var(--oct-one-padding);
    bottom: var(--oct-one-padding);
    z-index: 99;


}

.border-two {
    background-color: black;
    position: absolute;
    top: var(--oct-two-padding-top);
    left: var(--oct-two-padding-left);
    right: 0px;
    bottom: 0px;
    z-index: 99;
}

.content {
    color: black;
    padding: 13px 15px var(--oct-two-padding-top) 20px;
    background-color: rgba(255, 255, 255, 0.308);
    backdrop-filter: blur(20px);
    clip-path: polygon(var(--oct-two-padding-left) calc(var(--oct-two-padding-top) + var(--oct-two-corner)),
            var(--oct-two-padding-left) calc(100% - var(--oct-one-padding) - var(--oct-one-corner)/2),
            calc(var(--oct-two-padding-left) + var(--oct-one-corner)/2) calc(100% - var(--oct-one-padding)),
            calc(100% - var(--oct-two-br-corner) + var(--oct-one-padding)) calc(100% - var(--oct-one-padding)),
            calc(100% - var(--oct-one-padding)) calc(100% - var(--oct-two-br-corner) + var(--oct-one-padding)),
            calc(100% - var(--oct-one-padding)) var(--oct-one-corner),
            calc(100% - var(--oct-one-padding) - var(--oct-one-corner)/2) calc(var(--oct-one-corner)/2),
            calc(var(--oct-two-padding-left) + var(--oct-two-corner)) var(--oct-two-padding-top));
}

.Octagon-border-one {
    clip-path: polygon(0 var(--oct-one-corner),
            0 calc(100% - var(--oct-one-corner) + var(--border-one)/2),
            var(--oct-one-corner) 100%,
            calc(var(--oct-one-corner) + var(--border-one)/2) calc(100% - var(--border-one)),
            var(--border-one) calc(100% - var(--oct-one-corner)),
            var(--border-one) calc(var(--oct-one-corner) + var(--border-one)/2),
            calc(var(--oct-one-corner) + var(--border-one)/2) var(--border-one),
            calc(100% - var(--oct-one-corner) - var(--border-one)/2) var(--border-one),
            calc(100% - var(--border-one)) calc(var(--oct-one-corner) + var(--border-one)/2),
            calc(100% - var(--border-one)) calc(100% - var(--oct-one-corner) - var(--border-one)/2),
            calc(100% - var(--oct-one-corner) - var(--border-one)/2) calc(100% - var(--border-one)),
            var(--oct-one-corner) calc(100% - var(--border-one)),
            var(--oct-one-corner) 100%,
            calc(100% - var(--oct-one-corner)) 100%,
            100% calc(100% - var(--oct-one-corner)),
            100% var(--oct-one-corner),
            calc(100% - var(--oct-one-corner)) 0,
            var(--oct-one-corner) 0,
            0 var(--oct-one-corner));
}

.Octagon-border-two {
    clip-path: polygon(0 var(--oct-two-corner),
            0 calc(100% - var(--oct-two-corner) + var(--border-two)/2),
            var(--oct-two-corner) 100%,
            calc(var(--oct-two-corner) + var(--border-two)/2) calc(100% - var(--border-two)),
            var(--border-two) calc(100% - var(--oct-two-corner)),
            var(--border-two) calc(var(--oct-two-corner) + var(--border-two)/2),
            calc(var(--oct-two-corner) + var(--border-two)/2) var(--border-two),
            calc(100% - var(--oct-two-corner) - var(--border-two)/2) var(--border-two),
            calc(100% - var(--border-two)) calc(var(--oct-two-corner) + var(--border-two)/2),
            calc(100% - var(--border-two)) calc(100% - var(--oct-two-br-corner) - var(--border-two)/2),
            calc(100% - var(--oct-two-br-corner) - var(--border-two)/2) calc(100% - var(--border-two)),
            var(--oct-two-corner) calc(100% - var(--border-two)),
            var(--oct-two-corner) 100%,
            calc(100% - var(--oct-two-br-corner)) 100%,
            100% calc(100% - var(--oct-two-br-corner)),
            100% var(--oct-two-corner),
            calc(100% - var(--oct-two-corner)) 0,
            var(--oct-two-corner) 0,
            0 var(--oct-two-corner));
}

.orn-one {
    background-color: black;
    height: 75px;
    width: 15px;
    clip-path: polygon(0% 0%,
            100% 15px,
            100% 60px,
            0% 100%);
}

.orn-pos-one {
    position: absolute;
    left: 0;
    top: calc(var(--oct-one-corner) + 60px);
}

.orn-pos-two {
    position: absolute;
    right: -15px;
    bottom: calc(var(--oct-two-br-corner));
}


.orn-two {
    background-color: black;
    height: 20px;
    width: 200px;
    clip-path: polygon(0% 0%,
            100% 0%,
            180px 100%,
            20px 100%);
}

.orn-pos-three {
    position: absolute;
    left: var(--oct-one-corner);
    bottom: calc(var(--oct-one-padding) - 20px);
}