@media (prefers-color-scheme: dark) {
    body {
        --background-color: #323232;
        --forground-color: #e5e1de;
        --link-color: rgb(49, 133, 211);
    }
}
@media (prefers-color-scheme: light) {
    body {
        --background-color: #f4f2f1;
        --forground-color: #251404;
        --link-color: rgb(46, 119, 255);
    }
    .invert-image {
        filter: invert(1)
    }

}
a {
    color: var(--link-color)
}
body {
    background: var(--background-color);
    color: var(--forground-color);
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: sans-serif;
    line-height: 1.56;
    min-height: 100vh; 
    
    /* background-image: url("/assets/images/kuwait-flag-classic.svg"), url("/assets/images/kuwait-flag-modern.svg");
    background-repeat: no-repeat,no-repeat;
    background-position-x: 60px, calc(100vw - 60px - 35px);
    background-size: 35px; */
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 1em 0;
}
main > div {
    padding: 1em;
    max-width: 600px;
    direction: rtl;
    opacity: 0.8;

}
main > div > div {
    margin-bottom: 3em
}
footer {
    flex-grow: 0;
    min-height: 3em;
    background-color: #0003;
    display: flex;
    justify-content: center;
    opacity: 0.67;
}
footer > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em;
    max-width: 660px;
}

p {
    margin: 0;
    margin-bottom: 0.5em;
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/vendors/material-design-icons/4.0.0/font/MaterialIconsRound-Regular.otf') format('woff2');
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}
.material-symbols-rounded.error {
    color:rgb(255, 65, 65)
}

.record-log {
    display: block;
    opacity: 0.7;
    font-size: 8pt;
    height: 10em;
    overflow: auto;
}
.record-log > div {
    display: flex;
    gap: 1em;
    padding: 1em;
    align-items: center;
    border-bottom: 1px dashed color-mix(in srgb, var(--background-color) 80%, transparent);;
}

.record-log > div:target {
    color: var(--background-color);
    background-color: var(var(--forground-color));
}
details > summary { list-style: none; cursor: pointer;}