/* margin */

.m0 {margin: 0!important;}
.m1 {margin: 1rem!important;}
.m2 {margin: 2rem!important;}
.m3 {margin: 3rem!important;}
.m4 {margin: 4rem!important;}
.m5 {margin: 5rem!important;}
.m {margin: var(--space)!important;}
.mauto {margin: auto!important;}

.mx0 { margin-right: 0!important;margin-left: 0!important;}
.mx1 { margin-right: 1rem!important;margin-left: 1rem!important;}
.mx2 { margin-right: 2rem!important;margin-left: 2rem!important;}
.mx3 { margin-right: 3rem!important;margin-left: 3rem!important;}
.mx4 { margin-right: 4rem!important;margin-left: 4rem!important;}
.mx5 { margin-right: 5rem!important;margin-left: 5rem!important;}
.mx { margin-right: var(--space)!important;margin-left: var(--space)!important;}

.my0 {margin-top: 0!important; margin-bottom: 0!important;}
.my1 {margin-top: 1rem!important; margin-bottom: 1rem!important;}
.my2 {margin-top: 2rem!important; margin-bottom: 2rem!important;}
.my3 {margin-top: 3rem!important; margin-bottom: 3rem!important;}
.my4 {margin-top: 4rem!important; margin-bottom: 4rem!important;}
.my5 {margin-top: 5rem!important; margin-bottom: 5rem!important;}
.my {margin-top: var(--space)!important; margin-bottom: var(--space)!important;}

.mt0 {margin-top: 0!important;}
.mt1 {margin-top: 1rem!important;}
.mt2 {margin-top: 2rem!important;}
.mt3 {margin-top: 3rem!important;}
.mt4 {margin-top: 4rem!important;}
.mt5 {margin-top: 5rem!important;}
.mt10 {margin-top: 10rem!important;}
.mt {margin-top: var(--space)!important;}

.mb0 {margin-bottom: 0!important;}
.mb1 {margin-bottom: 1rem!important;}
.mb2 {margin-bottom: 2rem!important;}
.mb3 {margin-bottom: 3rem!important;}
.mb4 {margin-bottom: 4rem!important;}
.mb5 {margin-bottom: 5rem!important;}
.mb {margin-bottom: var(--space)!important;}

.ml0 {margin-left: 0!important;}
.ml1 {margin-left: 1rem!important;}
.ml2 {margin-left: 2rem!important;}
.ml3 {margin-left: 3rem!important;}
.ml4 {margin-left: 4rem!important;}
.ml5 {margin-left: 5rem!important;}
.ml {margin-left: var(--space)!important;}

.mr0 {margin-right: 0!important;}
.mr1 {margin-right: 1rem!important;}
.mr2 {margin-right: 2rem!important;}
.mr3 {margin-right: 3rem!important;}
.mr4 {margin-right: 4rem!important;}
.mr5 {margin-right: 5rem!important;}
.mr {margin-right: var(--space)!important;}

/* padding */

.p0 {padding: 0!important;}
.p1 {padding: 1rem!important;}
.p2 {padding: 2rem!important;}
.p3 {padding: 3rem!important;}
.p4 {padding: 4rem!important;}
.p5 {padding: 5rem!important;}
.p{padding: var(--space)!important;}

.px0 { padding-right: 0!important;padding-left: 0!important;}
.px1 { padding-right: 1rem!important;padding-left: 1rem!important;}
.px2 { padding-right: 2rem!important;padding-left: 2rem!important;}
.px3 {padding-right: 3rem!important;padding-left: 3rem!important;}
.px4 { padding-right: 4rem!important;padding-left: 4rem!important;}
.px5 { padding-right: 5rem!important;padding-left: 5rem!important;}
.px{ padding-right: var(--space)!important;padding-left: var(--space)!important;}

