/* Defaults */
*{
    margin: 0;
    box-sizing: border-box;
}
:root{
    --bw: 2px;
    --transition: 0.2s;
    --border-radius: 0.75rem;

    --space: 2rem;
    --space-sm: 0.75rem;

    --page-width: 90%;

    /* normal colours */
    --color-border: #262626;
    --color-border-alt: #dacfaf;
    --color-text: #262626;
    --color-heading: #262626; 
    --color-bg: #dacfaf;
    --color-secondary: #c1b48e;
    --color-bg-alt: #262626;
    --color-text-alt: #dacfaf;
    
    /* Black and white */
    /* --color-border: #262626;
    --color-border-alt: #eeeeee;
    --color-text: #262626;
    --color-heading: #262626; 
    --color-bg: #eeeeee;
    --color-secondary: #dbdbdb;
    --color-bg-alt: #262626;
    --color-text-alt: #eeeeee; */

    /* dark mode */
    /* --color-border: #008f11;
    --color-border-alt: #171717;
    --color-text: #008f11;
    --color-heading: #008f11; 
    --color-bg: #171717;
    --color-secondary: #012b01;
    --color-bg-alt: #008f11;
    --color-text-alt: #171717; */

    /* alternate colours for sneaky work colour scheme */
    /* --color-border: #c6202f;
    --color-border-alt: #101010;
    --color-text: #dddddd;
    --color-heading: #dddddd; 
    --color-bg: #101010;
    --color-secondary: #5f5f5f;
    --color-bg-alt: #c6202f;
    --color-text-alt: #dddddd;
     */

    --font-heading: "Plus Jakarta Sans", sans-serif;
    /* --font-heading: "Poppins", sans-serif; */
    --font-body: "Reddit Mono", serif;

    /* headings */
    --font-size-01: max(32px, 2vw);
    --font-size-02: max(24px, 1.75vw);
    --font-size-03: max(24px, 1.5vw);
    --font-size-04: max(20px, 1vw);
    --font-size-05: max(18px, 0.85vw);
}

@media screen and (max-width: 768px) {
    :root {
        --space: 1.25rem;
        --space-sm: 0.5rem;
        --page-width: 100%;
		            /* headings */
            --font-size-01: 28px;
            --font-size-02: 22px;
            --font-size-03: 22px;
            --font-size-04: 18px;
            --font-size-05: 16px;
    }
}

.page-heading{
    font-weight: 800;
    text-transform: uppercase; 
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    line-height: 1;
}
/* default */
.heading{
    font-family: var(--font-heading);
    text-transform: uppercase;
    color: var(--color-heading);
}
/* section heading */
.heading.xl{
    font-size: var(--font-size-01);
    font-weight: 400;
}
/* content heading */
.heading.lg, .wys h2{
    font-size: var(--font-size-02);
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-heading);
}
/* project title */
.heading.md{
    font-size: var(--font-size-03);
    font-weight: 900;
    line-height: 1;
}
/* section subheading */
.heading.sm, .wys h3{
    font-size: var(--font-size-04);
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 3px;
}

.heading.xs, .wys h4{
    font-size: var(--font-size-05);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 5px;
}

/* html{overflow-x: hidden;} */
body{
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size:  16px;
    overflow-x: hidden;
}

.page-content{
    border-left: var(--bw) solid var(--color-border);
    border-right: var(--bw) solid var(--color-border);
    border-bottom: var(--bw) solid var(--color-border);
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
}
/* utlility */
.color-alt{
    background: var(--color-bg-alt);
    color: var(--color-text-alt)
}
.color-alt svg{
    stroke: var(--color-text-alt);
}
.color-alt .heading{
    color: var(--color-text-alt)
}

.icon svg{stroke: var(--color-text);} 
.color-alt .icon svg{stroke: var(--color-text-alt);} 

.clamp-width{
    width: var(--page-width);
    margin-left: auto;
    margin-right: auto; 
}
.ctr{text-align: center;}
.w-100{width: 100%;}
.h-100{height: 100%;}
.hide{display: none !important;}
.no-list{list-style: none; padding: 0;}
.has-trans{transition: var(--transition);}
.relative{position: relative;}
.block{display: block;}
.none{display: none;}
.uppercase{text-transform: uppercase;}
.noselect{user-select: none;}
.pointer{cursor: pointer;}
.radius{border-radius: var(--border-radius)}
.overflow-hidden{overflow: hidden;}

