.layer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

.margin-top-33 {
    margin-top: 33.3%;
}
.margin-top-50 {
    margin-top: 50%;
}
.margin-top-66 {
    margin-top: 66.6%;
}
.quad-25 {
    width: 25%;
    aspect-ratio: 1/1;
}
.quad-33 {
    width: 33.3%;
    aspect-ratio: 1/1;
}
.quad-50 {
    width: 50%;
    aspect-ratio: 1/1;
}
.quad-66 {
    width: 66.6%;
    aspect-ratio: 1/1;
}
.quad-75 {
    width: 75%;
    aspect-ratio: 1/1;
}
.quad-100 {
    width: 100%;
    aspect-ratio: 1/1;
}

@media (max-width: 1024px) {
    .quad-100 {
        width: 80%;
        aspect-ratio: 1/1;
    }
}
.quad-200 {
    width: 200%;
    height: 200%;
    /* aspect-ratio: 1/1; */
}
.width-33 {
    width: 33.3%;
}
.width-50 {
    width: 50%;
}
.width-66 {
    width: 66.6%;
}
.width-100 {
    width: 100%;
}
.width-200 {
    width: 200%;
}
.height-33 {
    height: 33.3%;
}
.height-50 {
    height: 50%;
}
.heigh-66 {
    height: 66.6%;
}
.height-100 {
    height: 100%;
}
.height-200 {
    height: 200%;
}
.bottom-0 {
    bottom: 0;
}
.bottom-10 {
    bottom: 10%;
}
.bottom-25 {
    bottom: 25%;
}
.bottom-33 {
    bottom: 33.3%;
}
.top-0 {
    top: 0;
}
.top-10 {
    top: 10%;
}
.top-25 {
    top: 25%;
}
.top-33 {
    top: 33.3%;
}
.left-0 {
    left: 0;
}
.left-10 {
    left: 10%;
}
.left-25 {
    left: 25%;
}
.left-33 {
    left: 33.3%;
}
.right-0 {
    right: 0;
}
.right-10 {
    right: 10%;
}
.right-25 {
    right: 25%;
}
.right-33 {
    right: 33.3%;
}
.green {
    box-shadow: 0 0 5vmin 0.5vmin rgba(0, 255, 0, 0.25), inset 0 0 2vmin 1vmin rgba(0, 255, 0, 0.5);
    position: absolute;
    overflow: hidden;
}
.innergreen {
    box-shadow: inset 0 0 2.5vmin 0.5vmin rgba(0, 255, 0, 0.5);
    position: absolute;
}
.outergreen {
    box-shadow: 0 0 5vmin 0.5vmin rgba(0, 255, 0, 0.25);
    position: absolute;
}
hr.green,
.greenBorder {
    border: rgba(0, 255, 0, 0.25) 1px solid;
}
.red {
    position: absolute;
    box-shadow: 0 0 5vmin 0.5vmin rgba(255, 0, 0, 0.25), inset 0 0 2vmin 1vmin rgba(255, 0, 0, 0.5);
    /* border: rgba(255, 0, 0, 1) 1px solid; */
    overflow: hidden;
}
.innerred {
    position: absolute;
    box-shadow: inset 0 0 2.5vmin 0.5vmin rgba(255, 0, 0, 0.5);
}
.outerred {
    position: absolute;
    box-shadow: 0 0 5vmin 0.5vmin rgba(255, 0, 0, 0.25);
}
hr.red,
.redBorder {
    border: rgba(255, 0, 0, 1) 1px solid;
}
.blue {
    position: absolute;
    box-shadow: 0 0 5vmin 0.5vmin rgba(0, 0, 255, 0.25), inset 0 0 2vmin 1vmin rgba(0, 0, 255, 0.5);
    /* border: rgba(0, 0, 255, 1) 1px solid; */
                    overflow: hidden;
}
.blue .blue {
    position: absolute;
    box-shadow: 0 0 5vmin 0.5vmin rgba(0, 0, 255, 0.25), inset 0 0 2vmin 1vmin rgba(0, 0, 255, 0.25);
    /* border: rgba(0, 0, 255, 1) 1px solid; */
}
.innerblue {
    position: absolute;
    box-shadow: inset 0 0 2.5vmin 0.5vmin rgba(0, 0, 255, 0.5);
}
.outerblue {
    box-shadow: 0 0 5vmin 0.5vmin rgba(0, 0, 255, 1);
    position: absolute;
}
hr.blue,
.blueBorder {
    border: rgba(0, 0, 255, 1) 1px solid;
}
.white {
    position: absolute;
    box-shadow: 0 0 5vmin 0.5vmin rgba(255, 255, 255, 0.25), inset 0 0 2vmin 1vmin rgba(255, 255, 255, 0.5);
    /* border: rgba(255, 255, 255, 1) 1px solid; */
    overflow: hidden;
}
.absolute {
    position: absolute;
}
.innerwhite {
    position: absolute;
    box-shadow: inset 0 0 2.5vmin 0.5vmin rgba(255, 255, 255, 0.5);
}
.bgred {
    background-color: rgba(255, 0, 0, 0.2);
}
.bggreen {
    background-color: rgba(0, 255, 0, 0.2);
}
.bgblue {
    background-color: rgba(0, 0, 255, 0.2);
}
.bgwhite {
    background-color: rgba(255, 255, 255, 0.2);
}
.bgblack {
    background-color: rgba(0, 0, 0, 0.2);
}
.bgredgradient {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.bgredgradient-left {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.bgredgradient-right {
    background-image: linear-gradient(to left, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

.bgtranstoredgradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.9));
}
.bgtranstoredgradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.9));
}
.bgtranstoredgradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.9));
}