.py0 {padding-top: 0!important; padding-bottom: 0!important;}
.py1 {padding-top: 1rem!important; padding-bottom: 1rem!important;}
.py2 {padding-top: 2rem!important; padding-bottom: 2rem!important;}
.py3 {padding-top: 3rem!important; padding-bottom: 3rem!important;}
.py4 {padding-top: 4rem!important; padding-bottom: 4rem!important;}
.py5 {padding-top: 5rem!important; padding-bottom: 5rem!important;}
.py{ padding-top: var(--space)!important; padding-bottom: var(--space)!important;}

.pt0 {padding-top: 0!important;}
.pt1 {padding-top: 1rem!important;}
.pt2 {padding-top: 2rem!important;}
.pt3 {padding-top: 3rem!important;}
.pt4 {padding-top: 4rem!important;}
.pt5 {padding-top: 5rem!important;}
.pt{padding-top: var(--space)!important;}

.pb0 {padding-bottom: 0!important;}
.pb1 {padding-bottom: 1rem!important;}
.pb2 {padding-bottom: 2rem!important;}
.pb3 {padding-bottom: 3rem!important;}
.pb4 {padding-bottom: 4rem!important;}
.pb5 {padding-bottom: 5rem!important;}
.pb{padding-bottom: var(--space)!important;}

.pl0 {padding-left: 0!important;}
.pl1 {padding-left: 1rem!important;}
.pl2 {padding-left: 2rem!important;}
.pl3 {padding-left: 3rem!important;}
.pl4 {padding-left: 4rem!important;}
.pl5 {padding-left: 5rem!important;}
.pl{padding-left: var(--space)!important;}

.pr0 {padding-right: 0!important;}
.pr1 {padding-right: 1rem!important;}
.pr2 {padding-right: 2rem!important;}
.pr3 {padding-right: 3rem!important;}
.pr4 {padding-right: 4rem!important;}
.pr5 {padding-right: 5rem!important;}
.pr{padding-right: var(--space)!important;}

@media(max-width: 1199px){
    .xp{padding: var(--space)!important;}
    .xpt{padding-top: var(--space)!important;}
    .xpl{padding-left: var(--space)!important;}
    .xpr{padding-right: var(--space)!important;}
    .xpb{padding-bottom: var(--space)!important;}

    .xpt10{padding-top: 10rem!important;}

    .xp0{padding: 0!important;}
    .xpt0{padding-top: 0!important;}
    .xpl0{padding-left: 0!important;}
    .xpr0{padding-right: 0!important;}
    .xpb0{padding-bottom: 0!important;}


    [h]{max-height: none!important;}

}

/* heights */

[h]{max-height: 1080px;}

[h="15v"] { height: 15vh !important; }
[h="20v"] { height: 20vh !important; }
[h="25v"] { height: 25vh !important; }
[h="30v"] { height: 30vh !important; }
[h="35v"] {height: 35vh !important;}
[h="40v"] { height: 40vh !important; }
[h="45v"] { height: 45vh !important; }
[h="50v"] { height: 50vh !important; }
[h="55v"] { height: 55vh !important; }
[h="60v"] { height: 60vh !important; }
[h="65v"] { height: 65vh !important; }
[h="70v"] { height: 70vh !important; }
[h="75v"] { height: 75vh !important; }
[h="80v"] { height: 80vh !important; }
[h="85v"] { height: 85vh !important; }
[h="90v"] { height: 90vh !important; }
[h="95v"] { height: 95vh !important; }
[h="100v"] {height: 100vh;}



[h="5"] {height: 5rem !important;}
[h="10"] {height: 10rem !important;}
[h="15"] { height: 15rem !important; }
[h="20"] { height: 20rem !important; }
[h="25"] { height: 25rem !important; }
[h="30"] {height: 30rem !important;}
[h="35"] { height: 35rem !important; }
[h="40"] { height: 40rem !important; }
[h="45"] { height: 45rem !important; }
[h="50"] { height: 50rem !important; }
[h="55"] { height: 55rem !important; }
[h="60"] { height: 60rem !important; }
[h="65"] { height: 65rem !important; }
[h="70"] { height: 70rem !important; }
[h="75"] { height: 75rem !important; }
[h="80"] {height: 80rem !important;}
[h="85"] { height: 85rem !important; }
[h="90"] { height: 90rem !important; }
[h="95"] { height: 95rem !important; }
[h="100"] { height: 100rem !important; }



