@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDark: rgba(59, 47, 40, 1);
    --textMedium: rgba(59, 47, 40, 0.7);
    --borderMedium: rgba(59, 47, 40, 0.2); 
    --borderLight: rgba(59, 47, 40, 0.075);
    --accent: #f08522;
    --textAccent: #e77410;
    --light: rgba(59, 47, 40, 0.1);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.black_2_textDark {filter: contrast(0.68) sepia(1) hue-rotate(343deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(343deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/
.map::after, 
.black_2_accent {filter: contrast(0.12) sepia(1) hue-rotate(335deg) contrast(7)!important;}


/*------------------------ CSS overrides below ------------------------*/

/* noto-serif-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/noto-serif-v22-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
h1, h2, a.logo {font-family: 'Noto Serif', serif; letter-spacing: -0.01em;}

div.container > p > img {aspect-ratio: 2.2; width: 100%; object-fit: cover;}
div.image p > img {aspect-ratio: 1.5; object-fit: cover; border-radius: 1rem!important;}
section.image .twocols .image img {max-width: 78%;}
section.image .twocols .image::before {
    content: "";
    position: absolute;
    width: 75%;
    background: var(--textDark);
    border-radius: 29% 71% 58% 42% / 33% 50% 50% 67%;
    aspect-ratio: 1.25;
    margin-top: 1rem;
    opacity: 0.1;
    right: 0;
}
section.image.alt .twocols .image::before {right: auto; left: 0;}
section.image:nth-child(1) .twocols .image::before {border-radius: 34% 66% 36% 64% / 62% 56% 44% 38%;}
section.image:nth-child(2) .twocols .image::before {border-radius: 64% 36% 67% 33% / 39% 27% 73% 61%;}
section.image:nth-child(3) .twocols .image::before {border-radius: 29% 71% 58% 42% / 33% 50% 50% 67%;}
section.image:nth-child(4) .twocols .image::before {border-radius: 27% 73% 28% 72% / 25% 38% 62% 75%;}
section.image:nth-child(5) .twocols .image::before {border-radius: 61% 39% 30% 70% / 71% 70% 30% 29%;}
section.image:nth-child(6) .twocols .image::before {border-radius: 47% 53% 30% 70% / 35% 50% 50% 65%;}
section.image:nth-child(7) .twocols .image::before {border-radius: 29% 71% 58% 42% / 33% 50% 50% 67%;}
section.image:nth-child(8) .twocols .image::before {border-radius: 36% 64% 60% 40% / 50% 38% 62% 50%;}
section.image:nth-child(9) .twocols .image::before {border-radius: 27% 73% 28% 72% / 25% 38% 62% 75%;}
section.image:nth-child(10) .twocols .image::before {border-radius: 55% 45% 75% 25% / 73% 40% 60% 27%;}


h2 {font-family: 'Heebo', sans-serif; line-height: 1.4; font-size: 1.25rem; margin: 0 0 0.4rem; padding-top: 1rem;}
h2:first-child {padding-top: 0;}
a.logo img {height: 2.9rem;}
@media (max-width: 600px) {
    section.image .twocols .image img {max-width: 100%;}
    div.image {background: none; aspect-ratio: auto;}
    section .twocols {grid-gap: 3.5rem clamp(2rem, 5vw, 5rem);}
}
section.image.alt {background: var(--light); border: 0;}
.shortcode-youtube {aspect-ratio: 2.2;}
footer.dark {background: rgb(70, 64, 60);}