body {
    margin: 0;
    padding: 0;
}

#navbar,
#content {
    margin: 20px;
}

#title {
    font-weight: bold;
    margin-right: 20px;
}

#navbar a {
    margin: 0 10px;
    text-decoration: none;
}

#original-preview,
#secondary-preview {
    display: none;
}

#canvas-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background: #222;
}

#canvas-output,
#canvas-overlay {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#canvas-overlay {
    cursor: crosshair;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    #navbar a {
        color: #e0e0e0;
    }
    
    #navbar a:hover {
        color: #fff;
    }
}