@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
.heading-1 {
    font-family: var(--setting-heading_1_font_family);
    font-weight: var(--setting-heading_1_font_weight);
    /* font-size: var(--setting-heading_1_font_size); */
    font-style: var(--setting-heading_1_font_style);
}

.heading-2 {
    font-family: var(--setting-heading_2_font_family);
    font-weight: var(--setting-heading_2_font_weight);
    /* font-size: var(--setting-heading_2_font_size); */
    font-style: var(--setting-heading_2_font_style);
}

.paragraph-1 {
    font-family: var(--setting-paragraph_1_font_family);
    font-weight: var(--setting-paragraph_1_font_weight);
    /* font-size: var(--setting-paragraph_1_font_size); */
    font-style: var(--setting-paragraph_1_font_style);
}

.paragraph-2 {
    font-family: var(--setting-paragraph_2_font_family);
    font-weight: var(--setting-paragraph_2_font_weight);
    /* font-size: var(--setting-paragraph_2_font_size); */
    font-style: var(--setting-paragraph_2_font_style);
}

button {
    font-family: var(--setting-button_text_font_family);
    font-weight: var(--setting-button_text_font_weight);
    /* font-size: var(--setting-button_text_font_size); */
    font-style: var(--setting-button_text_font_style);
}

.input-field {
    background-color: var(--input_field_background_color);
    color: var(--input_field_text_color);
    border-color: var(--input_field_border_color, transparent);
    border-style: solid;
    border-radius: 1vmin;
    border-width: 1px;
}

.input-field.error {
    border-color: var(--input_field_error_border_color, #FE4A67);
    border-width: 2px
}

.primaryButton {
    background-color: var(--primary_button_background_color);
    color: var(--primary_button_text_color);
    border-color: var(--primary_button_border_color);
    border-radius: var(--setting-primary_button_shape);
}

.secondaryButton {
    background-color: var(--secondary_button_background_color);
    color: var(--secondary_button_text_color);
    border-color: var(--secondary_button_border_color);
    border-radius: var(--setting-secondary_button_shape);
}

.tertiaryButton {
    background-color: var(--tertiary_button_background_color);
    color: var(--tertiary_button_text_color);
    border-color: var(--tertiary_button_border_color);
    border-radius: var(--setting-tertiary_button_shape);
}

.modalContainer {
    background-color: var(--modal_background_color);
    color: var(--modal_text_color);
}

.modalContainer .primaryButton {
    background-color: var(--modal_primary_button_background_color);
    color: var(--modal_primary_button_text_color);
    border-color: var(--modal_primary_button_border_color);
    border-radius: var(--setting-modal_primary_button_shape);
}

.modalContainer .secondaryButton {
    background-color: var(--modal_secondary_button_background_color);
    color: var(--modal_secondary_button_text_color);
    border-color: var(--modal_secondary_button_border_color);
    border-radius: var(--setting-modal_secondary_button_shape);
}

#closed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--page_background_color);
    color: var(--page_text_color);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4cqmin;
    flex-direction: column;
}
#closed img {
    max-width: 10cqmin;
    max-height: 10cqmin;
}
#closed .heading-1 {
    font-size: 4cqmin;
}

.largeLogo {
    max-width: calc(26vmin * var(--setting-logo_size, 0.3));
    max-height: calc(26vmin * var(--setting-logo_size, 0.3));
}
.smallLogo {
    max-width: calc(26vmin * var(--setting-logo_size, 0.3));
    max-height: calc(26vmin * var(--setting-logo_size, 0.3));
}

@media (max-aspect-ratio: 1) {
  .largeLogo {
        max-width: calc(26vmax* var(--setting-logo_size, 0.3));
        max-height: calc(26vmax * var(--setting-logo_size, 0.3));
  }
    .smallLogo {
        max-width: calc(26vmax * var(--setting-logo_size, 0.3));
        max-height: calc(26vmax* var(--setting-logo_size, 0.3));
    }
}