html {
    overflow-x: hidden;
}
body {
    all: unset;
    background: url(images/bg_placeholder.jpg) 50% 50% no-repeat;
    background-attachment: fixed;
}
.page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.guts {
    width: auto;
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    background-clip: padding-box;
}
.guts h1 { text-wrap: balance; font-size: 1.5rem; }
.guts h2 { text-wrap: balance; font-size: 3rem; }
.guts p { font-size: 1.25rem; line-height: 142%; text-wrap: balance; }
.copyright {
    text-align: center;
    text-shadow: rgba(0,0,0,0.7) 0 0 1px;
}
.copyright p {
    font-size: 0.875rem;
    color: white;
}
.copyright a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}
.copyright a:hover {
    color: #FFA500;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .page-wrap {
        justify-content: start;
        background: rgba(255,255,255,0.75);
    }
    .guts { 
        width: 90%; 
        padding: 20px; 
        box-sizing: border-box;
        margin-top: 20px;
    }
    .guts h1 { font-size: 1.5rem; }
    .guts h2 { font-size: 2.5rem; }
    .guts p { font-size: 1rem; line-height: 150%; text-wrap: balance; }    
    .guts img {
        width: 95%;
        display: inline-block;
        margin: 20px auto 10px;
    }
    .line {
        display: block;
        text-align: center;
    }
    .sep {
        display: none;
    }
    .copyright {
        text-shadow: rgba(255,255,255,0.7) 0 0 1px;
    }
    .copyright p {
        color: black;
    }
    .copyright a {
        color: black;
    }
    .copyright a:hover {
        color: black;
    }
}

