/* =========================================================
   CSS Styling for Contact.html 
   ========================================================= */

        .contact {
            width: 100%;
            max-width: 1000px;
            margin: 4rem auto 6rem;
            padding: 0 1.5rem;
        }


        /* --------------------------
        Intro
        -------------------------- */

        .contact-intro-block {
            max-width: 620px;
        }

        .contact h1 {
            margin: 0 0 1.5rem;

            font-size: clamp(2.3rem, 4vw, 3.2rem);
            line-height: 1.1;
        }

        .contact-intro {
            max-width: 560px;
            margin: 0;

            color: #555;
            font-size: 1.15rem;
            line-height: 1.8;
        }


        /* --------------------------
        Illustration
        -------------------------- */

        .contact-illustration {
            width: 100%;
            margin: 0 auto 0;
            text-align: center;
        }

        .contact-illustration img {
            display: block;
            width: 60%;
            max-width: 720px;
            height: auto;
            margin: 0 auto;
        }

        /* --------------------------
        Contact Details
        -------------------------- */

        .contact-details {
            max-width: 620px;
            margin: 1.75rem auto 0;
            text-align: center;
        }


        /* Social links */

        .contact-socials {
            margin: 0;

            color: #555;
            font-size: 0.95rem;
            line-height: 1.8;
        }

        .contact-socials a {
            color: #222;
            font-weight: 500;

            text-decoration-line: underline;
            text-decoration-thickness: 1px;
            text-decoration-color: #999;
            text-underline-offset: 3px;

            transition:
                color 0.2s ease,
                text-decoration-color 0.2s ease;
        }

        .contact-socials a:hover {
            color: #000;
            text-decoration-color: #000;
            text-decoration-thickness: 2px;
            text-underline-offset: 5px;
        }

        /* --------------------------
        Built in the open
        -------------------------- */

        .site-feedback {
            max-width: 430px;
            margin: 2rem auto 0;

            color: #666;
            font-size: 0.86rem;
            line-height: 1.6;
        }

        .site-feedback a {
            color: #444;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;

            background-image: linear-gradient(currentColor, currentColor);
            background-size: 0% 1px;
            background-position: left bottom;
            background-repeat: no-repeat;

            transition:
                background-size 0.25s ease,
                color 0.2s ease;
        }

        .site-feedback a:hover {
            color: #222;
            background-size: 100% 1px;
        }

        .site-feedback a span {
            display: inline-block;
            margin-left: 2px;
        }


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

        @media (max-width: 700px) {

            .contact {
                margin: 2.5rem auto 4rem;
                padding: 0 24px;
            }

            .contact h1 {
                font-size: clamp(2.2rem, 10vw, 3rem);
                margin-bottom: 1.25rem;
            }

            .contact-intro {
                font-size: 1rem;
                line-height: 1.75;
            }

            .contact-illustration {
                margin-top: 2rem;
            }

            .contact-illustration img {
                max-width: 500px;
            }

            .contact-details {
                margin-top: 1.5rem;
            }

            .contact-socials {
                max-width: 360px;
                margin: 0 auto;

                font-size: 0.9rem;
                line-height: 1.8;
            }

            .site-feedback {
                max-width: 330px;
                margin-top: 2rem;
            }
        }