@import url("https://fonts.googleapis.com/css2?family=Cookie&family=PT+Serif&family=Material+Icons+Round&display=swap");

:root {
    --color: #212121;
    --background-color: #fafafa;
    --distinct-element-background-color: #eeeeee;
    --accent: #01579B;
    --color-on-accent: #fafafa;
    --form-gray: #aaaaaa;
    --default-padding: 3em;
    --small-font: "PT Serif", serif;
    --large-font: "Cookie", sans-serif;
    --color-details: #E3F2FD;
    --color-on-details-color: #212121;
    --color-gallery: #E0F7FA;
    --color-on-gallery-color: #212121;
    --color-registry: #E1F5FE;
    --color-on-registry-color: #212121;
    --image-background-color: #e0eef6;
    --gallery-gap: 1em;
    --unit-xsmall: 5px;
    --unit-small: 10px;
    --unit-regular: 15px;
    --unit-medium: 20px;
    --unit-large: 40px;
}

* {
    font-family: var(--small-font);
    box-sizing: border-box;
}

html,
body,
main {
    margin: 0;
    padding: 0;
    color: var(--color);
    scroll-behavior: smooth;
}

body {
    background-color: var(--background-color);
    margin-top: 64px;
}

nav {
    padding: 0 var(--default-padding);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--distinct-element-background-color);
    z-index: 999;
}

nav a {
    text-decoration: none;
    color: var(--accent);
    transition: 0.25s;
    font-weight: bold;
}

nav a:hover,
nav a.active {
    color: var(--color);
}

#mobilenavcheck {
    display: none;
}

#mobilenavcheck+label {
    cursor: pointer;
    display: none;
}

#mobilenavcheck+label:before {
    content: "menu";
    font-family: "Material Icons Round";
    font-size: 24px;
    vertical-align: middle;
    color: var(--accent);
}

#mobilenavcheck:checked+label:before {
    content: "close";
}

#mobilenavcheck:checked~.mobilenav {
    display: flex;
}

.mobilenav {
    position: fixed;
    top: 60px;
    background-color: var(--distinct-element-background-color);
    left: 0;
    right: 0;
    border-radius: 0 0 12px 12px;
    padding: var(--default-padding);
    display: none;
    flex-direction: column;
}

.mobilenav a {
    padding: 12px;
    text-align: center;
}

.desktopnav a {
    padding: 10px 20px;
}

.desktopnav .special,
.mobilemenuarea .special {
    border: 2px solid var(--accent);
    border-radius: 6px;
}

.mobilemenuarea {
    display: none;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.mobilemenuarea .special:not(.mobilenav .special) {

    padding: 10px 20px;
}

.desktopnav .special:hover,
.mobilemenuarea .special:hover,
.desktopnav .special.active,
.mobilemenuarea .special.active {
    background-color: var(--accent);
    color: var(--color-on-accent);
}

.profile-image {
    max-width: 50vw;
    max-height: 50vh;
    background: aliceblue;
    border-radius: 1em;
    margin-bottom: var(--unit-medium);
}

.profile-image.left {
    float: left;
    margin-right: var(--unit-medium);
}

.profile-image.right {
    float: right;
    margin-left: var(--unit-medium);
}

section.about-couple {
    font-size: 1.5em;
    width: 80%;
    margin: var(--unit-large) auto;
    clear: both;
}

.rsvp-adults, .rsvp-children {
    text-align: left;
}

.rsvp-adults a, .rsvp-children a {
    font-size: 0.75em;
}

.rsvp-children {
    display: none;
}

.rsvp-children .rsvp-input :nth-child(2) {
    width: 5em;
}

.rsvp-input {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--unit-xsmall);
}

.rsvp-input button {
    border: 1px solid var(--form-gray);
    background: var(--distinct-element-background-color);
    color: #C62828;
    border-radius: var(--unit-xsmall);
    margin: auto;
}

.disregardText {
    font-size: var(--unit-medium);
}

.photogallery img, .boothgallery a {
    display: inline-block;
    margin: 0 0 var(--gallery-gap);
    width: 100%;
    border-radius: 12px;
    transition: 0.25s;
    filter: grayscale(0.8);
    position: relative;
    height: auto;
}

.boothgallery a {
    filter: none;
}

.boothgallery img {
    width: 100%;
    border-radius: 12px;
}

.boothgallery i {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: right;
    padding: 20px;
    color: #fafafa;
    background: linear-gradient(0deg, black, transparent);
    border-radius: 12px;
}

