/* fonts */
.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.nanum-myeongjo-regular {
    font-family: "Nanum Myeongjo", serif;
    font-weight: 400;
    font-style: normal;
}

.Gowun-Dodum-regular {
    font-family: "Gowun Dodum", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.rouge-script-regular {
    font-family: "Rouge Script", cursive;
    font-weight: 400;
    font-style: normal;
}

/* END fonts */

/* root */
:root {
    /* colors */
    --text: #68443c;
    --text-light: #f3eef3;
    --background: #f9f5f7;
    --primary: #927968;
    --secondary: #c7a3a1;
    --accent: #e6d7ec;
    --accent2: #efe7f1;

    /* fonts */
    --standard: "Roboto", sans-serif;
    --fancy: "Rouge Script", cursive;
    --elegant: "Gowun Dodum", sans-serif;
    --elegant-serif: "Nanum Myeongjo", serif;
}


/* END root */


.clr-text{
    color: var(--text);
}
.clr-text-light{
    color: var(--text-light);
}
.clr-text-primary{
    color: var(--primary);
}
.clr-text-secondary{
    color: var(--secondary);
}
.clr-text-accent{
    color: var(--accent);
}
.clr-text-accent2{
    color: var(--accent2);
}
.clr-background{
    background-color: var(--background);
}
.clr-primary{
    background-color: var(--primary);
}
.clr-secondary{
    background-color: var(--secondary);
}
.clr-accent{
    background-color: var(--accent);
}
.clr-accent2{
    background-color: var(--accent2);
}
.clr-gradient{
    background: linear-gradient(120deg, var(--accent), var(--accent2));
}

.font-standard{
    font-family: var(--standard);
    font-size: 18px;
}
.font-fancy{
    font-family: var(--fancy);
}
.font-elegant{
    font-family: var(--elegant);
}
.font-elegant-serif{
    font-family: var(--elegant-serif);
}

.font-size-xxs {
    font-size: 0.625rem; /* 10px */
}   
.font-size-xs {
    font-size: 0.75rem; /* 12px */
}
.font-size-sm {
    font-size: 0.875rem; /* 14px */
}
.font-size-md {
    font-size: 1rem; /* 16px */
}
.font-size-lg {
    font-size: 1.125rem; /* 18px */
}
.font-size-xl {
    font-size: 1.25rem; /* 20px */
}
.font-size-2xl {
    font-size: 1.5rem; /* 24px */
}
.font-size-3xl {
    font-size: 1.875rem; /* 30px */
}
.font-size-4xl {
    font-size: 2.25rem; /* 36px */
}
.title-size-xxs {
    font-size: 1.5rem; /* 48px */
}
.title-size-xs {
    font-size: 2rem; /* 64px */
}
.title-size-sm {
    font-size: 3rem; /* 112px */
}
.title-size-md {
    font-size: 4rem; /* 128px */
}
.title-size-lg {
    font-size: 5rem; /* 160px */
}

.line-height-md {
    line-height: 1.5;
}
.line-height-lg {
    line-height: 1.75;
}

.marpad-0{
    margin: 0;
    padding: 0;
}
.marpad-05{
    margin: 0.5rem;
    padding: 0.5rem;
}
.marpad-1{
    margin: 1rem;
    padding: 1rem;
}


.margin-0{
    margin: 0;
}
.margin-05{
    margin: 0.5rem;
}
.margin-1{
    margin: 1rem;
}
.margin-bottom-1{
    margin-bottom: 1rem;
}
.padding-0{
    padding: 0;
}
.padding-05{
    padding: 0.5rem;
}
.padding-1{
    padding: 1rem;
}
.padding-bottom-1{
    padding-bottom: 1rem;
}
.padding-bottom-2{
    padding-bottom: 2rem;
}



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

/*flex*/
.flexBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.spaceBetween {
    justify-content: space-between;
}
.spaceAround {
    justify-content: space-around;
}
.wrap {
    flex-wrap: wrap;
}

.columnCenter {
    flex-direction: column;
    text-align: center;
}