div.section.header {
    text-align: center;
    h1 {
        font-size: 4rem;
    }

    p.subtitle {
        font-size: 1.4rem;
    }
}

div.cf-turnstile {
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
    width: fit-content;
}

div.section.faqs > div.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    justify-content: center;

    div.card {
        max-width: 500px;
        width: 100%;
        position: relative;
        padding-left: 90px;
        
        display: flex;
        flex-direction: column;
        justify-content: center;

        img.monster {
            position: absolute;
            width: 100px;

            &.clara {
                top: calc(50% - 50px);
                left: -17px;
            }

            &.maya {
                top: calc(50% - 80px);
                left: -23px;
            }

            &.phoebe {
                top: calc(50% - 55px);
                left: -20px;
            }

            &.hallie {
                top: calc(50% - 60px);
                left: -14px;
            }

            &.eve {
                top: calc(50% - 65px);
                left: -14px;
            }
        }

        p {
            margin-top: 18px;
        }
    }
}

div.section.contact-us {
    div.or {
        text-align: center;
        font-size: 1.4rem;
        font-family: 'Bubblegum Sans';
        margin-bottom: 72px;
        max-width: 600px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 36px;

        &::before,&::after {
            content: '';
            flex: 1;
            border-bottom: solid white 1px;
        }
    }

    form.card {
        width: 100%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;

        div.loading {
            display: none;
            svg {
                fill: var(--colour-primary);
                width: 40px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 36px;
                margin-bottom: 36px;
            }
        }

        &.loading {
            div.loading {
                display: block;
            }

            > * {
                display: none;
            }
        }

        div.success {
            display: none;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 36px;

            div.left {
                flex: 1;

                p.title {
                    font-family: 'Bubblegum Sans';
                    font-size: 2.4rem;
                }

                p:not(.title) {
                    margin-top: 18px;
                }

                div.support-link {
                    border: var(--colour-primary) solid 1px;
                    padding: 6px 12px;
                    background-color: black;
                    margin-top: 18px;
                }

                a {
                    margin-top: 18px;
                    margin-left: auto;
                    margin-right: auto;
                }
            }

            div.right {
                width: 200px;

                img {
                    width: 100%;
                }
            }
        }

        &.success {
            div.success {
                display: flex !important;
            }

            > * {
                display: none !important;
            }
        }

        button[type="submit"] {
            margin-top: 36px;
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 55px;
        }
    }
}

div.section.posts {
    div.wrapper > div.posts {
        max-width: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        display: flex;
        flex-direction: column;
        gap: 36px;

        article.post {
            display: flex;
            gap: 18px;

            svg {
                width: 50px;
                fill: white;
                display: none;
            }

            div.content {
                flex: 1;

                p.author {
                    font-family: 'Bubblegum Sans';
                    font-size: 1.4rem;
                }

                p.timestamp {
                    font-size: 0.8rem;
                }

                div.message {
                    margin-top: 18px;
                }
            }

            &.staff {
                flex-direction: row-reverse;
                svg.staff {
                    display: block;
                }
            }

            &.customer {
                svg.customer {
                    display: block;
                }
            }
        }
    }

    div.wrapper > div.new-post {
        margin-top: 36px;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;

        form {
            label {
                font-family: 'Bubblegum Sans';
                font-size: 1.4rem;
                display: block;
            }

            textarea {
                width: 100%;
                height: 120px;
            }

            button {
                margin-left: auto;
                margin-right: 0;
            }
        }
    }
}