*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --cream:#F8E7D2;
    --paper:#FFF9F0;
    --wine:#39141a;
    --red:#D94F4F;
    --pink:#F5B7B1;
    --green:#7B9E4B;
}

body{
    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #F8E7D2,
        #FFF5EA,
        #F6DDD3
    );

    font-family:"Poppins",sans-serif;
    color:var(--wine);

    overflow-x:hidden;
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    background-image:
    radial-gradient(
        rgba(217,79,79,.15) 1px,
        transparent 1px
    );

    background-size:28px 28px;

    opacity:.6;

    z-index:-1;
}

.page{
    width:min(92%,1100px);

    margin:auto;

    padding:50px 0;
}


/* =========================
   HEADER
========================= */

header{
    text-align:center;

    margin-bottom:55px;
}

.logo{
    width:55px;

    margin-bottom:20px;
}

h1{
    font-family:"Fredoka",sans-serif;

    font-size:clamp(40px,6vw,65px);

    color:var(--wine);
}

.subtitle{
    margin-top:15px;

    color:#70555b;
}


/* =========================
   QUESTION BOX
========================= */

.question-box{
    display:flex;

    justify-content:center;
}

.paper{
    width:min(100%,650px);

    background:rgba(255,255,255,.82);

    padding:35px;

    border-radius:28px;

    border:2px solid rgba(217,79,79,.15);

    box-shadow:
    0 12px 30px rgba(57,20,26,.08);
}

.label{
    margin-bottom:12px;

    font-weight:600;
}


/* =========================
   NORMAL INPUT
========================= */

input{
    width:100%;

    padding:13px 15px;

    margin-bottom:12px;

    border:none;
    outline:none;

    border-radius:14px;

    background:#FFF7F2;

    color:var(--wine);

    font-family:"Poppins",sans-serif;

    font-size:14px;
}


/* =========================
   MAIN QUESTION TEXTAREA
========================= */

#questionInput{
    width:100%;

    height:140px;

    padding:18px;

    border:none;
    outline:none;

    resize:none;

    border-radius:18px;

    background:#FFF7F2;

    color:var(--wine);

    font-family:"Poppins",sans-serif;

    font-size:14px;

    line-height:1.6;
}


/* =========================
   ADMIN ANSWER INPUT
========================= */

.admin-answer{
    width:100%;

    height:55px;

    min-height:55px;
    max-height:90px;

    margin-top:15px;

    padding:10px 13px;

    border:none;
    outline:none;

    resize:vertical;

    border-radius:13px;

    background:#FFF7F2;

    color:var(--wine);

    font-family:"Poppins",sans-serif;

    font-size:13px;

    line-height:1.5;
}


/* =========================
   BUTTON
========================= */

button{
    width:100%;

    margin-top:20px;

    padding:14px;

    border:none;

    border-radius:999px;

    background:var(--wine);

    color:#ffffff;

    font-family:"Poppins",sans-serif;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}

button:hover{
    background:var(--red);

    transform:translateY(-2px);
}

button:disabled{
    opacity:.6;

    cursor:not-allowed;

    transform:none;
}


/* ADMIN SAVE BUTTON */

.save-btn{
    margin-top:12px;

    padding:11px;

    font-size:13px;
}


/* =========================
   ANSWERS
========================= */

.answers{
    margin-top:70px;
}

.answers h2{
    text-align:center;

    color:var(--wine);

    margin-bottom:35px;
}

.answer-card{
    background:rgba(255,255,255,.82);

    border-radius:25px;

    padding:25px;

    margin-bottom:20px;

    border:2px solid rgba(217,79,79,.12);

    box-shadow:
    0 10px 25px rgba(57,20,26,.06);
}

.question{
    font-weight:700;

    color:var(--red);

    line-height:1.6;

    white-space:pre-wrap;
}

.answer-card hr{
    border:none;

    border-top:1px solid rgba(57,20,26,.12);

    margin:16px 0;
}

.answer{
    margin-top:15px;

    line-height:1.8;

    color:var(--wine);

    white-space:pre-wrap;
}


/* =========================
   ADMIN
========================= */

#adminSection{
    width:min(100%,650px);

    margin:35px auto 0;
}

#questionList{
    width:100%;
}

#loginBox{
    margin:auto;
}


/* =========================
   FOOTER
========================= */

footer{
    text-align:center;

    margin-top:60px;

    font-size:13px;

    color:#8d6c6c;
}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

    .page{
        width:92%;

        padding:35px 0;
    }

    header{
        margin-bottom:35px;
    }

    .paper{
        padding:25px;

        border-radius:22px;
    }

    #questionInput{
        height:120px;

        padding:15px;
    }

    .answer-card{
        padding:20px;

        border-radius:20px;
    }

    .admin-answer{
        height:50px;

        min-height:50px;

        font-size:13px;
    }

    button{
        padding:13px;
    }

}