/* Reset */
* {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}


/* HTML Elements */
body {
    background: var(--color-bg-body) url(../images/bg_irish.roehrig_1.jpg) top center no-repeat fixed;
    background-size: cover;
    font-family: var(--font-body);
}

html,
body {
    font-size: 16px;
    height: 100%;
    width: 100%;
}

header {
    align-items: center;
    background: var(--color-bg-header);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .6rem .5rem;
    text-align: right;
    width: 100%;
}

#button__mnav {
    background: transparent;
    border: 1px solid #fff;
    border-radius: .3rem;
    display: block;
    left: .4rem;
    padding: .3rem .3rem .1rem .3rem;
    position: fixed;
    top: .3rem;
    z-index: 9999;
}

#button__mnav,
#button__mnav * {
    transition: all .3s ease-in-out;
}

#button__mnav:hover {
    background: #ffdddd44;
    border-color: #faa;
    box-shadow: 0 8px 12px -8px #fff;
}

#button__mnav:hover,
#button__mnav img:hover,
#button__mnav:has(#toggle__mnav:checked) .button__close {
    cursor: pointer;
}

#button__mnav .button__close {
    color: var(--color-txt-mnav-item);
    display: none;
    font-size: 1.6rem;
    font-weight: 400;
    width: 1.6rem;
}

#button__mnav .button__close:hover {
    color: var(--color-txt-mnav-item-hover);
    transform: rotate(180deg) translate(-.4rem, -.2rem);
    transition: all .5s ease-in-out;
}

#button__mnav:has(#toggle__mnav:checked) {
    background: var(--color-bg-mnav);
    width: 94%;
}

#button__mnav input {
    display: none;
}

#button__mnav img {
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
}

#button__mnav:has(#toggle__mnav:checked) label img {
    display: none;
}

#button__mnav:has(#toggle__mnav:checked) .button__close {
    display: block;
}

#menu__mnav {
    display: none;
    list-style-type: none;
    text-align: center;
}

#menu__mnav a {
    border-bottom: 1px solid var(--color-border-mnav-item);
    color: var(--color-txt-mnav-item);
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    padding: .4rem 1.2rem;
    text-decoration: none;
    width: 90%;
}

#menu__mnav li:last-child a {
    border-bottom-color: transparent;
    margin-bottom: .6rem;
}

#menu__mnav a:hover {
    color: var(--color-txt-mnav-item-hover);
    font-style: italic;
}

#menu__mnav a.item__current {
    cursor: default;
    font-weight: 200;
}

#menu__mnav a:hover.item__current {
    color: var(--color-txt-mnav-item);
    font-style: normal;
}

#menu__mnav a.item__current-section {
    color: var(--color-txt-mnav-item-section);
}

#toggle__mnav:checked ~ #menu__mnav {
    display: block;
}