.bg-col{background-color: var(--color-bg);}
.bg-col-alt{background-color: var(--color-bg-alt);}

.bt{border-top: var(--bw) solid var(--color-border);}
.br{border-right: var(--bw) solid var(--color-border);}
.bb{border-bottom: var(--bw) solid var(--color-border);}
.bl{border-left: var(--bw) solid var(--color-border);}
.b{border: var(--bw) solid var(--color-border);}

.mt{margin-top: var(--space);}
.mb{margin-bottom: var(--space);}
.ml{margin-left: var(--space);}
.mr{margin-right: var(--space);}
.mt-sm{margin-top: var(--space-sm)}
.mb-sm{margin-bottom: var(--space-sm)}
.p{padding: var(--space);}
.pt{padding-top: var(--space);}
.pb{padding-bottom: var(--space);}
.pl{padding-left: var(--space);}
.pr{padding-right: var(--space);}
.p-sm{padding: var(--space-sm)}
.pt-sm{padding-top: var(--space-sm)}
.pb-sm{padding-bottom: var(--space-sm)}
.pl-sm{padding-left: var(--space-sm)}
.pr-sm{padding-right: var(--space-sm)}

.h-flex{display: flex;}
.v-flex{display: flex; flex-direction: column;}
.justify-center{justify-content: center;}
.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}
.justify-space-between{justify-content: space-between;}
.justify-space-around{justify-content: space-around;}
.justify-stretch{justify-content: stretch;}
.align-center{align-items: center;}
.align-end{align-items: flex-end;}
.align-start{align-items: flex-start;}
.flex-grow-1{flex-grow: 1;}
.gap{gap: var(--space);}
.row-gap{row-gap: var(--space);}
.col-gap{column-gap: var(--space);}
.gap-sm{gap: var(--space-sm);}
.row-gap-sm{row-gap: var(--space-sm);}
.col-gap-sm{column-gap: var(--space-sm);}

/* rows */
.row{display: grid;}
.grid{display: grid;}
.col-1-1{grid-template-columns: 1fr 1fr;}
.col-i-1-1{grid-template-columns: 1fr 1fr 1fr}
.col-1-2{grid-template-columns: 1fr 2fr;}
.col-2-1{grid-template-columns: 2fr 1fr;}
.col-3-2{grid-template-columns: 3fr 2fr;}
.col-2-3{grid-template-columns: 2fr 3fr;}

/* buttons */
.btn{
    min-width: 180px; 
    padding: var(--space-sm) var(--space); 
    border: var(--bw) solid var(--color-border); 
    text-align: center; 
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn .btn-label, input.btn{
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 1.25rem;
    color: var(--color-text);
    transition: var(--transition);
}

.btn.btn-style-01{
    background-color: var(--color-bg);
}
.btn.btn-style-01:hover{
    background-color: var(--color-bg-alt);
}
.btn.btn-style-01:hover .btn-label, input.btn.btn-style-01:hover{
    color: var(--color-text-alt);
}
.btn.btn-style-02, input.btn.btn-style-02{
    background-color: var(--color-bg-alt);
}
.btn.btn-style-02 .btn-label, input.btn.btn-style-02{
    color: var(--color-text-alt);
}
.btn.btn-style-02:hover, input.btn.btn-style-02:hover{
    background-color: var(--color-bg);
}
.btn.btn-style-02:hover .btn-label, input.btn.btn-style-02:hover{
    color: var(--color-text);
}

/* content styling */
.hero-banner{
    min-height: 60dvh;
}
.wys{
    /* max-width: 800px; */
    line-height: 1.5;
}
.wys p + p, .wys h2 + p{
    margin-top: 1.5rem;
}
.wys hr{
    margin-bottom: 1.5rem;
    border-width: unset;
    border-style: unset;
    display: block;
    height: 1px;
    width: 100%;
    max-width: 480px;
    background-color: var(--color-text);
}
.wys .btn{
    max-width: fit-content;
}

/* header menu */

header{
    max-width: var(--page-width);
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition);
    margin-top: var(--space);
    background: var(--color-bg);
    z-index: 999;
    /* position: sticky;
    width: 100%;
    left: 0;
    right: 0;
    top: 0; */
}

