/* /////////////////////////////////////////////////////////////////////// */

*,
::before,
::after {
    margin: 0;
    padding: 0;
    border-style: none;
    border-width: thin;
    border-color: currentColor;
    box-sizing: border-box;
    clear: both;
}

::-webkit-scrollbar {
    width: 2em;
    height: 2em;
}

::-webkit-scrollbar-button {
    background-color: var(--lightgray-color);
    outline: thick solid var(--lightgray-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--ashaam-bg-color-80);
    border: thick solid var(--ashaam-text-color);


}

::-webkit-scrollbar-track {
    background-color: var(--primiry-bg-color);
    outline: thick solid var(--lightgray-color);
    border: transparent;
}

::-webkit-scrollbar-track-piece {
    background-color: var(--primiry-bg-color);
}

:root[theme="light"] {
    --primiry-text-color: #333333;
    --primiry-bg-color: #c2c2c2;
    --primiry-bg-color: whitesmoke;
    --ashaam-text-color: #ba000b;
    --ashaam-bg-color-80: #ba000b50;
    --lightgray-color: #d9d9d9;
    --lightgray-color-50: #d9d9d950;
    --lightgray-color-90: #d9d9d990;
    /* Some colors */
    --color-cancel: #e51668;
    --color-reset: #586575;
    --color-cloud: #12b0df;
    --color-cancel-light: #e5166895;
    --color-reset-light: #58657595;
    --color-cloud-light: #12b0df95;

}

:root[theme="dark"] {
    --primiry-text-color: #c2c2c2;
    --primiry-bg-color: #333333;
}

::selection {
    text-shadow: none;
    color: var(--primiry-bg-color);
    background-color: var(--primiry-text-color);
}

/* /////////////////////////////////////////////////////////////////////// */

