/* Example CSS file */ 

/* Bootstrap breakpoints:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
*/

:root {
    /* --bs-primary: #a1f150;#75ec00 */
    --bs-primary: #9be650;
    --bs-secondary: #271500;
    /* --bs-primary-rgb: 161, 241, 80; */
    --bs-primary-rgb: 155, 230, 80;
    --bs-secondary-rgb: 39, 21, 0;
    --bs-primary-bg-subtle: #f1ffc8;
    /* --bs-primary-bg-subtle: rgb(172, 211, 57); */
    /* --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;

    --primary-lighter: #f1ffc8; */
    --bs-body-color: var(--bs-secondary);
    --bs-body-color-rgb: var(--bs-secondary-rgb);
    
    --default-font-size: 1.3rem;
    --visible-larger-media: hidden;
    --opaque-larger-media: 0;
    --header-height: 4rem;
    --main-area-viewport-height: calc(100vh - 4rem);
    --main-area-viewport-height-larger-media: unset;
    --shaded-blob-shade-step-1: 50%;
    --shaded-blob-shade-step-1-1: 50%;
    --shaded-blob-shade-step-2: 54%;
    --shaded-blob-shade-step-2-1: 54%;

    /* Bootstrap variables:
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13,110,253;
    --bs-secondary-rgb: 108,117,125;
    --bs-success-rgb: 25,135,84;
    --bs-info-rgb: 13,202,240;
    --bs-warning-rgb: 255,193,7;
    --bs-danger-rgb: 220,53,69;
    --bs-light-rgb: 248,249,250;
    --bs-dark-rgb: 33,37,41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33,37,41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255,255,255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0,0,0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33,37,41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233,236,239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33,37,41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248,249,250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13,110,253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10,88,202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
  */
}
/* Override for medium and larger devices */
@media (min-width: 768px) {
    :root {
        --default-font-size: 1rem;
        --visible-larger-media: visible;
        --opaque-larger-media: 1;
        --main-area-viewport-height-larger-media: calc(100vh - 4rem);
        --shaded-blob-shade-step-1: 38.2%;
        --shaded-blob-shade-step-1-1: 38.3%;
        --shaded-blob-shade-step-2: 42%;
        --shaded-blob-shade-step-2-1: 42.1%;
    }
}

html {
    background-color: var(--bs-blue);
    font-size: var(--default-font-size);
}


/* ------ Header ------ */

header {
    position: sticky;
    top: 0px;
    z-index: 500;
}

#header-row {
    height: 4rem;
    position: relative;
    --bs-link-color: var(--secondary);
    --bs-link-hover-color: black;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
}

#navbar-icon {
    position: absolute;
    right: 0.5rem;
    top: 1.25rem;
    height: 1.5rem;
    width: calc(1.5rem * calc(4 / 3));
    box-sizing: content-box;
    z-index: 1100;
}

#navbar-wrapper {
    visibility: var(--visible-larger-media);
    opacity: var(--opaque-larger-media);
    position: relative;
    z-index: 520;
}

#navbar-wrapper.navbar-opened {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0%;
    left: 0%;
    background-color: var(--bs-primary-bg-subtle);
    z-index: 1000;
    text-align: right;
    visibility: visible;
    opacity: 1;
    transition: visibility 0.15s ease-in, opacity 0.15s ease-in;
}

#navbar-wrapper.navbar-opened #navbar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#navbar-wrapper.navbar-opened #navbar a:hover {
    font-weight: bold;
}

#header-row ml-hamburger {
    --ml-hamburger-color: var(--bs-secondary);
}

#navbar-link-shadow {
    position: absolute;
    top: 0px;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 510;
    visibility: var(--visible-larger-media);

    opacity: 0;
    transition: all 0.75s ease, opacity 0.5s ease;
}

.fade-in-keep-larger-media {
    transition: visibility 0.15s ease-out, opacity 0.15s ease-out;
}

.fade-out-keep-larger-media {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* -------------------- */

/* ------ Homepage ------ */
#cover-box {
    text-shadow: 0px 0px 30px white;
    height: var(--main-area-viewport-height);
    gap: 1rem;
}
#cover-box h1 {
    font-variant: small-caps;
}
/* ---------------------- */

