*, *::before, *::after { box-sizing: border-box; }


:root {
    color-scheme: light;
    --frame: 7.375rem;
    
    --pad: 0rem;
}



html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: #F8EED5;
    
    background-image: url("/images/logo-generator/set/top-bg.png"),
                      url("/images/logo-generator/set/bottom-bg.jpg");
    background-repeat: repeat-x, repeat-x;
    background-position: left top, left bottom;
    
    background-attachment: scroll, fixed;
    font-family: "Archivo", sans-serif;
    color: #1a1a1a;
}


.brand { margin: 0.9375rem 0; }
.brand img { width: 20.3125rem; height: auto; }


.tool {
    position: relative;   
    display: grid;
    grid-template-columns: var(--frame) 1fr var(--frame);
    grid-template-rows: var(--frame) 1fr var(--frame);
    width: 100%;
    height: 100%;
    
    background: url("/images/logo-generator/set/tool-bg.webp") no-repeat #F8EED5;
    background-size: 100% 100%;
}
.tool > div {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.frame-tl     { margin: 0 -2px -2px 0; }
.frame-top    { margin: 0 -2px -2px; }
.frame-tr     { margin: 0 0 -2px -2px; }
.frame-left   { margin: -2px -2px -2px 0; }
.frame-right  { margin: -2px 0 -2px -2px; }
.frame-bl     { margin: -2px -2px 0 0; }
.frame-bottom { margin: -2px -2px 0; }
.frame-br     { margin: -2px 0 0 -2px; }

.frame-tl     { background-image: url("/images/logo-generator/set/frame-tl.webp"); }
.frame-top    { background-image: url("/images/logo-generator/set/frame-top.webp"); }
.frame-tr     { background-image: url("/images/logo-generator/set/frame-tr.webp"); }
.frame-left   { background-image: url("/images/logo-generator/set/frame-left.webp"); }
.frame-right  { background-image: url("/images/logo-generator/set/frame-right.webp"); }
.frame-bl     { background-image: url("/images/logo-generator/set/frame-bl.webp"); }
.frame-bottom { background-image: url("/images/logo-generator/set/frame-bottom.webp"); }
.frame-br     { background-image: url("/images/logo-generator/set/frame-br.webp"); }


.canvas {
    padding: var(--pad);
    overflow: hidden;   
}


.rotate-overlay { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
    
    html { background: #FADB0C; }
    .rotate-overlay {
        position: fixed;
        inset: 0;
        z-index: 200;   
        display: block;
        background: url("/images/rotate-portrait.webp") center / cover no-repeat #F8EED5;
    }
    .rotate-overlay p {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        margin: 0;
    }
}


@media (min-width: 768px) and (max-height: 60rem) {
    :root { --frame: 5rem; }
}


@media (max-width: 767px) {
    :root { --frame: 2.4375rem; --pad: 0.75rem; }   
    .brand img { width: 62%; margin-left: 1.25rem; }
    .tool { height: auto; width: auto; margin: 0 0.625rem; }
}