.bgredtotransgradient {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.bgredtotransgradient-left {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.bgredtotransgradient-right {
    background-image: linear-gradient(to left, rgba(255, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

.bggreengradient {
    background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}
.bggreengradient-left {
    background-image: linear-gradient(to right, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}
.bggreengradient-right {
    background-image: linear-gradient(to left, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}

.bgtransrogreengradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.9));
}
.bgtransrogreengradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.9));
}
.bgtransrogreengradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.9));
}

.bggreentotransgradient {
    background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}
.bggreentotransgradient-left {
    background-image: linear-gradient(to right, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}
.bggreentotransgradient-right {
    background-image: linear-gradient(to left, rgba(0, 255, 0, 0.9), rgba(0, 0, 0, 0));
}

.bgbluegradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}
.bgbluegradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}
.bgbluegradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}

.bgbluetotransgradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}
.bgbluetotransgradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}
.bgbluetotransgradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}

.bgtranstobluegradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 255, 0.9));
}
.bgtranstobluegradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 255, 0.9));
}
.bgtranstobluegradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 255, 0.9), rgba(0, 0, 0, 0));
}
.bgwhitegradient {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
.bgwhitegradient-left {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
.bgwhitegradient-right {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}

.bgwhitetotransgradient {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
.bgwhitetotransgradient-left {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}
.bgwhitetotransgradient-right {
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0));
}

.bgtranstowhitegradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.25));
}
.bgtranstowhitegradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.25));
}
.bgtranstowhitegradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.25));
}

.bgblackgradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.bgblackgradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.bgblackgradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.bgtranstoblackgradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.bgtranstoblackgradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.bgtranstoblackgradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.bgblacktotransgradient {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.bgblacktotransgradient-left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.bgblacktotransgradient-right {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.angle-45 {
    transform: rotateY(0deg) rotate(-45deg);
}
.angle45 {
    transform: rotateY(0deg) rotate(45deg);
}
.angle90 {
    transform: rotateY(0deg) rotate(90deg);
}
.rotate3d-1 {
    transform:
        perspective(1000px)
        rotateX(4deg)
        rotateY(-16deg)
        rotateZ(4deg);
}
div {
    /* box-shadow: 1vmin 1vmin 5vmin 0.5vmin rgba(0, 0, 0, 0.5) !important; */
}
.op10 {
    opacity: 0.1;
}
.op20 {
    opacity: 0.2;
}
.op30 {
    opacity: 0.3;
}
.op40 {
    opacity: 0.4;
}
.op50 {
    opacity: 0.5;
}
.op60 {
    opacity: 0.6;
}
.op70 {
    opacity: 0.7;
}
.op80 {
    opacity: 0.8;
}
.op90 {
    opacity: 0.9;
}
.op100 {
    opacity: 1;
}