/* ===========================================
   BACKGROUND
   =========================================== */
body {
    background: url(../images/comment_back1.jpg) no-repeat fixed;
    background-size: cover;          /* better for multi-screen */
    background-position: center;
    color: #e9e8eb;
    overflow-x: hidden;
}

/* ===========================================
   MAIN CONTENT WRAPPER
   =========================================== */
.text {
    clear: both;
    margin: auto;
    width: 70%;
    max-width: 1100px;
    padding-bottom: 100px;

    /* responsive spacing */
    padding-top: clamp(40px, 8vw, 120px);
}

/* ===========================================
   TITLES & HEADINGS
   =========================================== */
h1, 
p.title {
    text-align: center;
    line-height: 1.5em;
}

h1 {
    font-size: clamp(26px, 5vw, 45px);
}

h1.secret {
    padding-top: clamp(60px, 8vw, 100px);
}

/* Dividing lines */
hr#title1 {
    width: clamp(140px, 25%, 245px);
    margin: 0 auto 20px auto;
}
hr#title2 {
    width: clamp(200px, 50%, 470px);
    margin: 0 auto 20px auto;
}

p.title {
    font-size: clamp(14px, 2vw, 18px);
    margin-bottom: 40px;
}

/* ===========================================
   SECRET LIST SECTION
   =========================================== */
ul.secret {
    list-style-image: url(../images/list.png);
    padding-left: 22px;
}

li.secret {
    padding: 10px 0;
    font-size: clamp(15px, 2.2vw, 20px);
}

li.pink {
    font-style: oblique;
    list-style-image: url(../images/list2.png);
}

p.secret {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
}

/* ===========================================
   ARTIST HEADINGS
   =========================================== */
h2 {
    border-left: solid 10px #03a8f4;
    border-bottom: solid 1px #03a8f4;
    padding-left: 10px;
    padding-bottom: 4px;
    margin-bottom: 15px;
    margin-top: 40px;

    font-size: clamp(18px, 3vw, 28px);
}

/* Artist comments */
p.comment {
    font-size: clamp(15px, 2.2vw, 20px);
    line-height: 1.6em;
    margin-bottom: 16px;
}


/* ===========================================
   RESPONSIVE BREAKPOINTS
   =========================================== */

/* Tablets (<= 768px) */
@media (max-width: 768px) {
    .text {
        width: 84%;
    }

    ul.secret {
        padding-left: 18px;
    }
}

/* Phones (<= 480px) */
@media (max-width: 480px) {
    .text {
        width: 90%;
        padding-bottom: 80px;
    }

    li.secret, 
    p.comment {
        line-height: 1.55em;
    }

    h2 {
        margin-top: 28px;
    }
}

/* Very small devices (<= 360px) */
@media (max-width: 360px) {
    .text {
        width: 92%;
    }

    h1.secret {
        padding-top: 60px;
    }

    ul.secret {
        padding-left: 14px;
    }
}