header.sticky{
    max-width: 100%;
    margin-top: 0;
    top: 0;
    position: sticky;
    top: 0;
}

nav ul{
    list-style: none;
    padding: 0;
}
.primary-nav{
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-bg);
}
.primary-nav > li{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.primary-nav >li:not(:last-child) >a{
    border-right: var(--bw) solid var(--color-border);
}
.primary-nav  li a{
    display: block;
    height: 100%;
    width: 100%;
    padding: var(--space-sm);
    transition: var(--transition);
    text-align: center;
    font-size: var(--font-size-04);
    text-decoration: none;
    color: var(--color-text);
    text-transform: uppercase;
}

.primary-nav li:hover > a{
    background-color: var(--color-bg-alt);
    color: var(--color-text-alt);
}
.primary-nav > li > .sub-menu{
    position: absolute;
    top: calc(100%);
    left: 0;
    display: none;
    width: 100%;
    text-align: center;
    border: var(--bw) solid var(--color-border);
    background-color: var(--color-bg);
    flex-direction: column;
}
.primary-nav > li > .sub-menu a{
    font-size: var(--font-size-05);
}

.primary-nav > li:hover > .sub-menu{
    display: flex;
}

.primary-nav .sub-menu li:not(:first-child) > a{
    border-top: var(--bw) solid var(--color-border);
}

/* header.mobile{margin-top: 0; transition: none;}
header.mobile.sticky{
    position: sticky; 
    top:0; 
    width:100%; 
    will-change: transform; 
    backface-visibility: hidden; 
    transform: translateZ(0);
} */
.mobile-menu-btn{--button-size: 2.25rem}
.mobile-menu-btn{width: var(--button-size); height: var(--button-size); border: var(--bw) solid var(--color-border); border-radius: 0.25rem; position: relative; margin-left: auto; box-sizing: content-box; display: none;}
.mobile-menu-btn .line{display: block; width: calc(var(--button-size) - 0.5rem); height: 0.1rem; background: var(--color-border); position: absolute; left: 0.25rem; transition: var(--transition);}
.mobile-menu-btn .line:nth-child(1){top: calc((var(--button-size) / 4) - 0.05rem);}
.mobile-menu-btn .line:nth-child(2){top: calc(2 * (var(--button-size) / 4) - 0.05rem);}
.mobile-menu-btn .line:nth-child(3){top: calc(3 * (var(--button-size) / 4) - 0.05rem);}

/* header.mobile .mobile-menu-btn{display: block;} */

.mobile-menu-btn.open .line:nth-child(1){transform: rotate(45deg); top:calc(2 * (var(--button-size) / 4) - 0.05rem);}
.mobile-menu-btn.open .line:nth-child(2){opacity: 0;}
.mobile-menu-btn.open .line:nth-child(3){transform: rotate(-45deg); top:calc(2 * (var(--button-size) / 4) - 0.05rem);}

/* header.mobile .mobile-menu-btn-container{padding: var(--space-sm);}

header.mobile .menu-primary-menu-container{display: none;}
header.mobile:has(.mobile-menu-btn.open) .menu-primary-menu-container{display: block;}

header.mobile .primary-nav{flex-direction: column; border-top: var(--bw) solid var(--color-border); }
header.mobile .primary-nav > li:not(:last-child) > a{border-right:none; border-bottom:var(--bw) solid var(--color-border);} */

@media screen and (max-width:1024px){
    header{
        margin-top: 0; 
        transition: none;
        position: sticky; 
        top:0; 
        width:100%; 
    }
    header.sticky{
        position: sticky; 
        top:0; 
        width:100%; 
        will-change: transform; 
        backface-visibility: hidden; 
        transform: translateZ(0);
    }
    header .mobile-menu-btn{display: block;}
    header .mobile-menu-btn-container{padding: var(--space-sm);}

    header .menu-primary-menu-container{display: none;}
    header:has(.mobile-menu-btn.open) .menu-primary-menu-container{display: block;}

    header .primary-nav{flex-direction: column; border-top: var(--bw) solid var(--color-border); }
    header .primary-nav > li:not(:last-child) > a{border-right:none; border-bottom:var(--bw) solid var(--color-border);}
}


/* projects */

.pin-content{position: relative; z-index: 9;}

.project-single{
    display: grid;
    grid-template-columns: 2fr 100px 1fr;
    align-items: center;
    padding: var(--space);
    transition: var(--transition);
    cursor: pointer;
}
.project-single:not(:last-child){
    border-bottom: var(--bw) solid var(--color-border);
}
.project-single .project-description{
    /* display: none; */
    /* visibility: hidden;
    position: absolute; */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s;
    overflow: hidden;
}
.project-single .project-description .content{
    visibility: hidden;
    min-height: 0;
    /* transition: visibility 0.25s; */
}

.project-single:hover{
    background: var(--color-secondary)
}

/* .project-single:not(:first-child){
    border-top: var(--bw) solid var(--color-border);
} */

.project-single.active{
    background: var(--color-bg-alt);
    margin-bottom: -1px;
}
.project-single.active .project-title .heading{
    color: var(--color-text-alt);
}
.project-single.active .project-description{
    color: var(--color-text-alt);
    /* display: block; */
    /* visibility: visible;
    position: relative; */
    grid-template-rows: 1fr;
}
.project-single.active .project-description .content{
    visibility: visible;
    margin-top: var(--space-sm);
}
.project-single.active .project-tag{
    border-color: var(--color-text-alt);
    color: var(--color-text-alt);
    background: var(--color-bg-alt);
}
.project-single svg{
    stroke: var(--color-text);
}
.project-single.active svg{
    stroke: var(--color-text-alt);
}

.project-tags{
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

.project-tag{
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    text-transform: uppercase;
    background: var(--color-bg);
}

.project-preview:not(.active){
    display: none;
}
.project-preview .project-image{
    padding: var(--space-sm);
    border: var(--bw) solid var(--color-border);

    min-height: 390px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.project-preview img, .project-preview video{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: block;
    object-fit: cover;
}

form#project-filter input[type="radio"]{
    position: absolute;
  width: 100%;
  height: 100%;
  inset:0;
  opacity: 0;
  cursor: pointer;
}
form#project-filter .option:has(input:checked),
form#project-filter .option:hover{
    background-color: var(--color-bg-alt);
}
form#project-filter .option:has(input:checked) .heading,
form#project-filter .option:hover .heading{
    color: var(--color-text-alt);
}

