.container-wrapper {
    max-width: 100%;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    padding: var(--rr-size-lg);
}

.width-0 {
    width: 0%;
}

.width-50 {
    width: 100%;
}

.width-100 {
    width: 100%;
}

.width-120 {
    width: 120%;
}

.width-134 {
    width: 134%;
}

.width-max-content {
    width: max-content;
}

.height-0 {
    height: 0%;
}

.height-auto {
    height: auto;
}


/* Display */

.flex {
    display: flex;
}

.flex-basis-10 {
    flex-basis: 10%;
}

.flex-basis-20 {
    flex-basis: 20%;
}

.flex-basis-25 {
    flex-basis: 25%;
}

.flex-basis-33 {
    flex-basis: 33%;
}

.flex-basis-40 {
    flex-basis: 40%;
}

.flex-basis-50 {
    flex-basis: 50%;
}

.flex-basis-60 {
    flex-basis: 60%;
}

.flex-basis-75 {
    flex-basis: 75%;
}

.flex-basis-80 {
    flex-basis: 80%;
}

.flex-basis-90 {
    flex-basis: 90%;
}

.flex-basis-100 {
    flex-basis: 100%;
}


/* Opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-25 {
    opacity: .25;
}

.opacity-50 {
    opacity: .5;
}

.opacity-75 {
    opacity: .75;
}

.opacity-100 {
    opacity: 1;
}

/* Sepia Filter */
.sepia-50 {
    filter: sepia(50%);
}

.sepia-100 {
    filter: sepia(1);
}

/* FLEX */

.flex-full {
    flex: 0 0 100%;
}

.row {
    display: flex;
    flex-direction: row;
}

.row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.grow-1 {
    flex-grow: 1;
}

.grow-2 {
    flex-grow: 2;
}

.col {
    display: flex;
    flex-direction: column;
}

.col-reverse {
    display: flex;
    flex-direction: column-reverse;
}

.wrap {
    flex-wrap: wrap;
}

.wrap-reverse {
    flex-wrap: wrap-reverse;
}

.align-item-start {
    align-items: start;
}

.align-item-center {
    align-items: center;
}

.align-item-end {
    align-items: end;
}

.align-self-start {
    align-self: start;
}

.align-self-center {
    align-self: center;
}

.align-self-end {
    align-self: end;
}

.align-content-start {
    align-content: start;
}

.align-content-center {
    align-content: center;
}

.align-content-end {
    align-content: end;
}