h1 {
    background-clip: text;
    background-image: var(--color-txt-h1-grad);
    color: var(--color-txt-h1);
    display: inline-block;
    font-family: var(--font-h1);
    font-size: 2.3rem;
    font-weight: 800;
    letter-spacing: .32cap;
    line-height: 2.3rem;
    margin: .4rem 0 .3rem 0;
    text-shadow: 3px 3px 4px var(--color-shadow-h1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slogan__header {
    color: var(--color-txt-slogan-site);
    font-family: var(--font-slogan-site);
    letter-spacing: .2cap;
        font-size: 1.2rem;
        line-height: 1.2rem;
        text-align: left;
}

main {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
}

article {
    background: var(--color-bg-translucent-mid);
    border-radius: .8rem;
    margin: 1.4rem auto;
    width: 90%;
}

article h2 {
    background-clip: text;
    background-image: var(--color-txt-article-h2-grad);
    border-bottom: 1px solid var(--color-border-article-h2);
    color: var(--color-txt-article-h2);
    display: inline-block;
    font-size: 2rem;
    hyphens: auto;
    letter-spacing: .3cap;
    margin-bottom: .5rem;
    padding: .6rem 1.4rem;
    width: 100%;
    word-break: break-word;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

article h2 svg {
    display: inline-block;
    fill: var(--color-svg-article-h2);
    margin: .2rem 0 .3rem .4rem;
    transform: scale(2) translateY(.1rem);
}

article h3 {
    color: var(--color-txt-article-h3);
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 600;
    padding: .6rem 1.4rem .8rem 1.4rem;
}

article h4 {
    color: var(--color-txt-article-h4);
    font-size: 1.2rem;
    font-weight: 600;
    padding: .3rem 1.4rem;
}

article p {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: .2cap;
    line-height: 2.1rem;
    padding: .6rem 1.4rem;
}

article ul {
    margin: 0 0 .4rem 2.36rem;
}

article ul li {
    color: #51292e;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: .18rem 0 .2rem .1rem;
}

article p:last-of-type {
    margin-bottom: .6rem;
}

article p:last-of-type:not(.block__idiom-info) {
    margin-bottom: 0;
}

.link__figure {
    display: block;
    padding-top: 1rem;
    text-decoration: none;
}

article .link__icon,
article .link__icon::after,
article .link__pdf,
article .link__pdf::after {
    display: inline-block;
}

article .link__pdf::after {
    background: transparent url(../images/icons/icon__pdf.svg) top right no-repeat;
    content: " ";
    height: 1.3rem;
    opacity: .7;
    padding: 0 .2rem;
    width: .9rem;
}

article .link__icon:hover::after,
article .link__pdf:hover::after {
    opacity: 1;
}

article .link__external-wikipedia::after {
    background: transparent url(../images/icons/icon__wikipedia.svg) top right no-repeat;
    background-size: cover;
    content: " ";
    height: 1.1rem;
    opacity: .7;
    padding: 0 .2rem;
    width: .9rem;
}

article p {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: .2cap;
    line-height: 1.4rem;
    padding: .6rem 1.4rem;
}

article p em {
    color: var(--color-txt-article-em);
    font-weight: 500;
}

article p a.link__external,
article p a.link__external::after {
    display: inline-block;
}

article p a.link__external::after {
    background: transparent url(../images/icons/icon__link-external.svg) top right no-repeat;
    background-size: cover;
    content: " ";
    height: .6rem;
    margin-left: .3rem;
    opacity: .7;
    transition: all .2s ease-in-out;
    width: .6rem;
}

article p a.link__external:hover::after {
    opacity: 1;
    transform: scale(1.2);
    transition: all .2s ease-in-out;
}

article p small {
    font-size: .8rem;
}

article figure img {
    box-shadow: 0 12px 6px -12px var(--color-shadow-sticky);
    display: block;
    margin: 1.4rem auto .3rem auto;
    width: 78%;
}

article figcaption {
    color: var(--color-txt-article-figcaption);
    display: block;
    font-size: .9rem;
    font-style: italic;
    margin: 0 auto;
    padding: .7rem 0;
    text-align: center;
    width: 80%;
}

article figcaption em {
    font-weight: 600;
}

.list__standard {
    margin: .4rem .6rem .4rem 2.7rem;
}

.list__standard li {
    color: var(--color-txt-list-item);
    font-size: 1.3rem;
    padding-left: .3rem;
}

article ol {
    margin: .2rem 0 .2rem 3.4rem;
}

article ol li {
    color: var(--color-txt-article-em);
    font-size: 1.4rem;
    font-weight: 500;
    padding: .2rem .4rem .2rem .5rem;
}

#button__back-2-top {
    background: #eeeeee7a;
    border: none;
    border-radius: 50%;
    color: #844;
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 2.8rem;
    font-weight: 400;
    height: 3.2rem;
    line-height: 2.7rem;
    margin: 3rem auto 0 auto;
    padding: 0 0 .4rem 0;
    text-align: center;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 3.2rem;
}

#button__back-2-top:hover {
    background: #ddd;
    transition: all .3s ease-in-out;
}

#block__page-details {
    background: var(--color-bg-translucent-low);
    border-radius: .6rem 0 0 .6rem;
    padding: .3rem 0 .3rem .9rem;
}

.block__created {
    color: var(--color-txt-created);
    font-size: 1.1rem;
}

.block__created code {
    font-size: .98rem;
    padding: 0 .5rem 0 .13rem;
}

.block__update {
    color: var(--color-txt-update);
    font-size: .9rem;
    font-style: italic;
}

.block__update code {
    font-size: .78rem;
    padding: 0 .5rem;
}