.flexy {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.row {
    flex-direction: row;
}

.gap-x1 {
    gap: 1em;
}

.gap-x2 {
    gap: 2em;
}

/* /////////////////////////////////////////////////////////////////////// */

html {
    font-size: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    padding: .5em;
    color: var(--primiry-text-color);
    background-color: var(--primiry-bg-color);
    font-size: 18px;
    font-weight: 400;
    max-width: 1280px;
}

:is(header, main, section, div, details, summary, table, footer) {
    margin-bottom: 1em;
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
q,
p {
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

h1 {
    margin: 0;
    line-height: 1.4em;
    font-size: 3em;
    font-weight: 400;
    text-align: start;
}

main {
    margin-bottom: 1em;
}

main>header {
    margin: 0;
}

figure {
    margin-inline: 0;
    margin-block: 0;
}

figcaption,
footer {
    text-align: center;
}

img {
    width: 100%;
    max-width: 100%;
}

a {
    color: currentColor;
    text-decoration-color: var(--ashaam-text-color);
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

/* /////////////////////////////////////////////////////////////////////// */

details summary {
    margin: 0;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--ashaam-text-color);
}

details[open] summary,
details[open] :is(p, table):last-of-type {
    margin-bottom: .5em;
    padding-bottom: 1em;
    border-bottom: thick dotted var(--ashaam-text-color);
}

details p {
    padding: .5em 0;
    text-align: start;
    font-size: 1.25rem;
}

th,
td {
    padding: .5em;
}

td {
    border: thin solid black;
}

body>footer {
    margin: 0;
}

body>footer>section>h5 {
    margin: 0;
    width: inherit;
    text-align: start;
}

body>footer>a:last-of-type {
    padding: 6em 0;
}

/* /////////////////////////////////////////////////////////////////////// */

/* Start global nav */

nav.global {
    margin: 0;
    padding: 1em;
    width: 100%;
    justify-content: space-evenly;
}

nav.global figure.logo {
    background-color: var(--lightgray-color);
    background-color: transparent;
    justify-content: flex-start;
    width: fit-content;
}

nav.global figure.logo img {
    height: 5em;
    height: 100%;
    max-width: 200px;
    mix-blend-mode: multiply;
}

nav.global div.buttons {
    margin: 0;
    padding: 0 .5em;
    padding-bottom: .5em;
    width: fit-content;
    position: fixed;
    top: 0;
    right: 0;
    color: var(--primiry-text-color);
    background-color: var(--lightgray-color);
    align-content: flex-end;
    justify-content: flex-end;
    user-select: none;
    z-index: 999;
    border-bottom-left-radius: .25em;
}

nav.global div.buttons::before {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 1em;
    color: var(--primiry-text-color);
    background-color: var(--lightgray-color);
    padding: 0 .5em;
    border-bottom-left-radius: .25em;
    font-size: 3rem;
    transition: all 2s ease-in-out 0s;
}

nav.global div.buttons button {
    outline: none;
    color: inherit;
    background: none;
    font-size: 3rem;
    cursor: pointer;
    rotate: 0deg;
    user-select: none;
    transition: all 500ms ease-in-out 0s;
}

nav.global div.buttons button:focus,
nav.global div.buttons button:hover {
    outline: none;
    color: var(--ashaam-text-color);
}

nav.global div.buttons button#trigramForHeaven:focus {
    outline: thin dashed var(--ashaam-text-color);
}

nav.global div.buttons:has(#trigramForHeaven:hover)::before,
nav.global div.buttons:has(#trigramForHeaven:focus):focus-within::before {
    visibility: visible;
    content: "Menu";
    opacity: 1;
    transition: all 1s ease-in-out 100ms;
}

nav.global div.buttons button#trigramForHeaven:hover {
    rotate: 90deg;
    transition: all 500ms ease-in-out 0s;
}

nav.global div.buttons:has(#refreshWindowButton:hover)::before,
nav.global div.buttons:has(#refreshWindowButton:focus):focus-within::before {
    visibility: visible;
    content: "Reload";
    opacity: 1;
}

nav.global div.buttons button#refreshWindowButton:hover {
    rotate: 360deg;
    transition: rotate 1s ease-in-out 0s;
}

nav.global form:has(> input[type="search"]) {
    flex: 1 0 100%;
    flex-direction: row;
    gap: .5em;
}

/* End global nav */

/* /////////////////////////////////////////////////////////////////////// */

/* Start about.html */

figure.orthographic {
    margin: 1em 0;
    gap: .5em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*background-image: url("https://developer.apple.com/app-store/marketing/guidelines/images/badge-example-preferred.png");*/
}

figure.orthographic img {
    width: 75dvw;
    height: auto;
    mix-blend-mode: multiply;
}

/* End about.html */

/* /////////////////////////////////////////////////////////////////////// */

/* Start index.html */

/* body.index {
    background-image: linear-gradient(180deg, black, transparent);
} */

body.index figure.easternMediterranean {
    position: relative;
    outline: none;
    margin: 0;
    margin-bottom: 2em;
    padding: 1.5em;
    padding: 0;
    width: 100%;
    height: 85dvh;
    min-height: 25dvh;
    gap: .5em;
    background-color: var(--ashaam-text-color);
    background-clip: padding-box;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/ISS-47_Middle_East.jpg");
    border-radius: .25em;
    border: thin dashed var(--ashaam-text-color);
    border: 0;
}

body.index figure.easternMediterranean img {
    max-width: 100%;
    height: 100%;
    mix-blend-mode: normal;
}

body.index figure.easternMediterranean figcaption {
    padding: .5em;
    font-size: 1.25rem;
    color: var(--primiry-text-color);
    background-color: var(--primiry-bg-color);
    position: absolute;
    bottom: -1em;
    right: 1.5em;
    max-width: 85%;
    border-radius: .25em;
    border: thick dashed var(--ashaam-text-color);
}

body.index figure.easternMediterranean figcaption a {
    color: var(--ashaam-text-color);
}

div.placeholders {
    /* display: none; */
    position: absolute;
}

div.placeholders :is(ul.waterways, ul.countries) {
    position: relative;
    list-style-image: url("../images/marker-16px.png");
    list-style-position: inside;
    background-color: transparent;
}

div.placeholders :is(ul.waterways, ul.countries) li {
    position: absolute;
    color: var(--primiry-text-color);
    background-color: var(--lightgray-color);
    background-color: var(--lightgray-color-90);
    width: max-content;
    padding: .25em;
    border: 0;
    box-shadow: .15em .1em midnightblue;
    font-size: 1rem;
}

div.placeholders :is(ul.waterways, ul.countries) li:hover {
    box-shadow: none;
    cursor: pointer;
    box-shadow: -.15em -.1em midnightblue;
}

div.placeholders :is(ul.waterways, ul.countries) li a {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    color: transparent;
    text-shadow: 0 0 var(--primiry-bg-color);
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="red"] {
    top: 20em;
    left: 10em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

div.placeholders :is(ul.waterways, ul.countries) li[data-slug="mediterranean"] {
    top: -10em;
    right: 40em;
}

body.index main p {
    margin: 0;
    padding: 1em 0;
}

/* End index.html */

/* /////////////////////////////////////////////////////////////////////// */

/* Start main section */

main#content {
    align-items: flex-start;
    gap: 1em;
}

/* End main section */

/* /////////////////////////////////////////////////////////////////////// */

a[href="#content"] {
    scale: 1;
    font-size: 2.25rem;
    text-decoration: none;
    user-select: none;
    transition: scale 400ms ease-in-out 0s;
}

a[href="#content"]:hover {
    scale: 1.2;
    transition: scale 200ms ease-in-out 0s;
    cursor: pointer;
}

section#activeEventsPanel {
    counter-reset: activeEvents;
    align-items: flex-start;
    flex-direction: row;
    gap: 2em;
}

section#activeEventsPanel article.flexy {
    position: relative;
    padding: 1em;
    width: 21em;
    border-top-right-radius: .25em;
    border-bottom-right-radius: .25em;
    border: thin solid var(--lightgray-color-90);
    justify-content: flex-start;
    background-color: seashell;
}