.registry {
    height: calc(100vh - 64px);
}

.registry-loading {
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 0;
}

iframe {
    z-index: 0;
    position: relative;
}
a.disabled {
    pointer-events: none;
    color: var(--form-gray);
}

.pages {
    text-align: center;
}

.pages a {
    padding: 20px;
}

.complete_rsvp {
    display: none;
}

.login-container {
    font-family: var(--small-font);
    font-size: 150%;
}

.tablesearch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 20px);
    margin: 10px;
    margin-top: 70px;
    gap: 10px;
}

.tablesearch input {
    flex-grow: 1;
    border: none;
    background-color: var(--distinct-element-background-color);
    border-radius: 12px;
    padding: 12px;
    color: var(--color);
}

.filterbutton {
    display: inline-block;
    background-color: transparent;
    color: var(--color);
    margin: 0;
    padding: 5px;
    flex-shrink: 0;
    border-radius: 50px;
    transition: .25s;
}

.filterbutton:hover {
    background-color: var(--distinct-element-background-color);
}

.tablefilterer {
    width: 25%;
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 10px;
    background-color: var(--distinct-element-background-color);
    z-index: 9;
    border-radius: 12px 0 0 12px;
    box-shadow: 3px 3px 3px #00000088, -1px -1px 3px #00000088;
    padding: 5px;
    margin: 0;
    display: none;
    overflow: auto;
}

.tablefilterer h3 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Forms (thanks RJ) */
.login-container {
    width: 50%;
    max-width: 600px;
    min-width: 300px;
    margin: auto;
    text-align: center;
}

.login-container h1 {
    font-family: var(--small-font);
}

.login-container .material-input {
    position: relative;
}

.material-input label {
    position: absolute;
    font-size: 1.2rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--distinct-element-background-color);
    color: var(--form-gray);
    padding: 0 0.3rem;
    margin: 0 0.5rem;
    transition: .1s ease-out;
    transform-origin: left top;
    pointer-events: none;
    border-radius: 10px;
    font-weight: bold;
}

.material-input input, .material-input textarea {
    font-size: 1rem;
    outline: none;
    border: 1px solid var(--form-gray);
    border-radius: 5px;
    padding: 1rem 0.7rem;
    color: var(--form-gray);
    transition: 0.1s ease-out;
    width: 100%;
    margin: 20px auto;
    letter-spacing: 0.1em;
    background-color: var(--distinct-element-background-color);
}

.material-input input:focus, .material-input textarea:focus {
    border-color: var(--accent);
}

.material-input input:focus+label, .material-input textarea:focus+label {
    color: var(--accent);
    top: 20px;
    transform: translateY(-50%) scale(.9);
}

.material-input input:not(placeholder-showing), .material-input textarea:not(placeholder-showing) {
    color: var(--color);
}

.material-input input:not(:placeholder-shown)+label, .material-input textarea:not(:placeholder-shown)+label {
    top: 20px;
    transform: translateY(-50%) scale(.9);
    color: var(--color);
}

.login-container .submit-container {
    margin: 0;
    display: flex;
    gap: var(--gallery-gap);
}

.login-container .submit-container button {
    background: var(--accent);
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 2px 0 var(--accent);
    cursor: pointer;
    color: var(--color-on-accent);
    font-size: 18px;
    display: inline-block;
}

.login-container .submit-container button:hover {
    background: var(--accent);
    transition: 0.25s;
}

.login-container .submit-container button span {
    font-size: 2em;
    display: block;
}

@media screen and (max-width: 700px) {
    .login-container .submit-container {
        flex-direction: column-reverse;
        gap: 0;
    }

    .login-container .submit-container button {
        width: 100%;
    }

    .login-container .submit-container button span {
        display: inline-block;
        padding-right: 0.5em;
        font-size: initial;
    }
}

.login-container .selector {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.login-container .selector select {
    flex-grow: 1;
}

#rsvp2 .children .material-input {
    width: calc(70% - 5px);
    display: inline-block;
}

#rsvp2 .children .material-input.age {
    width: calc(30% - 5px);
    display: inline-block;
}

.fullpage.calltoaction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    background-color: var(--accent);
    color: var(--color-on-accent);
    padding: var(--default-padding);
    gap: 10px;
    width: 80%;
    min-height: 30vh;
    margin: auto;
    margin-bottom: var(--default-padding);
    font-family: var(--small-font);
}

.fullpage.calltoaction h1 {
    font-family: var(--small-font);
}

