@font-face {
    font-family: 'Montas';
    src: url('/fonts/Montas.otf');
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/PlayfairDisplay.otf');
}


:root {
    --font-family: 'Montas', serif;
    --font-size: 14px;
    --text-color: #3c3c3c;
    --text-subtle: #777777;
    --full-page-size: 3rem;
    --title-size: 1.5rem;
    --subtitle-size: 1.2rem;
    --grey-background: #ededed;
    --breakpoint: 768px;
    --spain-subtle: #f1ece5;
    --spain-color: rgb(251, 136, 54);
}

.title {
    font-size: var(--title-size);

}

.primary-color {
    color: #bbaa99
}

.subtitle {
    font-size: var(--subtitle-size);
}

.text-subtle {
    color: var(--text-subtle);
}

.code-input {
    font-family: var(--font-family), serif;
    font-size: calc(var(--full-page-size)* 0.5);
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 5px;
    text-align: center;
}

input.submit {
    font-family: var(--font-family), serif;
}

.max-screen-width {
    max-width: 1080px;
    width: 100%;
}

html {
    height: 100%;
    width: 100vw;
    font-size: var(--font-size);
    font-family: var(--font-family), serif;
}

* {
    box-sizing: border-box;
}

p {
    margin: 0;
}

body {
    color: var(--text-color);
    margin: 0;
    min-height: 100%;
    padding: 0;
}


.w-full {
    width: 100%;
}

.text-center {
    text-align: center;
}

.border-text {
    border-color: var(--text-color);
}


.text-sm {
    font-size: 0.8rem;
}

.uppercase {
    text-transform: uppercase;
}

.w-0 {
    width: 0;
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--text-color);
    outline: none;
    cursor: pointer;
    display: grid;
    place-content: center;

    &::before {
        content: ' ';
        width: 0.65rem;
        height: 0.65rem;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 2em 2em var(--text-color);

    }

    &:checked::before {
        transform: scale(1);
    }
}

textarea {
    resize: none;
    border: 0 none;
    background-color:  rgba(0, 0, 0, 0.1);
    font-size: var(--font-size);
    font-family: var(--font-family), serif;

    &:focus {
        border: none;
    }
}

.bg-gray {
    background-color: var(--grey-background);
}

.bg-spain {
    background-color: var(--spain-subtle);
}

@media (min-width: 768px) {
    :root {
        --font-size: 20px;
        --title-size: 2rem;
        --subtitle-size: 1.5rem;
        --full-page-size: 5rem;
    }
}