/* Contact section */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
    --lime: #b4ff47;
    --lemon: #ffeb47;
}

.contact {
    background: #005e48;
    background: #f5f5f5;
    padding: clamp(var(--block-spacing-md), 8vw, var(--block-spacing-xl)) clamp(var(--block-spacing-sm), 6vw, var(--block-spacing-md));
}

    .contact > .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .contact h1 {
        color: var(--lemon);
        text-align: center;
    }

    .contact .theme-wrapper {
        /*font-size: clamp(1.2em, 2.2vw, 1.4em);*/ /* min: ~785px, max: ~945px */
        font-size: clamp(1.2em, 2vw, 1.4em); /* min: ~880px, max: ~1065px */
        font-weight: 500;
        color: #fff;
        text-shadow: 0 0 10px black;
    }


    .contact h1, .contact .theme-wrapper {
        margin-bottom: clamp(25px, 6vw, 75px); /* min: ~420px, max: ~1250px */
    }


.contact .contact-methods {
    display: flex;
    flex-direction: column;
    text-align: center;
}

    .contact .contact-methods .item {
        margin: 15px;
    }

        .contact .contact-methods .item .label {
            font-size: 1.2rem;
            font-weight: 600;
            color: #fff;
            /*text-shadow: 0 0 10px black;*/
        }

        .contact .contact-methods .item .value {
            font-size: 2rem;
            font-weight: 900;
            color: var(--lemon);
            white-space: nowrap;
        }

        .contact .contact-methods .item.item-email .value {
            font-size: min(5vw, 2rem);
        }


@media(min-width: 1024px) {
    .contact .contact-methods {
        flex-direction: row;
        justify-content: space-around;
        text-align: left;
    }

        .contact .contact-methods .item {
            margin: 0;
        }
}

@media(min-width: 1200px) {
    .contact .contact-methods .item .label {
        font-size: 1.5em;
    }

    .contact .contact-methods .item .value,
    .contact .contact-methods .item.item-email .value {
        font-size: 2.6em;
    }
}

/*.contact .contact-methods a.item:hover .value {
    color: tomato;
}*/

@media (min-width: 360px) {
    .contact .contact-methods a.item:hover {
        transform: scale(1.1) rotate(-2deg);
    }
}

@media (min-width: 480px) {
    .contact .contact-methods a.item:hover {
        transform: scale(1.2) rotate(-2deg);
    }
}

/* First & last child margin resets */
.contact > .container > *:first-child {
    margin-top: 0;
}

.contact > .container > *:last-child {
    margin-bottom: 0;
}