@import url("colors.css");
/*Import order does not seem to be important*/
@import url("header.css");
@import url("vibrate-1.css");

:root {
    /*This somehow does not affect the SELECT element font*/
    /*The reason (apparently) is that the browser overrides*/
    box-sizing: border-box;
    font-size: .8rem;
    padding: 0;
    margin: 0;
    --side-gutter-width: 1vw;
    --font-primary: "Lora", serif;
    --font-secondary: "Open Sans", sans-serif;
    background-color: var(--color-white);
    font-family: var(--font-secondary);
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
}

div.elm-app-root {
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    min-height: 100vh;
    margin: 0;
    width: 100%;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

main {
    flex: 1 1 90%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0 2rem;
    width: 100%;
}

main>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.fw-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    column-gap: 4.8em;
    row-gap: 1.6em;
    text-wrap: balance;
    padding: 0;
}

.tl-padding {
    padding: 0 var(--side-gutter-width);
}

.main-cta {
    border: none;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-white);
    border-radius: .6em;
    background-color: var(--color-brand-primary-d);
    box-shadow: 1px 2px 2px var(--color-brand-primary-xd);
    background-color: var(--color-brand-secondary-m);
    box-shadow: 1px 1px 2px var(--color-brand-secondary-d);
    transition: all .05s ease-in;

    padding: 1em .6em;
    font-variant-caps: small-caps;
    display: inline-block;
}

.main-cta:hover {
    color: var(--color-black-xd);
    font-weight: 600;
    background-color: var(--color-brand-secondary-xl);
    box-shadow: 1px 1px 2px var(--color-brand-secondary-l);
    cursor: pointer;
    translate: 2px;
}

.contact-form {
    padding: 1em;
    border: 1px solid var(--color-brand-primary-xd);
    border-radius: .6em;
    width: 36%;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.contact-form>ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 1.6em;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 2.6em;
}

.contact-form>h2 {
    font-size: large;
    margin-top: 0;
}

.contact-form label {
    /* Uniform size & alignment */
    display: block;
    min-width: 6.4rem;
    text-align: left;
    margin-bottom: .6em;
    font-weight: 600;
    font-size: larger;
}

.contact-form input,
.contact-form textarea {
    font: var(--font-secondary);
    width: 100%;
    min-height: 2.6em;
    box-sizing: border-box;
    border: 1px solid var(--color-brand-primary-xd);
    border-radius: 4px;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-brand-secondary-xl);
    border-width: 2px;
}

.contact-form input:valid {
    border-color: var(--color-green-l);
    border-width: 2px;
}

.contact-form input.vibrate-1 {
    border-color: var(--color-red);
    border-width: 2px;
}


.contact-form textarea {
    vertical-align: top;
    min-height: 6.4em;
}

.contact-form button {
    padding: .6em 2.6em;
    background-color: var(--color-green-d);
    box-shadow: 1px 1px 2px var(--color-green-d);
}

.contact-form button:hover {
    background-color: var(--color-green-l);
    box-shadow: 1px 2px 2px var(--color-green-l);
    color: var(--color-black-xd);
}

.req {
    color: var(--color-red);
}

.pull-south-xs {
    margin-top: .6em;
}

.pull-east-xs {
    margin-left: .6em;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.error-msg {
    color: var(--color-red);
}

@media (min-width: 760px) {
    :root {
        --side-gutter-width: 1rem;
    }

    .contact-form {
        max-width: 80%;
    }
}

footer {
    background-color: var(--color-brand-primary-xd);
    line-height: 1.6;
    color: var(--color-white);
    padding: 1em var(--side-gutter-width);
    font-size: smaller;
}

footer span {
    color: var(--color-pink);
}

footer a {
    color: inherit;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: var(--color-green-l);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.anchor-like,
.anchor-like:hover,
button.anchor-like,
button.anchor-like:hover {
    display: inline-block;
    text-align: left;
    background: none;
    border: none;
    /* Default link color */
    color: var(--color-brand-primary-d);
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 1.6rem;
    box-shadow: none;
    /* Smooth color transition */
    transition: color 0.3s ease;
}

button.anchor-like:hover {
    color: darkblue;
    /* Hover color */
}

button.anchor-like:active {
    color: red;
    /* Active color */
}

button.anchor-like:focus {
    outline: none;
    text-decoration: none;
    /* Remove underline on focus */
    color: purple;
    /* Focus color */
    background: none;
    border: none;
}