.justify-start {
    justify-content: start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

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

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

.col-reverse {
    flex-direction: column-reverse;
}

/* ===== */

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.z-index-3 {
    z-index: 3;
}

.z-index-4 {
    z-index: 4;
}

.z-index-20 {
    z-index: 20;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-auto {
    overflow: auto;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;

}


/* Text */

.text-no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    border: 1px solid black;
    padding: 10px;
}


.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-theme-light {
    color: var(--rr-text-color-);
}

.text-theme-brand {
    color: var(--rr-text-color-brand);
}

.uppercase {
    text-transform: uppercase;
}

.letter-space-1-25 {
    letter-spacing: 1.25px;
}

.text-color-primary {
    color: var(--rr-text-color-primary);
}

.text-color-secondary {
    color: var(--rr-text-color-secondary);
}

.word-break-all {
    word-break: break-all;

}

.word-wrap {
    word-wrap: break-word;
}

.text-medium {
    font-weight: 500;
}

.text-bold {
    font-weight: 700;
}



/* Images */
.img-container {
    width: 100%;
}

.img-100 {
    width: 100%;
}

.img-90 {
    width: 90%;
}

.img-75 {
    width: 75%;
}

.img-multiply {
    mix-blend-mode: multiply;
}


/* Sizing and spacing */
.height-100vh {
    height: 100vh;
}

.gap-1 {
    gap: var(--rr-size-sm-4x);
}

.gap-2 {
    gap: var(--rr-size-sm-3x);
}

.gap-3 {
    gap: var(--rr-size-sm-2x);
}

.gap-4 {
    gap: var(--rr-size-sm);
}

.gap-5 {
    gap: var(--rr-size-md);
}

.gap-6 {
    gap: var(--rr-size-lg);
}

.gap-7 {
    gap: var(--rr-size-xl);
}

.gap-8 {
    gap: var(--rr-size-xl-2x);
}

.gap-9 {
    gap: var(--rr-size-xl-3x);
}

.gap-10 {
    gap: var(--rr-size-xl-4x);
}

.gap-11 {
    gap: var(--rr-size-xl-5x);
}

.gap-12 {
    gap: var(--rr-size-xl-6x);
}

.gap-13 {
    gap: var(--rr-size-xl-7x);
}

.size-1 {
    font-size: var(--rr-size-sm-4x);
}

.size-2 {
    font-size: var(--rr-size-sm-3x);
}

.size-3 {
    font-size: var(--rr-size-sm-2x);
}

.size-4 {
    font-size: var(--rr-size-sm);
}

.size-5 {
    font-size: var(--rr-size-md);
}

.size-6 {
    font-size: var(--rr-size-lg);
}

.size-7 {
    font-size: var(--rr-size-xl);
}

.size-8 {
    font-size: var(--rr-size-xl-2x);
}

.size-9 {
    font-size: var(--rr-size-xl-3x);
}

.size-10 {
    font-size: var(--rr-size-xl-4x);
}

.size-11 {
    font-size: var(--rr-size-xl-5x);
}

.size-12 {
    font-size: var(--rr-size-xl-6x);
}

.size-13 {
    font-size: var(--rr-size-xl-7x);
}

.padd-0 {
    padding: 0;
}

.padd-1 {
    padding: var(--rr-size-sm-4x);
}

.padd-2 {
    padding: var(--rr-size-sm-3x);
}

.padd-3 {
    padding: var(--rr-size-sm-2x);
}

.padd-4 {
    padding: var(--rr-size-sm);
}

.padd-5 {
    padding: var(--rr-size-md);
}

.padd-6 {
    padding: var(--rr-size-lg);
}

.padd-7 {
    padding: var(--rr-size-xl);
}

.padd-8 {
    padding: var(--rr-size-xl-2x);
}

.padd-9 {
    padding: var(--rr-size-xl-3x);
}

.padd-10 {
    padding: var(--rr-size-xl-4x);
}

.padd-11 {
    padding: var(--rr-size-xl-5x);
}

.padd-12 {
    padding: var(--rr-size-xl-6x);
}

.padd-13 {
    padding: var(--rr-size-xl-7x);
}

.padd-y-1 {
    padding: var(--rr-size-sm-4x) 0;
}

.padd-y-2 {
    padding: var(--rr-size-sm-3x) 0;
}

.padd-y-3 {
    padding: var(--rr-size-sm-2x) 0;
}

.padd-y-4 {
    padding: var(--rr-size-sm) 0;
}

.padd-y-5 {
    padding: var(--rr-size-md) 0;
}

.padd-y-6 {
    padding: var(--rr-size-lg) 0;
}

.padd-y-7 {
    padding: var(--rr-size-xl) 0;
}

.padd-y-8 {
    padding: var(--rr-size-xl-2x) 0;
}

.padd-y-9 {
    padding: var(--rr-size-xl-3x) 0;
}

.padd-y-10 {
    padding: var(--rr-size-xl-4x) 0;
}

.padd-y-11 {
    padding: var(--rr-size-xl-5x) 0;
}

.padd-y-12 {
    padding: var(--rr-size-xl-6x) 0;
}

.padd-y-13 {
    padding: var(--rr-size-xl-7x) 0;
}

.padd-y-b-1 {
    padding: 0 0 var(--rr-size-sm-4x) 0;
}

.padd-y-b-2 {
    padding: 0 0 var(--rr-size-sm-3x) 0;
}

.padd-y-b-3 {
    padding: 0 0 var(--rr-size-sm-2x) 0;
}

.padd-y-b-4 {
    padding: 0 0 var(--rr-size-sm) 0;
}

.padd-y-b-5 {
    padding: 0 0 var(--rr-size-md) 0;
}

.padd-y-b-6 {
    padding: 0 0 var(--rr-size-lg) 0;
}

.padd-y-b-7 {
    padding: 0 0 var(--rr-size-xl) 0;
}

.padd-y-b-8 {
    padding: 0 0 var(--rr-size-xl-2x) 0;
}

.padd-y-b-9 {
    padding: 0 0 var(--rr-size-xl-3x) 0;
}

.padd-y-b-10 {
    padding: 0 0 var(--rr-size-xl-4x) 0;
}

.padd-y-b-11 {
    padding: 0 0 var(--rr-size-xl-5x) 0;
}

.padd-y-b-12 {
    padding: 0 0 var(--rr-size-xl-6x) 0;
}

.padd-y-b-13 {
    padding: 0 0 var(--rr-size-xl-7x) 0;
}

.padd-y-t-1 {
    padding: var(--rr-size-sm-4x) 0 0 0;
}

.padd-y-t-2 {
    padding: var(--rr-size-sm-3x) 0 0 0;
}

.padd-y-t-3 {
    padding: var(--rr-size-sm-2x) 0 0 0;
}

.padd-y-t-4 {
    padding: var(--rr-size-sm) 0 0 0;
}

.padd-y-t-5 {
    padding: var(--rr-size-md) 0 0 0;
}

.padd-y-t-6 {
    padding: var(--rr-size-lg) 0 0 0;
}

.padd-y-t-7 {
    padding: var(--rr-size-xl) 0 0 0;
}

.padd-y-t-8 {
    padding: var(--rr-size-xl-2x) 0 0 0;
}

.padd-y-t-9 {
    padding: var(--rr-size-xl-3x) 0 0 0;
}

.padd-y-t-10 {
    padding: var(--rr-size-xl-4x) 0 0 0;
}

.padd-y-t-11 {
    padding: var(--rr-size-xl-5x) 0 0 0;
}

.padd-y-t-12 {
    padding: var(--rr-size-xl-6x) 0 0 0;
}

.padd-y-t-13 {
    padding: var(--rr-size-xl-7x) 0 0 0;
}

.padd-x-1 {
    padding: 0 var(--rr-size-sm-4x);
}

.padd-x-2 {
    padding: 0 var(--rr-size-sm-3x);
}

.padd-x-3 {
    padding: 0 var(--rr-size-sm-2x);
}

.padd-x-4 {
    padding: 0 var(--rr-size-sm);
}

.padd-x-5 {
    padding: 0 var(--rr-size-md);
}

.padd-x-6 {
    padding: 0 var(--rr-size-lg);
}

.padd-x-7 {
    padding: 0 var(--rr-size-xl);
}

.padd-x-8 {
    padding: 0 var(--rr-size-xl-2x);
}

.padd-x-9 {
    padding: 0 var(--rr-size-xl-3x);
}

.padd-x-10 {
    padding: 0 var(--rr-size-xl-4x);
}

.padd-x-11 {
    padding: 0 var(--rr-size-xl-5x);
}

.padd-x-12 {
    padding: 0 var(--rr-size-xl-6x);
}

.padd-x-13 {
    padding: 0 var(--rr-size-xl-7x);
}

.marg-0 {
    margin: 0;
}

.marg-1 {
    margin: var(--rr-size-sm-4x);
}

.marg-2 {
    margin: var(--rr-size-sm-3x);
}

.marg-3 {
    margin: var(--rr-size-sm-2x);
}

.marg-4 {
    margin: var(--rr-size-sm);
}

.marg-5 {
    margin: var(--rr-size-md);
}

.marg-6 {
    margin: var(--rr-size-lg);
}

.marg-7 {
    margin: var(--rr-size-xl);
}

.marg-8 {
    margin: var(--rr-size-xl-2x);
}

.marg-9 {
    margin: var(--rr-size-xl-3x);
}

.marg-10 {
    margin: var(--rr-size-xl-4x);
}

.marg-11 {
    margin: var(--rr-size-xl-5x);
}

.marg-12 {
    margin: var(--rr-size-xl-6x);
}

.marg-13 {
    margin: var(--rr-size-xl-7x);
}

.marg-y-1 {
    margin: var(--rr-size-sm-4x) 0;
}

.marg-y-2 {
    margin: var(--rr-size-sm-3x) 0;
}

.marg-y-3 {
    margin: var(--rr-size-sm-2x) 0;
}

.marg-y-4 {
    margin: var(--rr-size-sm) 0;
}

.marg-y-5 {
    margin: var(--rr-size-md) 0;
}

.marg-y-6 {
    margin: var(--rr-size-lg) 0;
}

.marg-y-7 {
    margin: var(--rr-size-xl) 0;
}

.marg-y-8 {
    margin: var(--rr-size-xl-2x) 0;
}

.marg-y-9 {
    margin: var(--rr-size-xl-3x) 0;
}

.marg-y-10 {
    margin: var(--rr-size-xl-4x) 0;
}

.marg-y-11 {
    margin: var(--rr-size-xl-5x) 0;
}

.marg-y-12 {
    margin: var(--rr-size-xl-6x) 0;
}

.marg-y-13 {
    margin: var(--rr-size-xl-7x) 0;
}

.marg-x-1 {
    margin: 0 var(--rr-size-sm-4x);
}

.marg-x-2 {
    margin: 0 var(--rr-size-sm-3x);
}

.marg-x-3 {
    margin: 0 var(--rr-size-sm-2x);
}

.marg-x-4 {
    margin: 0 var(--rr-size-sm);
}

.marg-x-5 {
    margin: 0 var(--rr-size-md);
}

.marg-x-6 {
    margin: 0 var(--rr-size-lg);
}

.marg-x-7 {
    margin: 0 var(--rr-size-xl);
}

.marg-x-8 {
    margin: 0 var(--rr-size-xl-2x);
}

.marg-x-9 {
    margin: 0 var(--rr-size-xl-3x);
}

.marg-x-10 {
    margin: 0 var(--rr-size-xl-4x);
}

.marg-x-11 {
    margin: 0 var(--rr-size-xl-5x);
}

.marg-x-12 {
    margin: 0 var(--rr-size-xl-6x);
}

.marg-x-13 {
    margin: 0 var(--rr-size-xl-7x);
}

.max-200 {
    max-width: 200px;
}

.max-400 {
    max-width: 400px;
}

.max-500 {
    max-width: 500px;
}

.max-600 {
    max-width: 600px;
}

.max-700 {
    max-width: 768px;
}

.max-768 {
    max-width: 768px;
}


/* Borders */

.border-default {
    border: 1px solid var(--rr-border-color-default);
}

.border-toon {
    border: 2px solid var(--rr-border-color-dark);
}

.border-t-bold {
    border-top: 2px solid var(--rr-border-color-dark);
}

/* Radius */
.radius-sm-3x {
    border-radius: var(--rr-radius-sm-3x);
}

.radius-sm-2x {
    border-radius: var(--rr-radius-sm-2x);
}

.radius-sm {
    border-radius: var(--rr-radius-sm);
}

.radius-md {
    border-radius: var(--rr-radius-md);
}

.radius-lg {
    border-radius: var(--rr-radius-lg);
}



/* Scale */
.scale-0 {
    transform: scale(0);
    transition: .25s ease-out;
}

.scale-minus-1 {
    transform: scale(.9);
}

.scale-normal {
    transform: scale(1);
    transition: .25s ease-in;
}

.scale-add-1 {
    transform: scale(1.1);
}

/* Shadows */
.shadow-1 {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

/* Non Theme Switch Background Colors */

.bg-neutral-300 {
    background: var(--neutral-300);
}

.bg-blur {
    backdrop-filter: blur(10px);
}

body.lock-scroll {
    overflow: hidden;
}

/* Display */
.display-none {
    display: none;
}

.display-block {
    display: block;
}