/* Face Stuff */
.face-img{
    max-width: 350px;
    margin: auto;
    object-fit: contain;
}
img{
    max-width: 100%;
}
.img-has-hover img{
    display: block;
}

.img-has-hover .hover-active{
    display: none;
}
.img-has-hover:hover .hover-default{
    display: none;
}
.img-has-hover:hover .hover-active{
    display: block;
}
.circular-wrapper{
    display: grid;
    align-items: center;
    justify-content: center;
}

.circular-wrapper .inner-image, .circular-wrapper .wrapper-text{
    grid-column: 1/2;
    grid-row: 1/2;
}
.circular-wrapper .inner-image{
    z-index: 1;
}
.inner-image img{margin: 0 auto; display: block; object-fit: contain; object-position: calc();}

.circular-wrapper textPath{
    font-family: var(--font-body);
    font-size: 2rem;
    text-transform: uppercase;

}

.circular-wrapper svg{
    animation: text-rotate 15s infinite linear;
}
.circular-wrapper path{
    fill: var(--color-secondary);
}
.circular-wrapper text{
    fill: var(--color-text);
}

/* contact form */
.form-wrapper{max-width: 80rem; margin: 0 auto;}
.contact-form input[type="text"], 
.contact-form input[type="email"], 
.contact-form textarea{
    background: var(--color-secondary) !important;
    border: var(--bw) solid var(--color-border) !important;
    line-height: var(--space) !important;
    font-size: var(--font-size-04) !important;
    font-family: var(--font-01) !important;
    border-radius: var(--border-r) !important;
}
.contact-form textarea{
    font-size: var(--font-body);
    min-height: calc(var(--space) * 3);
}