section#activeEventsPanel article.flexy::before {
    counter-increment: activeEvents;
    padding: 0 .15em;
    position: absolute;
    left: -.65em;
    content: "#" counter(activeEvents);
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ashaam-text-color);
    background-color: var(--lightgray-color-90);
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em;
    border: thin none currentColor;
    user-select: none;
    /*border-radius: .25em;*/
}

section#activeEventsPanel article h3 {
    padding-left: .35em;
    text-transform: uppercase;
}

section#inactiveEventsPanel {

}

footer.mayBeInterested {
    margin: 0;
    padding: 1em;
}

footer.mayBeInterested h4 {
    text-align: start;
}

footer.mayBeInterested :is(h4, h5, article) {
    margin: 0;
    width: 100%;
}

footer.mayBeInterested h5::before {
    position: absolute;
    margin-left: -1em;
    content: "\21B3 ";
}

footer.mayBeInterested article {
    padding: 1em 0;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 1.25em;
}

footer.mayBeInterested div {
    margin: 0;
    width: 15em;
    gap: .25em;
}

ul.emailSocialCode {
    /*list-style: square;
    list-style-position: inside;*/
    flex: 1 0 100%;
    justify-content: flex-start;
    list-style: none;
    gap: .5em;
}

ul.emailSocialCode h5 {
    margin: 0;
}

ul.emailSocialCode li:first-child {
    list-style: none;
}

menu.secondaryMenu {
    margin: 1em 0;
    list-style: none;
    font-size: 1.5rem;
    font-weight: 600;
}

menu.secondaryMenu h5 {
    margin: 0;
}

menu.secondaryMenu a {
    color: var(--lightgray-color);
    color: var(--primiry-text-color);
}

section.indexFooter {
    justify-content: space-between;
}

pre {
    white-space: pre-wrap;
}

/* /////////////////////////////////////////////////////////////////////// */

/* Start global footer */

footer.global {
    margin: 0;
    margin-bottom: 1em;
    gap: 1em;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1rem;
    width: 100%;
}

footer.global>* {
    padding: 0 1em;
}

footer.global :is(div.links, div.copyrights, div.display, div.external, div.internal, ul.anotherMenu) {
    margin: 0;
    width: fit-content;
    align-items: flex-start;
    gap: .5em;
}