[h="5x"] { height: 5% !important; }
[h="10x"] { height: 10% !important; }
[h="15x"] { height: 15% !important; }
[h="20x"] { height: 20% !important; }
[h="25x"] { height: 25% !important; }
[h="30x"] { height: 30% !important; }
[h="35x"] { height: 35% !important; }
[h="40x"] { height: 40% !important; }
[h="45x"] { height: 45% !important; }
[h="50x"] { height: 50% !important; }
[h="55x"] { height: 55% !important; }
[h="60x"] { height: 60% !important; }
[h="65x"] { height: 65% !important; }
[h="70x"] { height: 70% !important; }
[h="75x"] { height: 75% !important; }
[h="80x"] { height: 80% !important; }
[h="85x"] { height: 85% !important; }
[h="90x"] { height: 90% !important; }
[h="95x"] { height: 95% !important; }
[h="100x"] {height: 100%!important;}

@media(max-width: 1199px){
    [h="100v"] {height: auto!important;}

    [xh="5"] {height: 5rem !important;}
    [xh="10"] { height: 10rem !important; }
    [xh="15"] { height: 15rem !important; }
    [xh="20"] { height: 20rem !important; }
    [xh="25"] { height: 25rem !important; }
    [xh="30"] {height: 30rem !important;}
    [xh="35"] { height: 35rem !important; }
    [xh="40"] { height: 40rem !important; }
    [xh="45"] { height: 45rem !important; }
    [xh="50"] {height: 50rem !important;}
    [xh="55"] { height: 55rem !important; }
    [xh="60"] { height: 60rem !important; }
    [xh="65"] { height: 65rem !important; }
    [xh="70"] { height: 70rem !important; }
    [xh="75"] { height: 75rem !important; }
    [xh="80"] { height: 80rem !important; }
    [xh="85"] { height: 85rem !important; }
    [xh="90"] { height: 90rem !important; }
    [xh="95"] { height: 95rem !important; }
    [xh="100"] { height: 100rem !important; } 
    [xh="auto"] { height: auto !important; } 


    [h]{max-height: none!important;}

}


/* widths */

[w]{max-width: 100vw !important;}

[w="15v"] { width: 15vw !important; }
[w="20v"] { width: 20vw !important; }
[w="25v"] { width: 25vw !important; }
[w="30v"] { width: 30vw !important; }
[w="35v"] { width: 35vw !important; }
[w="40v"] { width: 40vw !important; }
[w="45v"] { width: 45vw !important; }
[w="50v"] { width: 50vw !important; }
[w="55v"] { width: 55vw !important; }
[w="60v"] { width: 60vw !important; }
[w="65v"] { width: 65vw !important; }
[w="70v"] { width: 70vw !important; }
[w="75v"] { width: 75vw !important; }
[w="80v"] { width: 80vw !important; }
[w="85v"] { width: 85vw !important; }
[w="90v"] { width: 90vw !important; }
[w="95v"] { width: 95vw !important; }
[w="100v"] { width: 100vw !important; }


[w="5"] { width: 5rem !important; }
[w="10"] {width: 10rem !important;}
[w="15"] { width: 15rem !important; }
[w="20"] { width: 20rem !important; }
[w="25"] { width: 25rem !important; }
[w="30"] { width: 30rem !important; }
[w="35"] { width: 35rem !important; }
[w="40"] { width: 40rem !important; }
[w="45"] { width: 45rem !important; }
[w="50"] { width: 50rem !important; }
[w="55"] { width: 55rem !important; }
[w="60"] { width: 60rem !important; }
[w="65"] { width: 65rem !important; }
[w="70"] { width: 70rem !important; }
[w="75"] { width: 75rem !important; }
[w="80"] { width: 80rem !important; }
[w="85"] { width: 85rem !important; }
[w="90"] { width: 90rem !important; }
[w="95"] { width: 95rem !important; }
[w="100"] { width: 100rem !important; }