footer {
    bottom: 0;
    display: block;
    padding: .3rem .8rem;
}

footer code {
    font-size: .8rem;
}

footer p {
    color: #fba;
    font-size: .9rem;
    line-height: .9rem;
    text-shadow: 0 0 2px #000000ee;
}


/** Home Page **/
#block__home p {
    line-height: 2.2rem;
}

.block__professional-title {
    background: #fce9e95a;
    border-bottom: 1px solid #644;
    border-radius: 0 .3rem .6rem 0;
    border-right: 7px solid #444;
    color: #444;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 .8rem 0 1.4rem;
    padding: .3rem .8rem .24rem 1.2rem;
    text-align: right;
}

#block__today .block__sticky  {
    margin-bottom: 1.8rem;
}

#block__today .block__sticky h3 {
    padding-top: 1rem;
}

#block__today h3 em,
#block__today h4 em {
    display: inline-block;
    font-size: .9rem;
    font-style: normal;
    font-weight: 300;
    transform: translateY(-.1rem);
}

.link__sign img {
    border: 4px outset transparent;
}

.link__sign:hover img {
    border: 4px outset var(--color-highlight-primary);
    box-shadow: 0 0 18px var(--color-highlight-secondary);
}


/** About Page **/


/** Resume Page **/
#page__resume .block__update {
    color: #444;
    font-size: .7rem;
    line-height: .8rem;
    padding: .2rem .4rem;
    text-align: right;
}

#page__resume .block__update code {
    display: inline-block;
    font-size: .8rem;
    margin: 0;
    padding: 0;
}

#block__experience,
#block__education {
    margin: 0;
}

#block__experience li,
#block__education li {
    list-style-type: none;
}

#block__experience .block__time-period,
#block__education .block__year {
    background: #ffffff44;
    color: #533;
    font-family: "JetBrains Mono", monospace;
    font-size: .8rem;
    font-weight: 600;
    padding: 0 1.4rem;
    text-align: right;
}

#block__experience .block__company,
#block__education .block__institution {
    background: #ffffff99;
    text-align: right;
}

#block__experience .block__position,
#block__education .block__degree {
    background: #ffffff66;
    font-weight: 700;
}

#block__education .block__degree {
    border-bottom: 1px solid #e7657a;
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
}

#block__education .block__degree strong {
    font-size: .9rem;
    font-weight: 400;
}

#block__experience .block__accomplishments {
    margin: .6rem 0 .6rem 1.6rem;
}

#block__experience .block__accomplishments li {
    list-style-type: disc;
    padding-left: 0;
}


/** Contact Page **/
#block__socials {
    background: var(--color-bg-translucent-mid);
    border-radius: .5rem;
    box-shadow: 0 2px 6px -2px var(--color-shadow-sticky);
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0 auto .6rem auto;
    padding: 0 .4rem;
    left: 6px;
    width: 94%;
}

#block__socials li {
    border: 1px solid #fbb;
    border-radius: .3rem;
    margin: .4rem auto;
    transition: all .3s ease-in-out;
}

#block__socials li:hover {
    background: var(--color-bg-social-hover);
    border-color: var(--color-txt-social-hover);
    transition: all .3s ease-in-out;
}

#block__socials a {
    align-items: center;
    color: var(--color-txt-socials);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

#block__socials a:hover {
    color: var(--color-txt-social-hover);
    transition: all .3s ease-in-out;
}

#block__socials .avatar__socials {
    border-radius: .7rem;
    display: block;
    margin: .3rem auto .4rem auto;
    opacity: .8;
    transition: all .3s ease-in-out;
    width: 90%;
}

#block__socials a:hover .avatar__socials {
    opacity: 1;
}

#block__socials .block__social {
    margin: .6rem auto;
}

#block__socials .icon__socials {
    display: inline-block;
    height: 32px;
    margin-bottom: -.6rem;
    transition: all .3s ease-in-out;
    width: 32px;
}

#block__socials .block__social span {
    display: inline-block;
}

#block__socials a:hover .icon__socials {
    transform: rotate(-4deg) scale(1.8) translate(-.5rem, -.4rem);
    transition: all .3s ease-in-out;
}


/** Learn **/
.block__lang-sections {
    background: transparent url(/assets/images/bg_language-learning.webp) no-repeat top center;
    background-size: cover;
}