footer.global div.gotop {
    flex: 1 0 100%;
}

footer.global div.copyrights {
    flex: 1 0 100%;
    align-items: center;
}

footer.global ul.anotherMenu {
    list-style: none;
    justify-content: flex-start;
}

section.badges {
    margin: 0;
    margin-bottom: 1em;
    padding: 0;
    gap: 1em;
    user-select: none;
}

section.badges h4 {
    text-align: center;
}

section.badges figure.app-store {
    padding-top: .5em;
    gap: .2em;
}

section.badges figure {
    background-color: transparent;
}

section.badges figcaption {
    flex-grow: 0;
    flex-shrink: 1;
    font-size: small;
    font-weight: bold;
    max-width: 16em;
}

section.badges figure.app-store figcaption {
    padding-top: .5em;
}

section.badges a {
    cursor: not-allowed;
}

section.badges figure img {
    mix-blend-mode: multiply;
    height: auto;
}

section.badges figure.google-play img {
    width: 240px;
    width: 200px;
}

section.badges figure.app-store img {
    width: 160px;
}

div:has(select#displayLanguage) {
    cursor: pointer;
    gap: .75em;
}

footer div.cookies {
    flex: 1 0 100%;
    gap: .5em;
}

select#displayLanguage {
    border: thin solid currentColor;
    outline: 0;
}

select#displayLanguage:focus {
    border-color: var(--ashaam-text-color);
    outline: thick solid var(--ashaam-text-color);
}

/* End global footer */

/* /////////////////////////////////////////////////////////////////////// */

/* Start form elements */

label,
select {
    cursor: inherit;
}

input:invalid {
    border: 2px dashed red;
}

input:invalid:required {
    background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
    border: 2px solid black;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
fieldset {
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
}

input:invalid {
    box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
    box-shadow: none;
}

/* End form elements */

/* /////////////////////////////////////////////////////////////////////// */

@media all and (max-width: 1350px) {
    section#activeEventsPanel article.flexy {
        width: 28em;
    }

    :is(header, main, section, div, footer) {
        width: 92%;
    }
}

@media all and (max-width: 1250px) {
    section#activeEventsPanel article.flexy {
        width: 25em;
    }

    :is(header, main, section, div, footer) {
        width: 95%;
    }
}

@media all and (max-width: 1054px) {
    /*ul.emailSocialCode li:first-child {
        list-style: square;
    }*/

    section.indexFooter article {
        width: 100%;
    }
}

/*@media all and (max-width: 1015px) {
    section#activeEventsPanel article.flexy {
        width: 45em;
    }
}*/

section.cta.flexy,
dialog#newEventDialog div.cta {
    gap: 1em;
}

dialog#newEventDialog div.cta {
    position: fixed;
    bottom: 3.5dvh;
}

dialog#newEventDialog input:is([type="reset"], [type="button"], [type="submit"]),
section.cta.flexy button {
    padding: .25em 1em;
    border: 0;
    outline: none;
    opacity: .75;
    color: #f8f8f8;
    background-color: #1b1b1b;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: .15em;
    box-shadow: 0 0 1em #1b1b1b40;
    cursor: pointer;
    transition: all 100ms ease-in 0s;
    text-transform: capitalize;
    max-width: 100%;
    width: fit-content;
}

dialog#newEventDialog input:is([type="reset"], [type="button"], [type="submit"]):hover,
section.cta.flexy button:hover {
    opacity: 1;
    color: #fcfcfc;
    transform: translate(-.05em, -.1em);
    transition: all 100ms ease-out 0s;
}

section.cta.flexy button:hover {
    box-shadow: 0 0 1em #1b1b1b80;
}

dialog#newEventDialog input[type="button"][value="cancel"] {
    background-color: var(--color-cancel);
    box-shadow: 0 0 .5em var(--color-cancel-light);
}

dialog#newEventDialog input[type="reset"] {
    background-color: var(--color-reset);
    box-shadow: 0 0 .5em var(--color-reset-light);
}

dialog#newEventDialog input[type="submit"] {
    background-color: var(--color-cloud);
    box-shadow: 0 0 .5em var(--color-cloud-light);
}

