:root {
        font-size: 125%;
        --primary-text-color: #fef5ee;
        --header-blockquote-font: 'Beth Ellen', sans-serif;
        --primary-font: 'Lexend', sans-serif;

}


body {
        font-family: var(--primary-font);
        font-weight: 300;
        background-color: #fef5ee;
        padding: 0;
        margin: 0;
        position: relative;
}

p {
        font-family: var(--primary-font);
        font-weight: 300;
        padding-block: 1rem;

}

article>p {
        line-height: 1.8;
        font-size: 17px;
}

header {
        font-family: var(--header-blockquote-font);
        color: var(--primary-text-color);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2% 0;
        flex-direction: column;
        background: #EC368D;
        background: linear-gradient(180deg, rgba(236, 54, 141, 1) 0%, rgba(255, 193, 69, 1) 100%);
}

h1 {
        color: var(--primary-text-color);
        font-size: 2.75rem;

}


.subtitle {
        color: var(--primary-text-color);
        font-size: 1.75rem;
        align-items: flex-start;
        margin-block-start: -2rem;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        white-space: nowrap;
}

#author-quote {
        font-size: 2rem;
        padding: 1rem;
        color: #EC368D;
        position: relative;
        align-self: center;
        left: 0;

}

#author-quote::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to top, #EC368D, #ffc145);
        height: 45%;
        width: 3px;
}

#author-first-blockquote {
        color: #FFC145;
        position: relative;
        padding: 1rem;
}

#author-first-blockquote::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to top, #EC368D, #ffc145);
        height: 45%;
        width: 3px;
}

h2 {
        display: flex;
        flex-direction: column;
        margin-block: 3rem 1rem;
        gap: 1rem;
        font-size: 1.25rem;
        text-transform: uppercase;
        font-weight: 700;
}

.author,
.author2 {
        font-size: 1.5rem;
        text-transform: uppercase;
        font-weight: 700;
}

.author2 {
        padding-block-start: 4rem;
}


a {
        text-decoration: none;

}

#section-box {
        border: 2px solid;
        border-radius: 12px;
        border-image: linear-gradient(90deg, #ec368d, #ffc145) 1;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 700px;
        margin: 3rem auto;
        gap: 1rem;
}

#section-box ul {
        display: flex;
        flex-wrap: wrap;
        white-space: nowrap;
        justify-content: center;
        gap: .75rem 2.5rem;
        padding-left: 1rem;
        margin: 0;
        font-family: var(--header-blockquote-font);
        font-size: 16px;

}

#section-box ul li:nth-child(1)::marker {
        color: #EC368D;
}

#section-box ul li:nth-child(2)::marker {
        color: #ffc145;
}

#section-box ul li:nth-child(3)::marker {
        color: #EC368D;
}

footer a {
        color: var(--primary-text-color);
}

#article-link {
        color: #EC368D;
        text-transform: uppercase;
}

#my-response {
        padding-block-start: 2rem;
}

#my-response h4 {
        margin-block-start: 2rem;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: 700;
}

#my-response>p:last-child {
        margin-bottom: 200px;
}

main {
        padding: 2%;
        padding-inline: 8%;
}

.highlight {
        display: flex;
        flex-direction: column;
}

blockquote {
        padding: 1rem;
}


blockquote p {
        font-weight: 700;
        font-size: .75rem;
        font-family: var(--header-blockquote-font);

}

.reflection-blockquote {
        background: linear-gradient(to top, #EC368D, #ffc145);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        position: relative;

}

.reflection-blockquote::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to top, #EC368D, #ffc145);
        height: 45%;
        width: 3px;
}

li {
        padding-block: 0.25rem;
}

ul {
        margin-block-end: 6rem;
        list-style-type: disc;
}


footer {
        color: var(--primary-text-color);
        width: 100%;
        position: fixed;
        inset-block-end: 0px;
        background: #EC368D;
        background: linear-gradient(90deg, rgba(236, 54, 141, 1) 0%, rgba(255, 193, 69, 1) 100%);
        display: flex;
        flex-direction: column-reverse;
}

#class-title {
        align-self: center;
        font-size: 16px;
        padding-block: 1rem 1.5rem !important;
}


footer p {
        font-weight: 700;
        font-family: var(--primary-font);


}

#footer-links {
        display: flex;
        justify-content: space-between;
        margin-inline: 20%;
        align-items: center;
}

.footer-link1,
.footer-link2 {
        padding-block-start: 1.5rem;
        color: var(--primary-text-color);
        white-space: nowrap;
        font-size: 16px;
}

@media screen and (min-width: 480px) {
        h1 {
                font-size: 3.5rem;
        }

        h2 {
                font-size: 1.5rem;
        }

        .subtitle {

                font-size: 2.25rem;
        }

        #class-title,
        .footer-link1,
        .footer-link2 {
                font-size: 20px;
        }

        #section-box ul {
                font-size: 20px;
        }

        blockquote p {
                font-weight: 700;
                font-size: 1.25rem;

        }

        article>p {
                font-size: 20px;
        }
}

@media screen and (min-width: 768px) {
        h1 {
                font-size: 6rem;
        }


        .subtitle {

                font-size: 3rem;
        }

        footer {
                flex-direction: row;
                justify-content: space-between;
                padding-inline-start: 2%;
        }

        #class-title {
                padding-block: 1rem !important;
        }

        #footer-links {
                margin-inline: 0rem;
                margin-right: 2rem;
                justify-content: space-between;
                gap: 0 1rem;
        }

        .footer-link1,
        .footer-link2 {
                padding-block: 1rem;
        }

        #author-quote {
                left: 3rem;
                padding: 3rem;

        }

        #author-first-blockquote {
                padding: 1.5rem 1.5rem 1.5rem 3rem;
        }

        main {
                padding: 2%;
                padding-inline: 22%;
        }

        blockquote p {
                font-weight: 700;
                font-size: 1.5rem;

        }

        blockquote {
                padding: 1.5rem;
        }
         article>p {
                font-size: 24px;
        }
}