#nav__selector-learn-lang {
    box-shadow: 0 12px 6px -10px var(--color-shadow-select-lang);
    display: flex;
    gap: .3rem;
    justify-content: space-between;
    list-style-type: none;
    margin: 0 auto .8rem auto;
    padding: 0 .3rem 4.6rem .3rem;
    width: 100%;
}

#nav__selector-learn-lang li {
    display: inline-block;
}

#nav__selector-learn-lang  .selector__lang-learn {
    border: 2px outset var(--color-border-mnav-item);
    border-radius: .8rem;
    box-shadow: 0 1px 4px var(--color-shadow-select-lang-item);
    cursor: pointer;
    display: inline-block;
    height: 3rem;
    overflow: hidden;
    transition: all .3s ease-in-out;
    width: 4rem;
}

#nav__selector-learn-lang  .selector__lang-learn:hover {
    border: 2px solid var(--color-border-mnav-item);
    box-shadow: 0 10px 8px -6px var(--color-shadow-sticky);
    transform: rotate(-2deg) scale(1.6);
    transition: all .3s ease-in-out;
}

#nav__selector-learn-lang  .selector__lang-lang img {
    display: inline-block;
}

#nav__selector-learn-lang .selector__lang-learn .selector__label {
    display: none;
}

.block__idiom-content img {
    border-radius: .4rem;
    box-shadow: 0 12px 6px -12px;
    display: block;
    margin: 0 auto;
    width: 90%;
}

.block__idiom .block__def-literal {
    color: var(--color-txt-article-h3);
    font-style: italic;
}

.block__idiom .block__def-semantic {
    font-size: 1.1rem;
    color: #444;
}

.block__idiom .block__def-semantic-target {
    font-size: .9rem;
    font-weight: 600;
    color: #200;
}

#block__today .block__idiom h5,
#page__idioms .block__idiom-content h4 {
    background: var(--color-bg-translucent-mid);
    color: var(--color-txt-article-h5);
    font-size: 1rem;
    font-style: italic;
    padding: .2rem 1rem;
    text-align: right;
}

#block__today .block__idiom h5 {
    margin-top: .7rem;
}

#page__idioms .block__idiom-content h4 {
    margin-top: 0;
}

#page__idioms .block__idiom-content p {
    padding: 0 .2rem 0 1.4rem;
}

#page__home .block__idiom p {
    margin-top: .6rem;
    padding: 0 .2rem 0 1.4rem;
}

.block__idiom .block__example-sentence {
    color: var(--color-txt-idiom-example);
    font-family: var(--font-example);
    font-size: 1.1rem;
    font-style: italic;
}

.block__idiom .block__example-reference {
    font-size: .8rem;
    line-height: .9rem;
}

.block__idiom .block__example-reference-quote {
    background: var(--color-bg-example-quote);
    border: 1px solid var(--color-border-example-quote);
    border-bottom-width: 4px;
    border-right-width: 4px;
    border-radius: 0 .8rem .8rem .8rem;
    box-shadow: 3px 12px 6px -10px var(--color-shadow-sticky);
    color: var(--color-txt-idiom-example-quote);
    font-size: .8rem;
    margin: .4rem .7rem 1rem .9rem;
    padding: .4rem .7rem .5rem .7rem;
}

.list__sentences {
    list-style-type: none;
    margin: 0 1.4rem;
}

.list__sentences li {
    border-bottom: 1px solid var(--color-txt-sentence-target);
    margin-bottom: .3rem;
}

.list__sentences span {
    display: block;
    padding: .2rem .3rem .1rem 0;
}

.block__wording-ok,
.block__sentence-target {
    color: var(--color-txt-sentence-target);
}

.block__wording-translated,
.block__sentence-translated {
    color: var(--color-txt-sentence-translated);
    font-size: .9rem;
    font-style: italic;
}

.block__source {
    color: var(--color-txt-article-source);
    font-size: .8rem;
    font-style: italic;
    font-weight: 800;
}

.block__source a {
    font-style: normal;
    font-weight: 300;
}

.block__comprehension-questions ul {
    list-style-type: none;
}

.string__lang-article {
    font-size: .9rem;
    font-style: normal;
    font-weight: 400;
}

.lang__de-f {
    color: var(--color-txt-lang-f);
}