[w="5x"] { width: 5% !important; }
[w="10x"] { width: 10% !important; }
[w="15x"] { width: 15% !important; }
[w="20x"] { width: 20% !important; }
[w="25x"] { width: 25% !important; }
[w="30x"] { width: 30% !important; }
[w="35x"] { width: 35% !important; }
[w="40x"] { width: 40% !important; }
[w="45x"] { width: 45% !important; }
[w="50x"] { width: 50% !important; }
[w="55x"] { width: 55% !important; }
[w="60x"] { width: 60% !important; }
[w="65x"] { width: 65% !important; }
[w="70x"] { width: 70% !important; }
[w="75x"] { width: 75% !important; }
[w="80x"] { width: 80% !important; }
[w="85x"] { width: 85% !important; }
[w="90x"] { width: 90% !important; }
[w="95x"] { width: 95% !important; }
[w="100x"] { width: 100% !important; }


/* ordering */

.first{order: 0;}
.o1{order: 1;}
.o2{order: 2;}
.o3{order: 3;}
.o4{order: 4;}
.o5{order: 5;}
.o6{order: 6;}
.o7{order: 7;}
.o8{order: 8;}
.o9{order: 9;}
.o10{order: 10;}
.o11{order: 11;}
.o12{order: 12;}
.last{order: 13;}

@media (min-width: 1200px) {
    .first{order: 0;}
    .o1{order: 0;}
    .o2{order: 0;}
    .o3{order: 0;}
    .o4{order: 0;}
    .o5{order: 0;}
    .o6{order: 0;}
    .o7{order: 0;}
    .o8{order: 0;}
    .o9{order: 0;}
    .o10{order: 0;}
    .o11{order: 0;}
    .o12{order: 0;}
    .last{order: 0;}
}

/* radius */

.r {border-radius: var(--radius-big);}
.rl {border-radius: var(--radius-big) 0 0 var(--radius-big)!important;}
.rr {border-radius: 0 var(--radius-big) var(--radius-big) 0!important;}
.rt {border-radius: var(--radius-big) var(--radius-big) 0 0!important;}
.rb {border-radius: var(--radius-big) var(--radius-big) 0 0!important;}
.r0 {border-radius: 0!important;}

/* border */

.b{border: var(--border)!important;}
.bl{border-left: var(--border)!important;}
.br{border-right: var(--border)!important;}
.bt{border-top: var(--border)!important;}
.bb{border-bottom: var(--border)!important;}
.b0{border: none!important;}


/* centering */

.centerX{justify-content: center;}
.centerY{align-items: center;}
.center{top: 50%;left: 50%;transform: translate(-50%,-50%);}

.endX{justify-content: end;/* align-items: end; */}
.endY{align-items: flex-end;}

.startX{justify-content: flex-start;}
.startY{align-items: flex-start;}

/* alignment */

.bottom{align-items: end;}

/* display type */

.flex{display: flex;}
.block{display: block;}
.inline{display: inline;}
.no{display: none!important;}

/* flex */

.flexRow{
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
}

.flexColumn{
    display: flex;
    flex-flow: column wrap;
}

.between{
    justify-content: space-between;
}

/* opacity */

[o="0"]{opacity: 0;}
[o="25"]{opacity: .25;}
[o="50"]{opacity: .5;}
[o="75"]{opacity: .75;}
[o="100"]{opacity: 1;}

/* utility classes */

.error{
    color: var(--negative)!important;
    background: var(--negative-opaque)!important;
    border-color: var(--negative)!important;
    opacity: 1!important;
}

.success{
    color: var(--positive)!important;
    background: var(--positive-opaque)!important;
    border-color: var(--positive)!important;
    opacity: 1!important;
}

/* POSITVE & NEGATIVE */
.positive, .negative{
    position: relative;
    overflow: hidden;
    background-color: transparent!important;
    border: solid transparent .1rem;
    transition: var(--quick);
}

.positive::after, .negative::after{
    content: '';
    bottom: 0;
    left: 0;
    z-index: -1;
    transform: scale(0);
    height: 100%;
    width: 100%;
    background-color: var(--positive-opaque)!important;
    border-radius: 15rem;
    opacity: 0;
}

