@import url('gold.css') layer(gold);


@font-face {
    font-family: 'SomBong';
    src: url('/static/fonts/SombongAmat-m2G82.ttf');
}

:root {
    --m: 1.5rem
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: lightblue;
    min-height: fit-content;
    text-align: center;
}

h1 {
    font-family: 'SomBong', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #44B6DD;
    -webkit-text-stroke: 3px black;
}

#home {
    img {
        width: 10rem;
    }
    input {
        background: #44B6DD;
        border-radius: var(--m);
        cursor: pointer;
        &:hover {
            background: aqua;
        }
        + p {
            font-style: italic;
        }
    }
}

#editor-page {
    img {
        width: 5rem;
    }
    section {
        margin-top: var(--m);
        padding-inline: var(--m);
    }
    #editor {
        gap: var(--xs);
    }
    #document {
        overflow: hidden;
        border: 8px solid #44B6DD;
        img {
            width: 100%;
            z-index: 1;
        }
    }
    #placeholder {
        background: radial-gradient(circle at 50% 50%, white 0%, gray 100%);
        background-size: 120% 120%;
        animation: loading 5s linear infinite;
    }
    
    #angle {
        border: 0;
        field-sizing: content;
    }
    svg {
        z-index: 2;
        width: 100%;
        height: 100%;
        stroke-width: .2px;
    }
    use {
        text-anchor: middle;
        transform-origin: center;
    }
    button {
        background: #44B6DD;
        border-radius: var(--m);
        &:hover {
            background: aqua;
        }
    }
}


@keyframes loading {
    50% {
        background-position: 120% 120%;
    }
}