.lang__de-m {
    color: var(--color-txt-lang-m);
}

.lang__de-f {
    color: var(--color-txt-lang-n);
}

/*** Section List ***/
.nav__section-list {
    font-weight: 600;
    list-style-type: none;
    margin: 0;
    padding: .4rem 1.4rem 1.8rem 1.4rem;
}

.nav__section-list li {
    padding: .4rem 0;
    position: relative;
    width: 100%;
}

.nav__section-list a {
    color: var(--color-txt-article-em);
    display: inline-block;
    font-size: 1.6rem;
    padding-left: 2.4rem;
    text-decoration: none;
    transition: all .3s ease-in-out;
    width: 100%;
}

.nav__section-list a:hover {
    color: var(--color-txt-article-h3);
    font-style: italic;
    font-weight: 800;
    transition: all .3s ease-in-out;
}

.nav__section-list li a span {
    top: .5rem;
    display: inline-block;
    fill: var(--color-txt-list-sections);
    left: -.3rem;
    margin-right: .4rem;
    position: absolute;
    transition: all .3s ease-in-out;
}

#item__learn-german a span svg {
    transform: scale(1.6);
}

#item__topics a span svg {
    transform: scale(1.2);
}

#item__idioms a span svg {
    transform: scale(1.3);
}

#item__sentences a span svg {
    transform: scale(.9) translateY(.1rem);
}

#item__sentences:hover a span svg {
    transform: translateY(-.2rem);
}

#item__vocab a span svg {
    transform: scale(1.4);
}

#item__learn-german:hover a span svg {
    transform: scale(2.1);
}

#item__topics:hover a span svg {
    transform: scale(1.8);
}

#item__idioms:hover a span svg {
    transform: scale(1.9);
}

#item__sentences:hover a span svg {
    transform: scale(1.5) translateY(-.03rem);
}

#item__vocab:hover a span svg {
    transform: scale(2);
}

#item__reading a span svg,
#item__speaking a span svg,
#item__writing a span svg,
#item__listening a span svg {
    transform: scale(1.6);
}

#item__reading:hover a span svg,
#item__speaking:hover a span svg,
#item__writing:hover a span svg,
#item__listening:hover a span svg {
    transform: scale(2);
}

.nav__section-list li a:hover span svg {
    fill: var(--color-txt-article-h3);
    transition: all .3s ease-in-out;
}

.nav__section-list li a:hover span {
    transform: rotate(-4deg) translateX(.2rem);
    transition: all .3s ease-in-out;
}

.nav__section-list li::after {
    border: 0 solid transparent;
    transition: border .23s ease-in-out;
}

.nav__section-list li:hover::after {
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--color-txt-article-h3);
    border-top: 6px solid transparent;
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: scale(2.3) translateY(-20%);
    transition: border .23s ease-in-out;
    width: 0;
}

/*** Assessment Forms ***/
.block__comprehension-questions form ul {
    margin: 0 1.2rem;
}

.block__comprehension-questions form ul li {
    font-size: 1.2rem;
}

.block__comprehension-questions form .form__item-unselected {
    background: #fff;
    border: 1px solid var(--color-border-form-item-unselected);
    color: var(--color-txt-form-item-unselected);
    margin: .6rem 0;
    padding: .4rem .8rem .6rem .7rem;
}

.block__comprehension-questions form .form__item-unselected:hover:has(input:not(:checked)) {
    box-shadow: 0 10px 8px -12px #000;
}

.block__comprehension-questions form .form__item-unselected:hover:has(input:not(:checked)) label::before {
    background: #ddd;
    border-color: white;
}

.block__comprehension-questions form .form__item-unselected input {
    display: none;
}

.block__comprehension-questions form .form__item-unselected label::before {
    border: 2px solid transparent;
    border-radius: .4rem;
    content: " ";
    display: inline-block;
    height: 1.1rem;
    margin-right: .6rem;
    outline: 1px solid var(--color-border-form-item-unselected);
    transform: translateY(.22rem);
    width: 1.1rem;
}

.block__comprehension-questions form .form__item-selected,
.block__comprehension-questions form .form__item-unselected:has(input:checked) {
    background: #efe;
    border-color: green;
    color: green;
    font-weight: 600;
}