.contact-form .wpforms-submit{
    min-width: 180px !important; 
    background-color: var(--color-bg) !important;
    padding: var(--space-sm) var(--space) !important; 
    color: var(--color-text) !important;
    border: var(--bw) solid var(--color-border) !important; 
    text-transform: uppercase;
    font-size: 1.25rem !important;
    border-radius: var(--border-radius) !important;
    transition: var(--transition) !important;
    height: unset !important;
}
.contact-form .wpforms-submit:hover{
background-color: var(--color-bg-alt) !important;
color: var(--color-text-alt) !important;
}
div.wpforms-container-full .wpforms-confirmation-container-full{
    background: var(--color-secondary) !important;
    border: var(--bw) solid var(--color-border) !important;
}



/* canvas stuff */
.draw-canvas-container{
    --icon-size: 50px;
    --icon-size-sm: 30px;
}

.canvas-overlay{position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: var(--transition);}
#draw-here path{transform-origin: center;}
#draw-here text{ 
    text-anchor: middle;
  alignment-baseline: middle;
  font-family: var(--font-body);
  font-size: var(--font-size-01);
  text-transform: uppercase;
}

.draw-canvas:has(canvas.active) .canvas-overlay{
    opacity: 0;
}

#draw-canvas{
    /* background: var(--color-bg-alt); */
    border: var(--bw) solid var(--color-border);
}
.draw-canvas-container{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;

}
.draw-canvas-form label{
    display: none;
}
#draw-canvas{display: block; max-width: 100%;}
.canvas-controls .swatch{
    width: var(--icon-size); 
    height: var(--icon-size);
}
.canvas-controls .swatch{
    position: relative;

}
.canvas-controls .frame{
    position: absolute;
    background-size: contain;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    background-color: var(--color-bg);
}
.canvas-controls input{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    cursor: pointer;
}
.canvas-controls input[type="color"]{
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    z-index: 2;
    border-color: var(--color-border);
    border-width: var(--bw);
    border-right: none;
    border-bottom: none;
    background: var(--color-bg);
}
.canvas-controls input + .frame{
    background-size: calc(var(--icon-size) - 10px);
    background-repeat: no-repeat;
    background-position: center;
    border-left: var(--bw) solid var(--color-border);
    border-top: var(--bw) solid var(--color-border);
}
.canvas-controls .swatch:last-child input + .frame{
    border-bottom: var(--bw) solid var(--color-border);
}
/* TODO set these to svgs and give them the same colour scheme as rest of site on active */
.canvas-controls input:checked + .frame{
    background-color: var(--color-secondary);
}

.confirm-modal{
    position: absolute;
    padding: var(--space-sm);
    border: var(--bw) solid var(--color-border);
    background-color: var(--color-bg);
    left: calc(100% + 10px);
    top: -50%;
    min-width: 180px;
}

.canvas-controls .colour-list{
    display: grid;
    grid-template-columns: repeat(3, var(--icon-size-sm));
    gap: calc(var(--space-sm) / 2);
    margin-top: var(--space-sm);
    margin-left: auto;
    margin-right: auto;
    place-items: center;
    max-width: fit-content;
}
.canvas-controls .colour-list .swatch{
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}
.canvas-controls .colour-list .frame{
    border-left: var(--bw) solid var(--color-border);
    border-right: var(--bw) solid var(--color-border);
    border-top: var(--bw) solid var(--color-border);
    border-bottom: var(--bw) solid var(--color-border);
    border-radius: 5px;
}


.canvas-controls .colour-list input:checked + .frame .checkmark{
    content: "";
    position: absolute;
    width: calc(var(--icon-size-sm) / 1.5);
    height: calc(var(--icon-size-sm) / 1.5);
    top: calc((var(--icon-size-sm) / 4) *-1 );
    left: calc((var(--icon-size-sm) / 4) *-1 );
    border-radius: 50%;
    border: var(--bw) solid var(--color-border);
    background-color: var(--color-bg-alt);
}
.canvas-controls .colour-list input:checked + .frame .checkmark::before{
    content: "";
    position: absolute;
    width: 4px;
    height: 10px;
    top: calc(50% - 6.5px);
    left: calc(50% - 3px);
    border-right: var(--bw) solid var(--color-border-alt);
    border-bottom: var(--bw) solid var(--color-border-alt);
    background-color: var(--color-bg-alt);
    transform: rotate(45deg);
}

.colour-indicator{
    width: 15px;
    height: 15px;
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    left: -7.5px;
    top: -7.5px;
}