section.flexy:has(output) {
    display: none;
    margin: 1em 0;
    border: thin solid currentColor;
    border-left: 0;
    border-right: 0;
    width: 100%;
}

section:has(output)>div {
    gap: 1em;
}

dialog>form>button[type="button"],
section:has(output)>div>button[type="button"] {
    padding: 0.5em 1em;
    border: thin solid #1b1b1b;
    outline: none;
    color: #1b1b1b;
    background-color: #f8f8f850;
    font-size: .75rem;
    font-weight: 700;
    border-radius: .1em;
    box-shadow: 0 0 1em #f8f8f850;
    user-select: none;
    cursor: pointer;
    transition: all 150ms ease-out 0s;
}

dialog>form>button[type="button"]:hover,
section:has(output)>div>button[type="button"]:hover {
    background-color: #f8f8f8;
    box-shadow: 0 0 .25em 0 #1b1b1b50;
    transform: translate(-.01em, -.05em);
    transition: all 150ms ease-in 0s;
}

dialog>form>button[type="button"] {
    position: fixed;
    top: 13dvh;
    right: 14dvw;
    padding: .5em;
    border: 0;
    border-radius: 50%;
    color: var(--ashaam-text-color);
    background-color: transparent;
    box-shadow: none;
    width: 2em;
    height: 2em;
    font-size: 2rem;
    transition: all 100ms ease-out 0s;
}

dialog>form>button[type="button"]:hover {
    font-size: 2.35rem;
    background-color: transparent;
    box-shadow: none;
    transition: all 100ms ease-in 0s;
}

output {    
    padding: 1.25em 0.25em;
    font-size: 1.5rem;
    word-wrap: break-word;
    width: 100%;
}

dialog {
    margin: auto;
    padding: 1em 2em;
    border-radius: 1em;
    min-width: 75dvw;
    max-width: 100%;
    max-height: 75dvh;
    height: auto;
    aspect-ratio: 2/1;
    position: relative;
    box-shadow: 0 0 1em #11111190;
    border: thin solid #1a1a1a60;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

dialog::backdrop {
    opacity: .5;
    background-color: #1a1a1a50;
}

dialog::-webkit-scrollbar-track,
dialog::-webkit-scrollbar-button {
    outline: none;
}

dialog#newEventDialog form {
    position: relative;
    padding: .5em;
    width: 100%;
}

dialog fieldset {
    border: 0;
}

dialog legend {
    padding-bottom: 1em;
    user-select: none;
}

dialog h3 {
    font-size: 2rem;
    font-weight: 900;
    text-transform: capitalize;
}

dialog textarea {
    aspect-ratio: auto;
    min-height: 24dvh;
    resize: vertical;
    overflow-x: hidden;
    overflow-y: scroll;
    white-space: pre-wrap;
    scroll-snap-type: y mandatory;
}

textarea::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-button {
    outline: none;
}

dialog input,
dialog textarea {
    padding: .5em .75em;
    font-size: 1.35rem;
    font-family: "Courier New", Courier, monospace;
    font-weight: 500;
    color: var(--color-black);
    line-height: 2;
    width: 100%;
}

dialog input:-webkit-autofill,
dialog input:-webkit-autofill:hover, 
dialog input:-webkit-autofill:focus, 
dialog input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-black);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 0 0 var(--lightgray-color);
}

dialog details {
    max-width: 96%;
    font-size: 1.35rem;
    font-weight: 700;
    gap: .5em;
}

dialog details[open] summary {
    border: 0;
    margin: 0;
    user-select: none;
}

dialog details[open] label {
    padding: .25em 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .25em;
    cursor: pointer;
    max-width: 100%;
}

dialog details[open] label:has(input[type="radio"]) {
    padding: .85em 0 0;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

dialog details[open] input[type="radio"] {
    padding: .25em;
    width: 1.75em;
    height: 1.75em;
    cursor: pointer;
}

dialog input[type="date"] {
    cursor: default;
}

dialog input[type="date"]::after {
    cursor: pointer;
}

dialog input[type="file"] {
    cursor: pointer;
}