.fullpage.calltoaction .button {
    border: 2px solid var(--color-on-accent);
    color: var(--color-on-accent);
    transition: 0.25s;
}

.fullpage.calltoaction .button:hover {
    background-color: var(--background-color);
    border: 2px solid var(--background-color);
    color: var(--color);
}

.fullpage.icons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--default-padding);
    padding-top: var(--default-padding);
    padding-bottom: var(--default-padding);
    width: 80%;
    margin: auto;
}

.iconbox {
    width: 25%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.25s;
    font-size: 125%;
    box-shadow: 0px 0px 6px #8f8f8f80;
}

.iconbox:hover {
    border-radius: 12px;
    text-decoration: none;
}

.iconbox.details {
    background-color: var(--color-details);
    color: var(--color-on-details-color);
}

.iconbox.gallery {
    background-color: var(--color-gallery);
    color: var(--color-on-gallery-color);
}

.iconbox.registry {
    background-color: var(--color-registry);
    color: var(--color-on-registry-color);
}

.iconbox .material-icons-round:not(.link_simulator .material-icons-round) {
    font-size: 300%;
}

.hotelbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.hotelbox a {
    background: var(--accent);
    color: var(--color-on-accent);
    display: inline-block;
    aspect-ratio: 1;
    padding: 1em;
    width: 7em;
    border-radius: 16px;
    transition: 0.25s;
}

.hotelbox a:hover {
    border-radius: 8px;
    text-decoration: none;
}

.link_simulator:hover {
    text-decoration: underline;
}

.fullpage.withimage.homescreenlocation {
    background-color: var(--distinct-element-background-color);
    border-radius: 24px;
    width: 80%;
    margin: auto;
    justify-content: flex-start;
}

.fullpage.withimage.homescreenlocation .big {
    font-family: var(--small-font);
    font-size: 200%;
}

.fullpage.withimage.homescreenlocation .imageholder {
    border-radius: 12px;
}

.fullpage.withimage,
.fullpage.withmap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 80%;
    margin: auto;
    gap: var(--default-padding);
    padding: var(--default-padding);
}

.fullpage .imageholder,
.fullpage .map {
    width: 50vh;
    height: 50vh;
    border-radius: 24px;
    background-color: var(--image-background-color);
    overflow: hidden;
    border: none;
    flex-shrink: 0;
}

.fullpage .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top;
}

.fullpage .text {
    flex-grow: 1;
    font-size: 1.5em;
}

.fullpage.welcomeinside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 64px);
    backdrop-filter: brightness(0.5);
}

.fullpage.welcomeinside * {
    margin: 0;
    padding: 0;
    color: #fafafa;
}

.marriedtext {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 2em;
    text-align: center;
    height: 100%;
}

.marriedtext .ring {
    background-image: url(/assets/images/ring_minimized.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 2.5em;
    height: 2.5em;
}

.fullpage.welcome {
    background-color: #bdbdbd;
    background-image: url(/assets/images/hachieheart.jpg);
    background-size: cover;
    background-position: left center;
    height: calc(100vh - 64px);
}

.fullpage.hero {
    background-color: #bdbdbd;
    background-size: cover;
    background-position: center;
    height: calc(80vh - 64px);
}

.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--default-padding);
    padding: var(--gallery-gap);
}

.countdown span {
    display: block;
    text-align: center;
    font-family: var(--small-font);
    font-weight: bold;
}

.countdown span:nth-child(odd) {
    font-size: 3em;
}
.countdown span:nth-child(even) {
    text-transform: uppercase;
}

.countdown-container h3 {
    margin: 0;
    text-align: center;
}

.countdown-container {
    padding: var(--gallery-gap);
    background: var(--distinct-element-background-color);
}

.about-couple .big {
    font-family: var(--small-font);
    font-size: 2.5em;
}

.fullpage.details {
    margin: 20vh auto;
}

.details-blurbbox {
    display: flex;
    gap: var(--default-padding);
    justify-content: center;
    flex-basis: 50%;
    align-self: center;
    font-size: 125%;
}

.details-box {
    border-radius: 12px;
}

.material-icons-round {
    vertical-align: middle;
}

a {
    color: var(--color);
}

.peoplecounterlabel {
    margin: 0;
    padding: 0;
    text-align: left;
}

.peoplecounter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.personbutton {
    background-color: transparent;
    border: 2.5px solid var(--accent);
    color: var(--color);
    border-radius: 50px;
    transition: 0.25s;
    padding: 5px;
    margin: 0;
}