.negative::after{
    background-color: var(--negative-opaque)!important;
}

.positive:hover::after, .negative:hover::after{
    transform: scale(100%);
    border-radius: 0;
    opacity: 1;
}



.positive > i, .negative > i{
    transition: var(--quick);

}

.negative:hover{
    color: var(--negative)!important;
    opacity: 1!important;
    /* border-color: var(--negative)!important; */
}

.negative:hover > i{
    color: var(--negative)!important;
    opacity: 1!important;
}

.positive:hover{
    color: var(--positive)!important;
    opacity: 1!important;
    /* border-color: var(--positive)!important; */
}

.positive:hover > i{
    color: var(--positive)!important;
    opacity: 1!important;
}

.code{ color: var(--positive);font-family: monospace!important;}
.hide{display: none!important;}
.opaque{opacity: 0!important;}
.faded{filter: blur(5px)!important;opacity: .75!important;}
.blurred{filter: blur(5px)!important;}

.blurContent > *{filter: blur(2px);}

.blurred.faded{filter: blur(10px)!important;}

/* shadows */

.shadow{/* box-shadow: var(--shadow); */height: 10rem;background: var(--extracolor);}

/* media */

.cover{object-fit: cover!important;}
.contain{object-fit: contain!important;}

.objectLeft{object-position: left;}
.objectRight{object-position: right;}

/* positions */

.relative{position: relative!important;}
.absolute{position: absolute!important;}

/* text */

.textLeft{text-align: left;}
.textRight{text-align: right;}
.textCenter{text-align: center;}
.textJustify{text-align: justify;}

.italic{font-style: italic;}
.underline{text-decoration: underline;text-decoration-color: var(--accentcolor);text-underline-offset: 5%;}
sup{font-size: 1.25rem;}
code{
    display: block;
    padding: 2rem;
    margin: calc(var(--space)/2) 0;
    color: var(--positive);
    font-size: 1.5rem;
    text-align: left;
    background: var(--darkcolor);
    border-radius: var(--radius);
    hyphens: none;
}
.quote{
    display: block;
    padding-left: calc(var(--space)/2);
    margin: calc(var(--space)/1) 0 calc(var(--space)/1);
    text-align: left;
    hyphens: none;
    font-size: 2.5rem;
    font-weight: 400;
    border-left: solid var(--accentcolor) .5rem;
}

.s{font-size:calc(var(--p-size) * 1rem);}
.s1{font-size: 1.5rem!important;}
.s2{font-size: 2rem!important;}
.s3{font-size: 2.5rem!important;}
.s4{font-size: 3rem!important;}
.s5{font-size: 3.5rem!important;}
.s6{font-size: 4rem!important;}
.s7{font-size: 4.5rem!important;}
.s8{font-size: 5rem!important;}
.s9{font-size: 5.5rem!important;}
.s10{font-size: 6rem!important;}

.t1{font-weight: 100;}
.t2{font-weight: 200;}
.t3{font-weight: 400;}
.t4{font-weight: 400;}
.t5{font-weight: 500;}

/* overflow */

.hideOverflow{overflow: hidden;}
.showOverflow{overflow: visible;}

/* borders */

.borderTop{border-top: solid var(--lightopaque);}
.borderRight{border-right: solid var(--lightopaque);}
.borderBottom{border-bottom: solid var(--lightopaque);}
.borderLeft{border-left: solid var(--lightopaque);}

.hyphens{hyphens: auto;}

/* VISIBILITY SETTINGS */

[d="show"]{visibility: visible;}

@media(max-width: 1199px){
    [xd="hide"]{display: none!important;}
}

/* UTILITARIAN */
.noTransition{transition: none!important;}
.noSelection{user-select: none!important;}

/* MASKING */
.fadeHorizontal{
    mask-image: linear-gradient(90deg,transparent, black 10%, black 90%, transparent)
}

.dark{
    color: var(--darkcolor)!important;
}