@import url('https://fonts.googleapis.com/css2?family=Rouge+Script&family=Sixtyfour+Convergence&family=Tsukimi+Rounded:wght@400;700&display=swap');
@import url('/colors.css');
@import url('/loader.css');
@import url('/input.css');

h1, h2, h3, h4, h5, h5, h6, p, div, a, button, label {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin: 0px;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: var(--background);
}

.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto; }

.m-0 { margin: 0px !important; }
.my-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.mx-0 { margin-left: 0px !important; margin-right: 0px !important; }
.mt-0 { margin-top: 0px !important; }
.mb-0 { margin-bottom: 0px !important; }
.ml-0 { margin-left: 0px !important; }
.mr-0 { margin-right: 0px !important; }

.m-1 { margin: 8px !important }
.my-1 { margin-top: 8px !important; margin-bottom: 8px !important; }
.mx-1 { margin-left: 8px !important; margin-right: 8px !important; }
.mt-1 { margin-top: 8px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mr-1 { margin-right: 8px !important; }
.ml-1 { margin-left: 8px !important; }

.m-2 { margin: 16px !important; }
.my-2 { margin-top: 16px !important; margin-bottom: 16px !important; }
.mx-2 { margin-left: 16px !important; margin-right: 16px !important; }
.mt-2 { margin-top: 16px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mr-2 { margin-right: 16px !important; }
.ml-2 { margin-left: 16px !important; }

.m-4 { margin: 32px !important; }
.my-4 { margin-top: 32px !important; margin-bottom: 32px !important; }
.mx-4 { margin-left: 32px !important; margin-right: 32px !important; }
.mt-4 { margin-top: 32px !important; }
.mb-4 { margin-bottom: 32px !important; }
.mr-4 { margin-right: 32px !important; }
.ml-4 { margin-left: 32px !important; }

.p-auto { padding: auto !important; }
.py-auto { padding-top: auto !important; padding-bottom: auto !important; }
.px-auto { padding-left: auto !important; padding-right: auto !important; }
.pt-auto { padding-top: auto !important; }
.pb-auto { padding-bottom: auto !important; }

.p-0 { padding: 0px !important; }
.py-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.px-0 { padding-left: 0px !important; padding-right: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pb-0 { padding-bottom: 0px !important; }

.p-1 { padding: 8px !important; }
.py-1 { padding-top: 8px !important; padding-bottom: 8px !important; }
.px-1 { padding-left: 8px !important; padding-right: 8px !important; }
.pt-1 { padding-top: 8px !important; }
.pb-1 { padding-bottom: 8px !important; }

.p-2 { padding: 16px !important; }
.py-2 { padding-top: 16px !important; padding-bottom: 16px !important; }
.px-2 { padding-left: 16px !important; padding-right: 16px !important; }
.pt-2 { padding-top: 16px !important; }
.pb-2 { padding-bottom: 16px !important; }

.border-radius-4 { border-radius: 4px; }
.border-radius-6 { border-radius: 6px; }
.border-radius-8 { border-radius: 8px; }

.pill {
    background-color: var(--primary);
    color: var(--white); 
    border-radius: 16px;
    padding: 2px 8px;
    white-space: nowrap;
    line-height: 1.5;
}

.icon {
    width: 32px;
    height: 32px;
    margin: auto 8px;
}

.sans-serif { font-family: sans-serif; }
.hidden, .flex.hidden { 
    display: none !important;
    width: 0px !important;
    height: 0px !important;
}

.text.xs { font-size: 14px; }
.text.bold { font-weight: bold; }
.text.center, .title.center { text-align: center; }

.content {
    height: 30%;
    display: flex;
    flex-direction: column;
    margin: auto;
}

.header, .header div, .sub-title, .button-container {
    display: flex;
    justify-content: center;
}

.header img {
    width: 120px;
    height: 120px;
}

.header h1 {
    margin: auto -12px;
    font-size: 64px;
    font-family: "Rouge Script", cursive;
    font-style: normal;
}

.sub-title .text {
    margin: 0px 8px;
    font-family: "Tsukimi Rounded", sans-serif;
    font-weight: 700;
}

.cover-image {
    max-height: 68%;
    width: 100%;
    height: 68vh;
    /* object-fit: cover; */
    background-image: url('./assets/Archway.jpg');
    background-size: cover;
    background-position: center;
}

.sub-title {
    margin-bottom: 8px;
}

.button-container {
    column-gap: 8px;
    max-width: fit-content;
    border-radius: 48px;
    background-color: var(--secondary);
    padding: 8px;
    margin: 16px auto;
}

button, a, .button {
    padding: 12px 24px;
    text-transform: uppercase;
    outline: none;
    border: none;
    background-color:var(--transparent);
    border-radius: 24px;
    font-weight: bold;
    font-size: 12px;
    font-family: sans-serif;
    transition: all 120ms ease-in-out;
    text-decoration: none;
    color: #000;
}

.button.inverted, button.inverted, a.inverted {
    background-color: var(--secondary);
}

button.xs, .button.xs {
    font-size: 10px;
    padding: 8px 12px;
} 

button:hover, a:hover, .button:hover {
    background-color: var(--primary);
    color: #FFF;
    cursor: pointer;
}

.separator {
    width: 6px;
    height: 6px;
    margin: auto 4px;
    background-color: color(srgb 0.6832 0.3121 0.2375);
    border-radius: 100%;
}

/* Open state of the dialog  */
.modal[open] {
    opacity: 1;
    transform: scale(1, 1);
}

/* Closed state of the dialog   */
.modal {
    position: fixed;
    display: flex;
    flex-direction: column;

    max-width: 640px;
    width: calc(70% - 32px);
    height: calc(80vh - 32px);
    outline: none;
    border: none;
    border-radius: 4px;
    padding: 16px;
    
    opacity: 0;
    transform: scale(0, 0);
    transition: all 0.25s linear;
}

/*  Before open state  */
/*  Needs to be after the previous .modal:open rule to take effect,
    as the specificity is the same */
@starting-style {
    .modal[open] {
        opacity: 0;
        transform: scale(0, 0);
    }
}

.modal::backdrop {
    background-color: var(--transparent);
    transition: all 0.25s linear;
}

.modal[open]::backdrop {
    background-color: rgba(0,0,0,0.5);
}

@starting-style {
    .modal[open]::backdrop {
        background-color: var(--transparent);
    }
}

.modal .close-modal {
    margin: 0px 8px 0px auto;
}

.modal .header {
    display: flex;
    position: sticky;
    top: -16px;
    background-color: #ffffffe8;
    padding-top: 16px;
}

.modal .header h2 {
    font-family: sans-serif;
    margin: auto 0px auto 8px;
}

.container {
    display: flex;
    flex-direction: column;
}

.container.wrap {
    flex-wrap: wrap;
    flex-direction: unset;
}

.container.horizontal {
    flex-direction: row;
}

.flex { display: flex !important; }
.flex.column { flex-direction: column !important; }
.flex.row { flex-direction: row !important; }
.flex.wrap { flex-wrap: wrap; }
.flex.center { justify-content: center; }
.basis-100 { flex-basis: 100%; }
.basis-75 { flex-basis: 75%; }
.basis-50 { flex-basis: 50%; }
.basis-25 { flex-basis: 25%; }

.modal .container {
    height: 100%;
}

.modal .container button {
    margin: 16px auto 16px auto;
    background-color: var(--primary);
    color: #ffffff;
}

#confirmation {
    margin: auto;
    height: auto;
    font-family: "Rouge Script", cursive;
}

#confirmation .title {
    font-size: 64px;
    margin: 4px 0px;
    padding: 8px;
}

.error-display {
    padding: 16px;
    background-color: rgb(240, 218, 218);
    border-radius: 7px;
    margin: 8px auto;
}

.error-display p {
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
}

.error-display span {
    background-color: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 16px;
}

/* FAQ */
.faq-container {
    width: 80%;
    margin: 0px auto;
}

.faq-item {
    width: calc(100% - 16px);
    margin: 8px;
}

.faq-item .question {
    font-family: sans-serif;
    margin: 4px 0px;
}

/* Travel */
.model-item {
    max-width: calc(460px - 16px);
    width: 100%;
    margin: 8px auto;
    padding: 8px;
}

.model-item .title {
    font-family: sans-serif;   
}

.segment-title {
    font-family: sans-serif;
    width: 460px;
    margin: auto;
    border-bottom: solid 2px var(--secondary);
}

/* iPhone Sizes - Vertical */
@media (max-width: 440px) {
    .header h1 { font-size: 48px; }

    .header img {
        width: 72px;
        height: 72px;
        margin: 8px;
    }

    .content { justify-content: center; }
    .text.xs { font-size: 10px; }
    .text.m-md { font-size: 16px; }
    .button-container { margin-top: 24px; }
    .segment-title { width: 100%; }
    .faq-container { width: 100%; }
    .model-item { width: 100%; padding: 0px; }
    .modal .header h2 { margin: 0px; }
    .error-display { height: fit-content !important; }
    #confirmation .title { font-size: 40px; }

    .input-container { 
        max-width: unset; 
        width: 100%;
        margin: 12px 0px 0px 0px !important; } 


    .modal {
        width: calc(90% - 32px);
        height: calc(90% - 32px);
    }

    .modal .container {
        width: 100% !important;
    }

    .m-basis-100 { flex-basis: 100%; }
    .m-mx-auto { margin: auto; }

    .m-m-0 { margin: 0px !important; }
    .m-my-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
    .m-mx-0 { margin-left: 0px !important; margin-right: 0px !important; }
    .mt-0 { margin-top: 0px !important; }
    .m-mb-0 { margin-bottom: 0px !important; }
    .m-ml-0 { margin-left: 0px !important; }
    .m-mr-0 { margin-right: 0px !important; }

    .m-m-1 { margin: 8px !important }
    .m-my-1 { margin-top: 8px !important; margin-bottom: 8px !important; }
    .m-mx-1 { margin-left: 8px !important; margin-right: 8px !important; }
    .m-mt-1 { margin-top: 8px !important; }
    .m-mb-1 { margin-bottom: 8px !important; }
    .m-mr-1 { margin-right: 8px !important; }
    .m-ml-1 { margin-left: 8px !important; }

    .m-m-2 { margin: 16px !important }
    .m-my-2 { margin-top: 16px !important; margin-bottom: 16px !important; }
    .m-mx-2 { margin-left: 16px !important; margin-right: 16px !important; }
    .m-mt-2 { margin-top: 16px !important; }
    .m-mb-2 { margin-bottom: 16px !important; }
    .m-mr-2 { margin-right: 16px !important; }
    .m-ml-2 { margin-left: 16px !important; }

    .m-text-center { text-align: center !important; }
    .text.m-left, .title.m-left { text-align: left !important; }
}

@media (max-height: 800px) {
    .cover-image { max-height: 58vh; }
    .content { max-height: 40%; }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input,
  label {
    font-size: 16px !important;
  }
}