*, *::before, *::after {
    box-sizing:border-box; -webkit-box-sizing:border-box;
    margin:0; padding:0;
}




:root {

    --primary-bright: oklch(.85 .1 210);
    --primary-medium: oklch(.4 .23 210);
    --primary-dark:oklch(.28 .25 210);
    --primary-contrast:oklch(0.86644 0.294827 142.4953);
    --primary-highlight:oklch(0.6597 0.2755 349.7);

    --secondary-bright:oklch(.85 .25 270);
    --secondary-medium: oklch(.4 .2 270);
    --secondary-dark:oklch(.2 .2 270);

    --white:#f8faff;
    --black:#080010;
    --primary-text-bright:var(--primary-bright);
    --primary-text-dark:var(--primary-dark);
    --secondary-text-bright:var(--secondary-bright);
    --secondary-text-dark:var(--secondary-dark);

    --primary-linear:linear-gradient(to top right, var(--primary-medium), var(--primary-bright));
    --secondary-linear:linear-gradient(to top right, var(--secondary-medium), var(--secondary-bright));
    --primary-radial:radial-gradient(var(--primary-bright), var(--primary-medium));
    --secondary-radial:radial-gradient(var(--secondary-bright), var(--secondary-medium));

    /* LINKS */
    --link-color-primary:#079;
    --link-color-primary-visited:#056;
    --link-color-primary-hover:#f0a;

    /* IMAGES */
    --logo-width:120px;
    --logo-height:120px;



    /* FONTS */
    --casual: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --formal: serif;
    --normal: system-ui, sans-serif;

}


html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }


body {
    width:100%;
    max-width:100%;
    min-height:100svh;
    overflow-x:hidden;
    font-family:var(--casual);
}



div { max-width:100%; }

img, picture, svg, video {
    max-width:100%;
}



div.cnt {
    width:100%;
    max-width:1232px;
    margin-inline:auto;
    padding-inline:1rem;

    h2 { 
        margin-bottom:1.5rem;
    }
}



h1, h2, h3, h4, h5, h6 {
    text-box-trim:trim-both;
}








/* DIVS, COLUMNS */



.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.cols2, .cols3, .cols4, .cols5 {
    display: grid;
    gap: 1rem;
    align-items: start;
}







/* FORMATTING */

[data-ctr] { text-align:center; }
[data-p25] { padding:25px; }
[data-p10] { padding:10px; }


.logo { max-height:var(--logo-height); max-width:var(--logo-width); }








/* NAVIGATION */


button, a.button {
    display:inline-grid;
    font-size:1em;
    line-height:1;
    outline:0; border:0;
    padding:.5rem .5rem;
    border-radius:.25rem;
    text-decoration:none;
    transition:all .35s;
}

button:hover {
}



nav {
    padding:.125rem;
    background:var(--white);

    button, a.button {
        display:inline-block;
        position:relative;
        background:none;
        color:var(--primary-medium);
        text-shadow:none;
        outline:2px solid transparent;
        outline-offset:-2px;
    }


    button[data-tooltip]::after, a.button[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 0.6rem);
            left: 50%;
            translate: -50% 0;
        
            padding: 0.5rem 0.75rem;
            border-radius: 0.35rem;

            background: var(--primary-dark);
            color: var(--white);
            font-size: 0.8rem;
            line-height: 1.4;
            white-space: nowrap;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            z-index: 1000;

            transition:
                opacity 0.2s ease,
                visibility 0.2s ease;
            }

    button:hover, a.button:hover {
        background:none;
        color:var(--link-color-primary-hover);
        outline:2px solid var(--link-color-primary-hover);
    }

    button[data-tooltip]:hover::after,
    a.button[data-tooltip]:hover::after,
    button[data-tooltip]:focus-visible::after,
    a.button[data-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }


    #dropdown-menu {
        position: absolute;
        padding: 0.25rem;
        background:var(--primary-dark);
        border-radius: 0.25rem;
        z-index: 1000;
    }

    #dropdown-menu[hidden] { display: none; }

    #dropdown-menu a {
        display: block;
        color:var(--white);
        padding: 0.5rem;
        text-decoration: none;
        white-space: nowrap;
        border-radius:.25rem;
    }

    #dropdown-menu a:hover,
    #dropdown-menu a:focus-visible {
        background:var(--link-color-primary-hover);
    }

    @media (width < 680px) {
        padding-top:1.5rem;
    }

    @media (hover: none) {
        nav [data-tooltip]::after {
            display: none;
        }
    }
}


a { color:var(--link-color-primary); }
a:visited { color:var(--link-color-primary-visited); }
a:hover { color:var(--link-color-primary-hover); }