/* ------ About page ------ */
#page-banner-background {
    /* Pattern from https://heropatterns.com/ */

    background-color: #f1ffc8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%2375ec00' fill-opacity='0.4'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* ------------------------ */


/* ------ All pages ------ */
site-footer > div {
    box-shadow: inset 0px 8px 8px -5px rgba(0, 0, 0, 0.3);
}

#page-banner {
    height: 25rem;
    max-height: calc(var(--main-area-viewport-height) * 0.7);
    background-blend-mode: overlay;
}

.shaded-blob-primary {
    --gradient-color-rgb: 206, 230, 101;
    background-image: linear-gradient(-4deg, rgba(var(--gradient-color-rgb), 0.2) var(--shaded-blob-shade-step-1), transparent var(--shaded-blob-shade-step-1-1)), linear-gradient(5deg, rgba(var(--gradient-color-rgb), 0.1) var(--shaded-blob-shade-step-2), transparent var(--shaded-blob-shade-step-2-1));
    background-color: rgba(var(--gradient-color-rgb), 0.05);
    background-blend-mode: overlay;
    box-shadow: 0px 5px 80px -10px rgba(0, 0, 0, 0.2);
}
.shaded-blob-white {
    --gradient-color-rgb: 255, 255, 255;
    background-image: linear-gradient(-4deg, rgba(var(--gradient-color-rgb), 1) var(--shaded-blob-shade-step-1), transparent var(--shaded-blob-shade-step-1-1)), linear-gradient(6deg, rgba(var(--gradient-color-rgb), 0.6) var(--shaded-blob-shade-step-2), transparent var(--shaded-blob-shade-step-2-1));
    background-color: rgba(var(--gradient-color-rgb), 0.3);
    background-blend-mode: overlay;
    box-shadow: 0px 5px 80px -10px rgba(0, 0, 0, 0.2);
}
.shaded-blob-primary p:last-child, .shaded-blob-white p:last-child {
    margin: 0px;
}

/* .inset-window {
    border: inset 5px rgba(228, 228, 228, 0.4);
    border-radius: 3px;
} */

/* .carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.25);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    background-size: 60%;
    background-position: 45%;
}
.carousel-control-next-icon {
    background-position: 55%;
} */

.moves {
    /* scale: 1;
    transition: scale 0.3s ease-out; */
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.moves:hover {
    /* animation: wiggle-up-step-1 0.15s ease-out forwards, wiggle-up-step-2 0.4s ease-out 0.15s forwards; */
    /* scale: 1.01; */
    /* box-shadow: 0px 24px 5px -20px rgba(0, 0, 0, 0.3); */
    transform: translateY(-1px);
}

@keyframes wiggle-up-step-1 {
    0% { transform: translate(0px, 0px) rotate(0deg); }
    40% { transform: translate(-1.17px, -4.5px) rotate(-0.85deg); }
    100% { transform: translate(-2px, -4px) rotate(-1deg); }
}
@keyframes wiggle-up-step-2 {
    0% { transform: translate(-1px, -4px) rotate(-1deg); }
    40% { transform: translate(-0.2px, -8.5px) rotate(-0.2deg); }
    100% { transform: translate(0px, -8px) rotate(0deg); }
    /* 100% { transition: transform 0.3s ease-out; } */
}
@keyframes hover-down {
    0% { transform: initial; }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

#disclaimer-more-link {
    cursor: pointer;
}
#disclaimer-more-text {
    height: 0px;
    overflow: hidden;
}
#disclaimer-more-link:active + #disclaimer-more-text, 
#disclaimer-more-link:focus + #disclaimer-more-text,
#disclaimer-more-text:focus {
    height: auto;
}

.list-icon::before {
    transform: translateY(0.3rem);
}
/* ----------------------- */

/* ------ Extension to Bootstrap ------*/
html {
    background-color: var(--bs-primary);
}
.mw-25 { max-width: 25% !important;}
.mw-50 { max-width: 50% !important;}
.mw-75 { max-width: 75% !important;}
.mh-25 { max-height: 25% !important;}
.mh-50 { max-height: 50% !important;}
.mh-75 { max-height: 75% !important;}
.vw-25 { width: 25vh; }
.vw-50 { width: 50vh; }
.vw-75 { width: 75vh; }
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }

.d-contents { display: contents; }

/* ------------------------------------*/

/* ------ General ------*/

/* A hero image: the backgrund-image will cover the whole element's background
 * without repitition.
 */
.covering-background-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.normal-monitor-width {
    width: 100%;
    max-width: 1500px;
}

/* ---------------------*/

			/* 

			.fade-in {
				animation: fade-in .15s ease-out forwards;
			}

			.fade-out {
				animation: fade-out .15s ease-in forwards;
			}

			@keyframes fade-in {
				0% {
					visibility: hidden;
					opacity: 0;
				}
				0.01% {
					visibility: visible;
					opacity: 0;
				}
				100% {
					visibility: visible;
					opacity: 1;
				}
			}

			@keyframes fade-out {
				0% {
					visibility: visible;
					opacity: 1;
				}
				99.99% {
					visibility: visible;
					opacity: 0;
				}
				100% {
					visibility: hidden;
					opacity: 0;
				}
			} */

/* ------ Community ------ */
.zig-zag-background {
    /*
    Copyright (c) 2026 by Temani Afif (https://codepen.io/t_afif/pen/MWVPayN)

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    */
    --s: 130px; /* control the size */
    --c1: #f1ffc8;
    --c2: #deecb4;
    
    background:
        conic-gradient(from  30deg at 87.5% 75%,var(--c1)  60deg,var(--c2) 0 120deg,#0000 0) 0 calc(.2165*var(--s)),
        conic-gradient(from -90deg at 50%   25%,var(--c2)  60deg,var(--c1) 0 180deg,#0000 0),
        conic-gradient(from  9/0deg at 50%   75%,var(--c2) 120deg,var(--c1) 0 180deg,#0000 0),
        conic-gradient(from -30deg at 87.5% 50%,var(--c2) 120deg,var(--c1) 0 240deg,#0000 0),
        conic-gradient(from  90deg at 37.5% 50%,var(--c2) 120deg,var(--c1) 0 180deg,var(--c2) 0 240deg,var(--c1) 0);
    background-size: var(--s) calc(.866*var(--s));
}

.bone-background {
    /*
    Copyright (c) 2026 by Josetxu  (https://codepen.io/josetxu/pen/dyRGdNE)

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    */
    --un: 0.7vmax;
	--c1: #f1ffc8;
	--c2: #e7f5bd;
	--c3: #f5ffd8;
	--c4: #e0eeb6;
	--gp: 50%/calc(var(--un) * 10) calc(var(--un) * 10);
	background-color: var(--c1);
	background: 					
		repeating-conic-gradient(from 90deg at 75% 75% , var(--c4) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 180deg at 50% 75% , var(--c1) 0% 12.5%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 135deg at 62.5% 62.5% , var(--c4) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 134.5deg at 25% 75% , var(--c1) 0% 12.65%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 135deg at 12.5% 62.5% , var(--c4) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 225deg at 12.5% 62.5% , var(--c3) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 225deg at 25% 50% , var(--c2) 0% 12.5%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 90deg at 75% 75% , var(--c1) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 135deg at 50% 50% , var(--c1) 0% 37.5%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 225deg at 75% 50% , var(--c2) 0% 12.5%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 45deg at 62.5% 62.5% , var(--c3) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 90deg at 75% 25% , var(--c3) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 45deg at 62.5% 12.5%, var(--c3) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from -45deg at 62.5% 12.5%, var(--c4) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 45deg at 50% 25%, var(--c2) 0% 12.5%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from -45deg at 12.5% 12.5%, var(--c4) 0% 25%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from 0deg at 0% 25%, var(--c3) 0% 12.50%, #fff0 0% 100%) var(--gp),
		repeating-conic-gradient(from -90deg at 25% 25%, var(--c2) 0% 12.50%, #fff0 0% 100%) var(--gp),
		repeating-linear-gradient(180deg, var(--c1) 0 25%, var(--c2) 0 50%, var(--c1) 0 100% ) var(--gp);
}
/* ----------------------- */