/********* Utilities *********/
.text-center { text-align: center; }
.fl-container { display: flex; }
.fl-col { flex-direction: column; }
.fl-j-center { justify-content: center; }
.fl-ai-center { align-items: center; }
@media screen and (min-width: 640px) {
 
    .w-dvw { width: 100dvw; }
    .w-dvh { width: 100dvh; }
    .w-7xs { width: 2rem; }
    .w-6xs { width: 4rem; }
    .w-5xs { width: 8rem; }
    .w-4xs { width: 12rem; }
    .w-3xs { width: 16rem; }
    .w-2xs { width: 18rem; }
    .w-xs { width: 20rem; }
    .w-sm { width: 24rem; }
    .w-md { width: 28rem; }
    .w-lg { width: 32rem; }
    .w-xl { width: 36rem; }
    .w-2xl { width: 42rem; }
    .w-3xl { width: 48rem; }
    .w-4xl { width: 56rem; }
    .w-5xl { width: 64rem; }
    .w-6xl { width: 72rem; }
    .w-7xl { width: 80rem; }
    .w-full { width: 100%; }
    
    .h-7xs { height: 2rem; }
    .h-6xs { height: 4rem; }
    .h-5xs { height: 8rem; }
    .h-4xs { height: 12rem; }
    .h-3xs { height: 16rem; }
    .h-2xs { height: 18rem; }
    .h-xs { height: 20rem; }
    .h-sm { height: 24rem; }
    .h-md { height: 28rem; }
    .h-lg { height: 32rem; }
    .h-xl { height: 36rem; }
    .h-2xl { height: 42rem; }
    .h-3xl { height: 48rem; }
    .h-4xl { height: 56rem; }
    .h-5xl { height: 64rem; }
    .h-6xl { height: 72rem; }
    .h-7xl { height: 80rem; }
    .h-full { height: 100%; }
    
    .mx-auto { margin-left: auto; margin-right: auto; }
    .my-auto { margin-top: auto; margin-bottom: auto; }
    .m-0 { margin: 0; }
    .m-1 { margin: 0.25rem; }
    .m-2 { margin: 0.5rem; }
    .m-3 { margin: 1rem; }
    .m-4 { margin: 1.5rem; }
    .m-5 { margin: 1.75rem; }
    .m-6 { margin: 2rem; }
    .m-7 { margin: 2.25rem; }
    .m-8 { margin: 2.5rem; }
    .mx-0 { margin-left: 0; margin-right: 0; }
    .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
    .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
    .mx-3 { margin-left: 1rem; margin-right: 1rem; }
    .mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
    .mx-5 { margin-left: 1.75rem; margin-right: 1.75rem; }
    .mx-6 { margin-left: 2rem; margin-right: 2rem; }
    .mx-7 { margin-left: 2.25rem; margin-right: 2.25rem; }
    .mx-8 { margin-left: 2.5rem; margin-right: 2.5rem; }
    .my-0 { margin-top: 0; margin-bottom: 0; }
    .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
    .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .my-3 { margin-top: 1rem; margin-bottom: 1rem; }
    .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
    .my-5 { margin-top: 1.75rem; margin-bottom: 1.75rem; }
    .my-6 { margin-top: 2rem; margin-bottom: 2rem; }
    .my-7 { margin-top: 2.25rem; margin-bottom: 2.25rem; }
    .my-8 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
    .ms-0 { margin-left: 0; margin-right: 0; }
    .ms-1 { margin-left: 0.25rem; }
    .ms-2 { margin-left: 0.5rem; }
    .ms-3 { margin-left: 1rem; }
    .ms-4 { margin-left: 1.5rem; }
    .ms-5 { margin-left: 1.75rem; }
    .ms-6 { margin-left: 2rem; }
    .ms-7 { margin-left: 2.25rem; }
    .ms-8 { margin-left: 2.5rem; }
    .me-0 { margin-right: 0; }
    .me-1 { margin-right: 0.25rem; }
    .me-2 { margin-right: 0.5rem; }
    .me-3 { margin-right: 1rem; }
    .me-4 { margin-right: 1.5rem; }
    .me-5 { margin-right: 1.75rem; }
    .me-6 { margin-right: 2rem; }
    .me-7 { margin-right: 2.25rem; }
    .me-8 { margin-right: 2.5rem; }
    .mt-0 { margin-top: 0; }
    .mt-1 { margin-top: 0.25rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 1rem; }
    .mt-4 { margin-top: 1.5rem; }
    .mt-5 { margin-top: 1.75rem; }
    .mt-6 { margin-top: 2rem; }
    .mt-7 { margin-top: 2.25rem; }
    .mt-8 { margin-top: 2.5rem; }
    .mt-12 { margin-top: 3rem; }
    .mt-16 { margin-top: 4rem; }
    .mt-24 { margin-top: 6rem; }
    .mt-32 { margin-top: 8rem; }
    .mt-40 { margin-top: 10rem; }
    .mb-0 { margin-bottom: 0; }
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 1rem; }
    .mb-4 { margin-bottom: 1.5rem; }
    .mb-5 { margin-bottom: 1.75rem; }
    .mb-6 { margin-bottom: 2rem; }
    .mb-7 { margin-bottom: 2.25rem; }
    .mb-8 { margin-bottom: 2.5rem; }
    .p-0 { padding: 0; }
    .p-1 { padding: 0.25rem; }
    .p-2 { padding: 0.5rem; }
    .p-3 { padding: 1rem; }
    .p-4 { padding: 1.5rem; }
    .p-5 { padding: 1.75rem; }
    .p-6 { padding: 2rem; }
    .p-7 { padding: 2.25rem; }
    .p-8 { padding: 2.5rem; }
    .px-0 { padding-left: 0; padding-right: 0; }
    .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-3 { padding-left: 1rem; padding-right: 1rem; }
    .px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-5 { padding-left: 1.75rem; padding-right: 1.75rem; }
    .px-6 { padding-left: 2rem; padding-right: 2rem; }
    .px-7 { padding-left: 2.25rem; padding-right: 2.25rem; }
    .px-8 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .py-0 { padding-top: 0; padding-bottom: 0; }
    .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-3 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .py-5 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
    .py-6 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-7 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .py-8 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .ps-0 { padding-left: 0; }
    .ps-1 { padding-left: 0.25rem; }
    .ps-2 { padding-left: 0.5rem; }
    .ps-3 { padding-left: 1rem; }
    .ps-4 { padding-left: 1.5rem; }
    .ps-5 { padding-left: 1.75rem; }
    .ps-6 { padding-left: 2rem; }
    .ps-7 { padding-left: 2.25rem; }
    .ps-8 { padding-left: 2.5rem; }
    .pe-0 { padding-right: 0; }
    .pe-1 { padding-right: 0.25rem; }
    .pe-2 { padding-right: 0.5rem; }
    .pe-3 { padding-right: 1rem; }
    .pe-4 { padding-right: 1.5rem; }
    .pe-5 { padding-right: 1.75rem; }
    .pe-6 { padding-right: 2rem; }
    .pe-7 { padding-right: 2.25rem; }
    .pe-8 { padding-right: 2.5rem; }
    .pt-0 { padding-top: 0; }
    .pt-1 { padding-top: 0.25rem; }
    .pt-2 { padding-top: 0.5rem; }
    .pt-3 { padding-top: 1rem; }
    .pt-4 { padding-top: 1.5rem; }
    .pt-5 { padding-top: 1.75rem; }
    .pt-6 { padding-top: 2rem; }
    .pt-7 { padding-top: 2.25rem; }
    .pt-8 { padding-top: 2.5rem; }
    .pb-0 { padding-bottom: 0; }
    .pb-1 { padding-bottom: 0.25rem; }
    .pb-2 { padding-bottom: 0.5rem; }
    .pb-3 { padding-bottom: 1rem; }
    .pb-4 { padding-bottom: 1.5rem; }
    .pb-5 { padding-bottom: 1.75rem; }
    .pb-6 { padding-bottom: 2rem; }
    .pb-7 { padding-bottom: 2.25rem; }
    .pb-8 { padding-bottom: 2.5rem; }
}

.drop-shadow { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); }