.block__comprehension-questions form .form__item-unselected:has(input:checked) label::before {
    background: green;
    border-color: #fff;
    outline-color: green;
}

/*** COMPONENT: ABC Menu ***/
#nav__vocabulary-abc {
    align-items: center;
    display: flex;
    gap: .8rem;
    height: 5rem;
    margin: 0 auto;
    overflow-x: auto;
    padding: 0 2rem;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    white-space: nowrap;
    width: 90vw;
    -ms-overflow-style: none;
}

#nav__vocabulary-abc::-webkit-scrollbar {
    display: none;
}

#nav__vocabulary-abc li {
    display: inline-block;
    list-style-type: none;
    scroll-snap-align: center;
}

#nav__vocabulary-abc a {
    background-color: #f0f0f0;
    border: 2px solid transparent;
    border-radius: 50%;
    color: var(--color-btn-primary);
    display: inline-block;
    font-size: 1.8rem;
    font-weight: bold;
    height: 2.8rem;
    line-height: 2.5rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 2.8rem;
}

#nav__vocabulary-abc li:hover {
    box-shadow: 0 10px 12px -12px #000000dd;
}

#nav__vocabulary-abc a:focus-visible,
#nav__vocabulary-abc a:hover {
    background-color: var(--color-btn-primary);
    border: 2px outset var(--color-btn-secondary);
    box-shadow: inset 0 10px 12px -12px #000000dd;
    color: #fff;
    outline: none;
    transform: scale(1.3);
}

#nav__vocabulary-abc a:active {
    background-color: var(--color-btn-active);
    border-color: var(--color-btn-active);
}

/*** Fom Ctrl Buttons ***/
.btn__form-primary {
    background: var(--color-bg-btn-primary);
    border: 2px solid var(--color-bg-btn-primary);
    border-radius: 2rem;
    box-shadow: 0 22px 6px -18px #00000077;
    color: #fff;
    display: block;
    font-family: "Monsieur", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2rem;
    margin: 1.4rem auto;
    padding: .6rem 1.1rem;
    width: 80%;
}

.btn__form-primary:hover {
    background: #fff;
    box-shadow: 0 20px 6px -18px #00000055;
    color: var(--color-bg-btn-primary);
    font-size: 1.8rem;
}

/** Stickies **/
.block__sticky {
    background: var(--color-bg-sticky);
    border-radius: 0;
    box-shadow: 0 8px 12px -6px var(--color-shadow-sticky);
    color: var(--color-txt-sticky);
    font-family: "Delius", cursive;
    height: 90vw;
    position: relative;
    width: 90vw;
    z-index: 9;
}

.block__cardinal {
    background: var(--color-bg-sticky-cardinal);
    border-radius: 50%;
    box-shadow: 0 8px 12px -6px var(--color-shadow-sticky);
    color: var(--color-txt-sticky-cardinal);
    font-family: "Gravitas One", sans-serif;
    font-weight: 800;
    height: 2.4rem;
    padding: .56rem .2rem .56rem .4rem;
    text-align: center;
    width: 3.5rem;
    z-index: 99;
}

.block__cardinal a {
    font-style: normal;
}

.block__idiom .block__cardinal {
    position: relative;
    right: -67vw;
    top: -1.3rem;
}

.block__idiom .block__cardinal.number__digits-1 a {
    font-size: 1.6rem;
}

.block__note .block__cardinal a,
.block__idiom .block__cardinal.number__digits-2 a {
    font-size: 1.5rem;
}

.block__sticky .block__cardinal {
    position: absolute;
    right: -.4rem;
    top: -1rem;
}

.block__idiom .block__date {
    background: var(--color-bg-translucent-mid);
    margin-top: -1.54rem;
}

.block__idiom .block__date,
.block__sticky .block__date {
    color: var(--color-txt-sticky-date);
    font-family: "JetBrains Mono", monospace;
    font-size: .7rem;
    font-style: normal;
    font-weight: 600;
    padding: .3rem .6rem;
}

.block__idiom  .string__weekday,
.block__sticky .string__weekday {
    color: var(--color-txt-sticky-cardinal);
    font-family: "Delius", serif;
}

.block__date-string {
    display: inline-block;
}

