/* style.css */
:root {
    --toolbar-bg: #f8f9fa
}

body {
    /* background: #f3f6f9; */
    background-image: url(7361112.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Inter, system-ui, Arial, sans-serif
}

.container h1 {
    font-size: 2.4rem;
    text-align: center;
    color: blue;
    background-color: rgba(37, 51, 99, 0.226);
    border-radius: 10px;
    backdrop-filter: var(--toolbar-bg);
}

.card {
    box-shadow: 0 6px 18px rgba(22, 27, 40, 0.06)
}

.toolbar {
    background: var(--toolbar-bg);
    padding: 8px;
    border-radius: 6px
}

.toolbar .btn {
    font-weight: 600
}
.btn:hover{
    background-color: cornflowerblue;
}
.editor {
    min-height: 260px;
    border: 1px solid #e3e6ea;
    padding: 12px;
    border-radius: 6px;
    background: #fff;
    overflow: auto
}

.editor:focus {
    outline: 3px solid rgba(13, 109, 252, 0.623)
}

.fullscreen {
    position: fixed;
    inset: 8px;
    z-index: 9999;
    background: #fff
}

/* small responsive tweaks */
@media(max-width:640px) {
    .toolbar {
        gap: 6px
    }

    .toolbar .form-select,
    .toolbar input[type=color] {
        display: none
    }
}