.personbutton:disabled {
    color: var(--form-gray);
    border-color: var(--form-gray);
    pointer-events: none;
}

.personbutton:hover {
    background-color: var(--accent);
    color: var(--color-on-accent);
    filter: none;
}

.peoplecounteramount {
    background-color: transparent;
    border: 2.5px solid var(--accent);
    color: var(--color);
    border-radius: 50px;
    transition: 0.25s;
    padding: 5px;
    min-width: 40px;
}

button {
    margin: auto;
}

.button,
button {
    display: inline-block;
    border-radius: 12px;
    background-color: var(--accent);
    color: var(--color-on-accent);
    padding: 12px;
    width: fit-content;
    border: none;
    cursor: pointer;
    margin-bottom: 12px;
    text-decoration: none;
}

.button:disabled,
button:disabled {
    filter: brightness(0.7);
}

.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    margin: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table thead {
    position: sticky;
    top: 64px;
    background-color: var(--background-color);
}

table th,
table td {
    text-align: center;
    border: 1px solid var(--color);
}

h1,
h2 {
    font-family: var(--large-font);
    margin: 0;
}

p.big {
    font-family: var(--large-font);
    font-size: 75px;
    margin: 0;
}

.fullpage.withimage .big,
.fullpage.withmap .big {
    font-family: var(--small-font);
}

main.photogallery, .boothgallery {
    column-count: 3;
    column-gap: var(--gallery-gap);
    margin: var(--gallery-gap);
    overflow: hidden;
}

.boothgallery {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    grid-template-rows: 3fr 3fr 3fr;
    row-gap: var(--gallery-gap);
    column-gap: var(--gallery-gap);
}


.photogallery img:hover, .boothgallery a:hover {
    transform: scale(1.1) rotate(-2deg);
    filter: none;
    z-index: 998;
    box-shadow: 0 0 6px 3px #00000088;
}

.gallerybody,
.registrybody {
    margin-top: calc(64px + var(--gallery-gap));
}

.registry-box {
    column-count: 5;
    column-gap: var(--gallery-gap);
    margin: var(--gallery-gap);
}

.registry-box .iconbox {
    width: 100%;
    margin-bottom: var(--gallery-gap);
    break-inside: avoid;
}

.iconbox img {
    max-width: 90%;
}

@media screen and (max-width: 1100px) {
    .hotelbox a {
        width: 40%;
    }
}

@media screen and (max-width: 700px) {
    :root {
        --default-padding: 1em;
    }

    .fullpage.withimage,
    .fullpage.withmap {
        flex-direction: column-reverse;
        width: 95%;
    }

    .fullpage.withimage.picturefirst,
    .fullpage.withmap.mapfirst {
        flex-direction: column;
    }

    .fullpage .imageholder,
    .fullpage .map,
    .fullpage .text {
        width: 100%;
    }

    .desktopnav {
        display: none;
    }

    #mobilenavcheck+label {
        display: block;
    }

    .fullpage.icons {
        flex-direction: column;
        width: 95%;
    }

    .fullpage.calltoaction {
        width: 95%;
    }

    .fullpage.withimage.homescreenlocation {
        width: 95%;
    }

    .fullpage.icons .iconbox {
        width: 100%;
        aspect-ratio: unset;
        padding: 10px;
    }

    .fullpage.icons .iconbox h3 {
        margin: 0;
    }

    main.photogallery,
    .registry-box {
        column-count: 1;
    }

    .boothgallery {
        grid-template-columns: 1fr;
    }

    .photogallery img,
    .boothgallery a,
    .photogallery img:hover,
    .boothgallery a:hover {
        transform: none;
        filter: none;
    }

    .tablefilterer {
        width: 90%;
    }

    .mobilemenuarea {
        display: flex;
    }

    .profile-image {
        max-width: 100%;
    }
}


@media screen and (prefers-color-scheme: dark) {
    :root {
        --color: #fafafa;
        --background-color: #212121;
        --distinct-element-background-color: #2e2d2d;
        --accent: #9bc8eb;
        --color-on-accent: #212121;
        --form-gray: #808080;
        --color-details: #084977;
        --color-on-details-color: #fafafa;
        --color-gallery: #1c4465;
        --color-on-gallery-color: #fafafa;
        --color-registry: #11506d;
        --color-on-registry-color: #fafafa;
        --image-background-color: var(--distinct-element-background-color);
    }
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}