.block__sticky h3 {
    color: var(--color-txt-sticky);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    padding: .2rem 1.4rem .1rem 1.4rem;
}

.block__sticky p {
    font-size: 1rem;
    font-style: italic;
}

.block__sticky .block__note-img {
    position: absolute;
    top: 0;
}

.block__note-img img {
    display: block;
    height: 90vw;
    opacity: 1;
    transition: all .6s ease-out;
    width: 90vw;
}

.block__sticky input {
    display: none;
}

.block__sticky:has(input:checked) img {
    opacity: 0;
    transition: all .6s ease-out;
}


/** Valentines **/
#title__val {
    font-size: 2rem;
}

#block__valentines-day-2026 {
    background: transparent url(../images/valentinesday2026-bg-w.cup_380.webp) top center;
    background-size: cover;
    padding-bottom: 2.3rem;
}

main#page__valentines-day-2026 article h2 {
    background: var(--color-bg-translucent-mid);
    border-radius: .9rem .9rem 0 0;
    color: var(--color-btn-primary);
    -webkit-text-fill-color: var(--color-btn-primary);
}

#block__valentines-day-2026 p {
    background: var(--color-bg-translucent-low);
    color: #645;
    font-family: "Delius", cursive;
    font-size: 2.3rem;
    font-style: italic;
    line-height: 2.2rem;
    text-shadow: 1px 1px 3px #fff;
}

#block__valentines-day-2026 img {
    border-radius: .6rem;
    box-shadow: 1px 1px 5px #00000088;
    display: block;
    width: 90vw;
}

#block__valentines-day-2026 img#jellies {
    margin: -4.2rem auto 2rem auto;
    transform: rotate(-5deg);
    width: 60vw;
}

/** View Controls Component **/
.nav__bar {
    background: var(--color-bg-translucent-mid);
    border-radius: .3rem;
    color: var(--color-btn-primary);
    display: flex;
    margin: 0 auto;
    padding: .3rem .9rem;
    width: 90vw;
}

.nav__bar ul ul,
.nav__bar button {
    display: flex;
    flex-direction: row;
    gap: .4rem;
    justify-items: center;
}

.nav__bar ul,
.nav__bar li {
    display: inline-block;
    list-style-type: none;
}

.nav__bar button {
    border: 1px solid var(--color-btn-primary);
    border-radius: .2rem;
    font-size: .8rem;
    padding: .4rem .6rem .2rem .6rem;
}


/* Language System */
.nav__lang {
    display: flex;
    gap: .8rem;
    list-style-type: none;
    z-index: 9999;
}
.selection__active {
    display: inline-block;
}

.selection__option {
    display: none;
}

.nav__lang li img {
    display: inline-block;
    width: 1.2rem;
}


/* Branding */
.brand-mrsroe {
    font-family: "Gravitas One", serif;
    font-weight: 700;
}

article p .brand-mrsroe {
    color: var(--color-txt-article-brand-mrsroe);
}

article .brand-cjo {
    border-bottom: 1px solid var(--color-border-brand-cjo);
    display: inline-block;
    font-family: "Ubuntu Sans", sans-serif;
    text-shadow: 0 0 2px var(--color-shadow-brand-cjo);
    transition: all .2s ease-in-out;
}

article .brand-cjo:hover {
    border-bottom-color: transparent;
    text-shadow: 0 0 4px var(--color-shadow-brand-cjo);
    transform: rotate(-2deg);
    transition: all .2s ease-in-out;
}

article .brand-cjo span {
    display: inline-block;
}

article .brand-cjo-coder {
    color: var(--color-txt-brand-coder);
    font-weight: 700;
}

article .brand-cjo-c {
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;
    transform: translate(.1rem, .3rem);
}

article .brand-cjo-oder {
    font-size: 1.2rem;
}

article .brand-cjo-jason {
    color: var(--color-txt-brand-jason);
    font-weight: 300;
}

.button__listen {
    background: #ddd;
    border: 1px solid #ddd;
    border-radius: 100%;
    box-shadow: 0 5px 6px -2px #000000aa;
    display: inline-block;
    padding: 0 .4rem;
}

.button__listen:hover {
    background: #ccc;
    border: 1px solid #aaa;
    border-radius: 100%;
    box-shadow: 0 2px 4px -2px #000000aa;
    display: inline-block;
    padding: 0 .4rem;
}


