/*==========================================================
STORYBOOK VOICES
FEEDBACK PAGE
feedback.css
==========================================================*/


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


body{

    background:

        linear-gradient(

            180deg,

            #f7f3ea,

            #eef6ff

        );

    font-family:

        Garamond,
        Georgia,
        serif;

    color:#48635d;

}


/*==========================================================
MAIN CARD
==========================================================*/

.feedbackCard{

    width:92%;

    max-width:900px;

    margin:40px auto;

    padding:40px;

    background:

        rgba(255,255,255,.78);

    backdrop-filter:

        blur(22px);

    border:

        1px solid
        rgba(255,255,255,.75);

    border-radius:32px;

    box-shadow:

        0 18px 40px
        rgba(0,0,0,.10);

}


/*==========================================================
TITLE
==========================================================*/

.feedbackTitle{

    text-align:center;

    font-size:42px;

    font-weight:700;

    margin-bottom:28px;

    color:#48635d;

}


/*==========================================================
INTRO
==========================================================*/

.feedbackIntro{

    text-align:center;

    font-size:22px;

    line-height:1.7;

    margin-bottom:35px;

    color:#5f6967;

}


/*==========================================================
QUESTION LIST
==========================================================*/

.feedbackQuestions{

    width:90%;

    margin:0 auto 34px auto;

    font-size:24px;

    line-height:2;

    color:#48635d;

}


.feedbackQuestions li{

    margin-left:26px;

}


/*==========================================================
TEXT AREA
==========================================================*/

#feedbackText{

    display:block;

    width:92%;

    max-width:760px;

    height:240px;

    margin:30px auto;

    padding:22px;

    resize:vertical;

    font-family:

        Garamond,
        Georgia,
        serif;

    font-size:22px;

    line-height:1.7;

    color:#4d4d4d;

    background:

        rgba(255,255,255,.95);

    border:

        1px solid
        #ddd6ca;

    border-radius:26px;

    outline:none;

    box-shadow:

        inset
        0 2px 6px
        rgba(0,0,0,.05);

}


#feedbackText:focus{

    border-color:#d8b85c;

    box-shadow:

        0 0 18px
        rgba(212,175,55,.35);

}


/*==========================================================
BUTTONS
==========================================================*/

.storybookButton{

    display:block;

    width:300px;

    height:60px;

    margin:20px auto;

    border:none;

    border-radius:30px;

    cursor:pointer;

    font-family:

        Garamond,
        Georgia,
        serif;

    font-size:24px;

    font-weight:700;

    color:#48635d;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.98),

            rgba(252,243,221,.98),

            rgba(244,227,188,.98)

        );

    box-shadow:

        inset
        0 3px 6px
        rgba(255,255,255,.95),

        inset
        0 -5px 8px
        rgba(216,184,92,.25),

        0 10px 28px
        rgba(212,175,55,.22);

    transition:

        .22s;

}


.storybookButton:hover{

    transform:

        translateY(-2px);

    color:#355149;

    box-shadow:

        inset
        0 3px 6px
        rgba(255,255,255,.95),

        inset
        0 -6px 9px
        rgba(216,184,92,.32),

        0 14px 34px
        rgba(212,175,55,.38);

}


.storybookButton:active{

    transform:

        translateY(1px);

}


/*==========================================================
RETURN LINK
==========================================================*/

.returnHome{

    display:block;

    margin-top:10px;

    text-align:center;

    font-size:18px;

    color:#48635d;

    text-decoration:none;

}


.returnHome:hover{

    text-decoration:underline;

}


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

.feedbackFooter{

    margin-top:40px;

    text-align:center;

    font-size:15px;

    color:#7a756e;

}