:root {
        --pl-red: #fe3d0d;
        --pl-red2: #f94c43;
        --pl-pink: #ffd6ee;
        --pl-pink-border: #e0bdd1;
        --pl-blue-grad:
                linear-gradient(0deg,#ffffff80,#ffffff80),
                linear-gradient(0deg,#bcb0cf,#9eb4d3);
        --pl-shadow: 0 10px 40px #24112840;
        --pl-blue: #9eb4d3;
        --pl-green: #d8fe3c;
        /*
        --pl-pink: gray;
        --pl-red: darkgray;
        --pl-red2: darkgray;
        --pl-blue-grad: darkgray;
        --pl-shadow: 0 0 0 transparent;
        --pl-blue: darkgray;
        */
}
@font-face {
	font-family: 'din';
	src: url('../fonts/dinneuzeitgrotesk_n3.woff2') format('woff2');
}
@font-face {
        font-family: "montserrat";
        src: url("../fonts/montserrat_n4.woff2") format("woff2");
        font-style: normal;
}
@font-face {
        font-family: "montserrat";
        src: url("../fonts/montserrat_i4.woff2") format("woff2");
        font-style: italic;
}



/* main */
body {
        margin: 0;
        height: 100vh;
        font-family: "montserrat";
        background: var(--pv-blue-grad);
}
button {
        background: var(--pl-green);
        border: none;
        padding: 1em;
        letter-spacing: 3px;
        padding: 1em 2em;
}
.backstage {
        display: none;
}
.header {
        background: var(--pl-pink);
        padding: 1em 3.2em;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -1px var(--pl-pink-border) inset;
}
.header-menu-left {
        width: 30%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
}
.header-menu-left > * {
        margin-right: 41.7px;
        font-size: 13px;
        letter-spacing: 1.2px;
}
.header-menu-right {
        width: 30%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
}
.header-menu-right > * {
        margin-left: 11.7px;
        font-size: 13px;
        letter-spacing: 1.2px;
}
.header .clear-btn {
        color: black;
        width: 71px;
}
.cart-menu-btn {
        font-size: unset;
        margin-left: 32px;
}
.wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        perspective: 1000px;
}
.ref {
        position: absolute;
        width: 100vw;
        top: 0;
        left: 0;
        opacity: 40%;
        pointer-events: none;
}
.clear-btn {
        background: transparent;
        color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 10px;
        letter-spacing: 3px;
        margin: 0;
        padding: 4px;
}
.clear-btn > * {
        display: inline-block;
}
.clear-btn > svg {
        height: 6px;
        margin-left: 7px;
}



/* canvas area */
.canvas-wrap {
        width: 900px;
        height: 693px;
        margin-top: 1.5em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition:
                3s ease-in-out transform,
                0.5s ease-out opacity;
}
.canvas-wrap:hover > canvas { transform: scale(1.006); }
.canvas-wrap:hover > .upload { opacity: 1; }
.canvas-wrap:hover > .prompt { opacity: 0; }
canvas {
         box-shadow: var(--pl-shadow);
        border-radius: 3px;
        cursor: pointer;
        transform: scale(1);
        transition: 0.3s ease-in-out transform;
}
.prompt {
        position: absolute;
        font-family: "din";
        font-size: 48px;
        color: var(--pl-red);
        opacity: 1;
        transition: 0.3s ease-in-out opacity;
        pointer-events: none;
        user-select: none;
}
#file { display: none; }
.upload {
        width: 900px;
        height: 693px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        font-size: 500px;
        font-family: sans-serif;
        color: var(--pl-red);
        cursor: pointer;
        pointer-events: none;
        transition: 0.3s ease-in-out opacity;
        user-select: none;
        opacity: 0;
        transform: scale(1);
}



/* jigsaw effect */
.jigsaw {
        position: absolute;
        width: 900px;
        mix-blend-mode: multiply;
        opacity: 0;
        transition: 1s ease-in-out opacity;
}
.shine {
        position: absolute;
        width: 900px;
        height: 693px;
        background: radial-gradient(circle at top right, #ffffff80, transparent);
        opacity: 0.2;
        transition: 2s ease-in opacity;
}
.shine-visible { opacity: 0.8; }
.jigsaw-visible { opacity: 0.6; }



/* buttons */
.button-row {
        width: 900px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-top: 25px;
}
.basic-button {
        box-sizing: border-box;
        height: 62px;
        text-align: center;
        cursor: pointer;
        padding: 0.7em 1em;
        background: var(--pl-blue);
        color: white;
        font-family: "din";
        border-radius: 3px;
        font-size: 1.5em;
        margin: 0 10px;
        transition:
                0.5s ease-in-out opacity,
                0.2s ease-in-out background;
}
.basic-button > img {
        object-fit: contain;
        height: 100%;
}
.preview-button {
        width: 144px;
        margin: 0;
}
.disabled-button {
        background: lightgray;
        pointer-events: none;
        color: gray;
}
.basic-button:hover { background: #4f5a69; }
.logo {
        cursor: pointer;
        /* filter: grayscale(1); */
}
.white-solid {
        width: 100%;
        height: 100vh;
        background: white;
        opacity: 1;
        transition: 0.5s ease-in opacity;
        position: absolute;
        margin: 0;
        top: 0;
        pointer-events: none;
}



/* footer */
.footer {
        background: var(--pl-red2);
        color: white;
        font-family: "montserrat";
        font-size: 15px;
        margin-top: 50px;
        padding: 70px;
        line-height: 1.4em;
}
.footer h2 {
        font-size: 13px;
        font-weight: normal;
        letter-spacing: 2px;
}
.footer a {
        text-decoration: none;
        color: white;
}
.footer .icon {
        display: inline-block;
        width: 32px;
}
.icon > svg {
        width: 100%;
}
.icon-insta {
        filter: invert(2);
}
.icon-heart {
        width: 200px;
}
.menu-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
}
.menu-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-bottom: 120px;
}
.menu-col > * {
        margin-bottom: 12px;
        line-height: 1.7em;
}
.menu-col:nth-of-type(1) { flex-basis: 420px; }
.menu-col:nth-of-type(1) p { width: 356px; }
.menu-col:nth-of-type(2) { flex-basis: 100px; }
.menu-col:nth-of-type(4) { flex-basis: 266px; }
.text-input {
        background: transparent;
        border: 1px solid white;
        padding: 12px 14px;
        line-height: 0;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
}
.text-input::placeholder {
        line-height: 0;
        color: white;
        letter-spacing: 2px;
}
.subscribe-btn {
        margin-top: 8px;
}
.copyright-link {
        font-size: 11px;
        letter-spacing: 2px;
        display: block;
        margin-top: 20px;
}
.mobile-message {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 100dvw;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        background: var(--pl-pink);
        color: var(--pl-red);
        letter-spacing: 0.2rem;
        line-height: 3rem;
}
.mobile-message div {
        opacity: 0;
        animation: fade-in 2s forwards ease-in;
}
@keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
}



/* FUNCTIONAL STYLES */
.gone { display: none }
.here { display: initial }
.hide { transform: scale(0) }
.show { transform: scale(1) }
.seethru { opacity: 0 }
.opaque { opacity: 1 }
.lay { transform: translateZ(-180px) rotate3d(1, 0, 0, 57deg) rotateZ(15deg); }
.pink-btn { background: #bcb0cf; }
.pink-btn:hover { background: #5e5867; }