/* Dialogs */
/** JS Disabled **/
span:has(#dialog-noscript),
#dialog-noscript {
    display: block;
    position: fixed;
    top: 0;
}

header:has(span #dialog-noscript) {
    padding-top: 8rem;
}


/* Media Queries */
/** Accessibility **/
@media (prefers-reduced-motion: reduce) {
    .nav__section-list li a span svg {
        transform: none;
    }
}


/** Smaller Displays **/
@media screen and (max-width: 380px) {
    article h2 {
        font-size: 1.3rem;
    }

    #page__sentences h2 svg {
        transform: scale(1.2) translateY(.3rem);
    }
}


/** Larger Displays **/
@media screen and (min-width: 800px) {
    header {
        flex-direction: row;
        padding: 2.1rem 1.8rem 3.8rem 1.8rem;
    }

    h1,
    #title__val {
        font-size: 3.6rem;
        line-height: 3.6rem;
    }

    .slogan__header {
        font-size: 1.4rem;
    }

    #button__mnav {
        border: 1px solid #fff;
        border-radius: .3rem;
        display: block;
        left: 50%;
        padding: .3rem .3rem .1rem .3rem;
        position: fixed;
        top: .7rem;
        z-index: 9999;
    }

    #button__mnav:has(#toggle__mnav:checked) {
        border-radius: 0;
        left: 0;
        top: 0;
        width: 100%;
    }

    #menu__mnav .selector__lang {
        margin: auto;
        width: 18rem;
    }

    article {
        margin: 1.4rem 1.4rem;
        width: 800px;
    }

    article h2 svg {
        margin-left: .6rem;
        transform: scale(2.4) translateY(.1rem);
    }

    article figure img {
        width: 62%;
    }

    article figcaption {
        width: 58%;
    }

    .nav__section-list {
        margin: 0 1rem 1.4rem 2.3rem;
        padding: 0;
        width: 34%;
    }
    .nav__section-list li {
        padding: .6rem 0;
    }

    #block__socials {
        flex-direction: row;
        gap: .4rem;
        margin: 0 auto .6rem auto;
        padding: 0 .4rem;
        left: 6px;
        width: 94%;
    }

    #block__socials a {
        height: 100%;
        justify-content: space-between;
    }

    #block__socials li:hover {
        border-width: 3px;
        transform: scale(1.4);
        z-index: 99;
    }

    #nav__selector-learn-lang {
        margin: 2rem 2rem 1.2rem 2rem;
        padding-bottom: 3.2rem;
        width: 90%;
    }

    #nav__selector-learn-lang .selector__lang-learn {
        height: 4.56rem;
        width: 6rem;
    }

    .block__idiom img {
        margin: 0 auto .2rem auto;
        width: 512px;
    }

    .block__idiom .block__cardinal {
        right: -690px;
    }

    .block__idiom .block__cardinal,
    .block__sticky .block__cardinal {
        height: 3rem;
    }

    .block__idiom .block__cardinal.number__digits-1 {
        padding: .9rem .6rem 0 .8rem;
        width: 5.2rem;
    }

    .block__idiom .block__cardinal.number__digits-1 a {
        font-size: 2.6rem;
    }

    .block__idiom .block__cardinal.number__digits-2 ,
    .block__sticky .block__cardinal {
        padding: .9rem .6rem 0 .9rem;
        width: 5.6rem;
    }

    .block__idiom .block__cardinal.number__digits-2 a {
        font-size: 2.4rem;
    }

    .block__idiom .block__example-reference-quote {
        font-size: 1.2rem;
        margin: .6rem auto 1.2rem 4.4rem;
        padding: .8rem 1.3rem 1rem 1.3rem;
        width: 440px;
    }

    .block__sticky {
        margin: 1.4rem 2rem;
    }

    .block__sticky,
    .block__note-img img {
        cursor: pointer;
        height: 420px;
        width: 420px;
    }

    .block__sticky .block__cardinal {
        top: -1.6rem;
    }

    #block__valentines-day-2026 img {
        margin: 0 auto;
        width: 96%;
    }

    #block__valentines-day-2026 img#jellies {
        margin: -14.2rem auto 2rem auto;
        transform: rotate(-5deg);
        width: 50%;
    }
}