/* scrollng text */
/* .scroll-text{
    text-wrap: nowrap;
    transform: translateX(0%);
    animation: scroll-text 35s linear infinite;
}
.scroll-container{
    overflow: hidden;
}

@keyframes scroll-text{
    0%{transform: translateX(0%);}
    100%{transform: translateX(-900px);}
}
 */

 .scroll-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}

.scroll-wrapper {
  display: flex;
  white-space: nowrap;
}
.scroll-text{
    display: flex;
}
.scroll-text-divider{
    padding-right: var(--space);
    padding-left: var(--space);
}
.scroll-text-entry, .scroll-text-divider{line-height: 1;}



/* animations */
.point-left{
    animation: point-left 2s infinite ease-in-out;
}
@keyframes point-left{
    0%{transform: translateX(10px);}
    50%{transform: translateX(-20px);}
    100%{transform: translateX(10px);}
}
.point-right{
    animation: point-right 2s infinite ease-in-out;
}
@keyframes point-right{
    0%{transform: translateX(-10px);}
    50%{transform: translateX(20px);}
    100%{transform: translateX(-10px);}
}

@keyframes text-rotate{
    100%{transform: rotate(1turn);}
}

.rotate{animation: rotate 10s infinite linear;}
@keyframes rotate{
    0%{transform: rotate(0turn);}
    /* 50%{transform: rotate();} */
    100%{transform: rotate(1turn);}
}

/* loader */

.loading-screen::after,.loading-screen::before{
    content: "";
    position: absolute;
    background: var(--color-bg);
    z-index: 2;
    left: 0; right:0;
    transition: 0.75s;
}
.loading-screen::after{
    top: 0;
    bottom: 50%;
}
.loading-screen::before{
    bottom: 0;
    top: 50%;
}

.loading-screen{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.loaded .loading-screen::after{bottom: 100%;}
.loaded .loading-screen::before{top: 100%;}

.loading-bar-wrapper{position: relative; z-index: 3; width: 100%; padding: var(--space-sm); display: flex; flex-direction: column; align-items: center;}

.loading-bar{
    width: 100%;
    max-width: 33rem;
    height: 2rem;
    margin: 0 auto;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.loading-bar-inner{
    height: 100%;
    background: var(--color-bg-alt);
    width: 0;
}

.loaded .loading-bar-wrapper{
    display: none;
}


/* responsive */
@media screen and (max-width:1024px){
    .row{display: grid;}
    .mob-col-1{grid-template-columns: 1fr;}
    .mob-none{display: none;}
    .mob-block{display: block;}
    .mob-bt{border-top: var(--bw) solid var(--color-border);}
    .mob-br{border-right: var(--bw) solid var(--color-border);}
    .mob-bb{border-bottom: var(--bw) solid var(--color-border);}
    .mob-bl{border-left: var(--bw) solid var(--color-border);}
    .mob-b{border: var(--bw) solid var(--color-border);}
    .mob-bt-none{border-top: none;}
    .mob-br-none{border-right: none;}
    .mob-bb-none{border-bottom: none;}
    .mob-bl-none{border-left: none;}
    .mob-b-none{border: none;}
    .mob-gap{gap: var(--space);}
    .mob-row-gap{row-gap: var(--space);}
    .mob-col-gap{column-gap: var(--space);}
    .mob-gap-sm{gap: var(--space-sm);}
    .mob-row-gap-sm{row-gap: var(--space-sm);}
    .mob-col-gap-sm{column-gap: var(--space-sm);}

    .mob-p{padding: var(--space);}
    .mob-p-none{padding: 0;}

    .h-flex.mob-v-flex{flex-direction: column;}
    .v-flex.mob-h-flex{flex-direction: row;}

    .project-single{grid-template-columns: 1fr; gap: var(--space-sm)}
    .project-tags{justify-content: flex-start;}
    .project-preview .project-image{min-height: 150px;}

    .circular-wrapper .wrapper-text{max-width: 300px;}
    .circular-wrapper .face-img{max-width: 200px;}
}

@media screen and (max-width:768px){
    /* .draw-canvas-container{
        flex-direction: column;
    }
    .canvas-controls{
        flex-direction: row;
    } */
     .draw-canvas-container{
        --icon-size: 40px;
     }

}