/* =========================
   TOPO
========================= */

.write-top{

    height:90px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 20px;

    background:
    linear-gradient(
        to bottom,
        #fff6c9,
        #ffd94d
    );

    border-bottom:
    1px solid #caa940;
}

.write-logo{

    display:flex;
    align-items:center;
    gap:15px;
}

.write-logo img{

    width:64px;
    height:64px;
}

.home-btn{

    padding:10px 18px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:
    linear-gradient(
        to bottom,
        #fdecba,
        #ffc928,
        #ffb700
    );
}

/* =========================
   FUNDO AERO
========================= */

body{

    min-height:100vh;

    background:
    linear-gradient( to bottom, #89d4fb 0%, #afd5f6 20%, #82afe9 60%, #f2fdff 100% );

    background-attachment:fixed;
}

/* =========================
   RIBBON
========================= */

.ribbon{

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    padding:10px;

    background:
    linear-gradient(
        to bottom,
        #fff8d5,
        #ffe173
    );

    border-bottom:
    1px solid #caa940;
}

.group{

    display:flex;
    align-items:center;
    gap:6px;

    padding-right:12px;

    border-right:
    1px solid rgba(0,0,0,.15);
}

.ribbon button{

    border:none;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;

    transition:.15s;

    background:
    linear-gradient(
        to bottom,
        white,
        #ececec
    );
}

.ribbon button:hover{

    background:
    linear-gradient(
        to bottom,
        #fff4c4,
        #ffd44d
    );
}

.toggle-btn.active{

    color:white;

    background:
    linear-gradient(
        to bottom,
        #ffcc5c,
        #ff8c00
    ) !important;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 10px rgba(255,170,0,.4);
}

.ribbon select{

    height:36px;

    border-radius:8px;

    border:1px solid #aaa;

    padding:0 8px;
}

.ribbon input[type="color"]{

    width:42px;

    height:36px;

    border:none;

    cursor:pointer;

    border-radius:8px;
}

/* =========================
   ÁREA DO DOCUMENTO
========================= */

.editor-container{

    display:flex;
    justify-content:center;

    padding:30px;
}

#pagesContainer{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:40px;
}

/* =========================
   PÁGINAS
========================= */

.paper{

    width:900px;

    min-height:1200px;

    background:white;

    border-radius:10px;

    padding:40px;

    box-shadow:
    0 8px 24px rgba(0,0,0,.18);

    position:relative;
}

.paper::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:12px;

    border-radius:
    10px 10px 0 0;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.9),
        transparent
    );
}

/* =========================
   TÍTULO
========================= */

.document-title{

    width:100%;

    border:none;

    outline:none;

    font-size:28px;

    font-weight:bold;

    margin-bottom:25px;

    background:transparent;
}

/* =========================
   EDITOR
========================= */

.editor-page{

    min-height:980px;

    outline:none;

    line-height:1.7;

    font-size:14px;

    word-wrap:break-word;

    overflow-wrap:break-word;

    white-space:pre-wrap;
}

/* =========================
   RODAPÉ
========================= */

.status-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 20px;

    background:
    linear-gradient(
        to bottom,
        #edf6ff,
        #d6e8fa
    );

    border-top:
    1px solid #a6c0db;
}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:1000px){

    .paper{

        width:95%;
    }

}