a.btn {
    display:inline-block;
    background:var(--primary-dark);
    color:var(--primary-bright);
    margin:1rem auto;
    padding:.75rem;
    border-radius:.25rem;
    text-decoration:none;
    transition:all .35s;
    outline:2px solid var(--primary-bright);
}

a.btn:hover {
    color:var(--primary-contrast);
    outline:2px solid var(--primary-contrast);
}






#top-right  {
    position:absolute;
    top:.25rem;
    right:.25rem;

    button {
        background:var(--primary-dark);
        color:var(--white);
    }

    button:hover {
        background:var(--white);
        color:var(--primary-highlight);
        outline:2px solid var(--primary-highlight);
        outline-offset:-2px;
    }
}

#bottom-right  {
    position:fixed;
    bottom:0;
    right:0;
    background:var(--primary-dark);
    border-radius:.25rem 0 0 0;

    button {
        background:transparent;
        font-size:2rem;
        line-height:1.5rem;
        padding:.25rem .25rem .625rem;
        color:var(--white);
        outline:0;
    }

    button:hover {
        background:none;
        color:var(--primary-highlight);
        outline:0;
    } 

    @media (width < 680px) {
        border-radius:.25rem 0 0 .25rem;
    }
}










/* SECTIONS */


header {
    display:grid;
    padding:2rem 1rem;
    background-image:var(--primary-linear);
    place-items:center;

    h1 {
        display:inline-block;
        font-size:1.1rem;
        color:var(--white);
        font-weight:500;
        vertical-align:middle;
        padding:0 1rem;
        text-transform:uppercase;
        text-shadow:1px 1px 5px oklch(.1 .25 250 / .25);
        text-box-trim:trim-both;
    }

    img.logo {
        display:inline-block;
        vertical-align:middle;
    }

    >div {
        display:block;
        width:min(1200px, 100%);
        align-content:center;
    }


    /* @media (width < 680px) { } */
    @media screen and (max-width:680px) {
        padding-top:2rem;
        text-align:center;

        h1 {
            margin-top:.5rem;
            padding:0;
        }

        img.logo {
            margin:auto;
        }
    }

}






body>section, main>section {
  display:block;
  padding:4rem 0;
}






#slogan {
    background:var(--primary-dark);
    color:var(--primary-bright);
    padding:.5rem;

    h2 { font-size:1em; font-weight:400; text-align:center; text-transform:uppercase; padding:0; margin:0; }
}






#creditsection {
    font-size:.8rem;
    text-align:center;
    padding:2rem 0 0;
    line-height:1.25;

    .cnt>div { padding:1rem; }
    span { display:block; text-align:left; color:var(--primary-medium); }
    img { height:55px; transition:all .3s; margin-bottom:.5rem; }
    img:hover { transform:scale(1.25); }
}







#events-section {
    --logo-width:300px;
    --logo-height:200px;
    .logo { display:block; margin:auto; }

    background:var(--primary-bright);
    color:var(--primary-dark);

}




#contact-section {
    background:var(--primary-radial);
    color:var(--black);

    p { color:var(--white); }
    img { display:block; width:300px; height:300px; margin:auto; background:var(--primary-bright); border-radius:.5rem; }

    #contact-info {
        text-align:center;

        h5 { margin:1rem auto 0; }
        a { color:var(--white); }
    }
}


#donate-section {
    background:var(--primary-linear);
    color:var(--white);

    h2,p { color:var(--black); }
    img.logo { display:block; max-width:180px; max-height:180px; margin:1rem auto; }
}





.photostrip {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:200px;
    margin:2rem auto;


    img { height:100%; width:auto; }
    img:first-of-type { border-radius:5px 0 0 5px; }
    img:last-of-type { border-radius:.0 5px 5px 0; }


    @media (width < 680px) {

        img {
            width:100%;
            height:auto;
        }
    }
 } 





footer {
    font-size:.8rem;
    padding:2rem 1rem;
    margin-top:2rem;
    a { font-size:.8rem; color:#5af; }
}




.slow-blink-smooth {
  animation: slowBlinkSmooth 4s ease-in-out infinite;
}

@keyframes slowGrowSmooth {
  0%, 100% {
    transform:scale(1);
  }
  50% {
    transform:scale(1.1);
  }
}


@keyframes slowBlinkSmooth {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}









body.ESP { [data-eng] { display:none !important; } }
body.ENG { [data-esp] { display:none !important; } }









@media screen and (max-width:680px) {

.cols2, .cols3, .cols4, .cols5 { grid-template-columns:1fr; }

}