:root {
    --primary: #569700;
    --secondary: hsl(86, 100%, 71%);
    --warm: #d45500;
    --darkest: #3f2e2e;
    --dark: #725f5f;
    --mid: #777676;
    --light: #fff6e8;
    --ultralight: #fffefd;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    color: var(--darkest);
    background: var(--ultralight);
    font-family: 'Sahel', sans-serif;
    direction: rtl;
}

button {
    all: unset;
}

button,
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--secondary);
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    cursor: pointer;
}

button:hover,
button:focus,
a:hover,
a:hover * {
    color: var(--dark);
}

@-webkit-keyframes glow {
    from {
        text-decoration-color: var(--secondary);
    }

    to {
        text-decoration-color: var(--primary);
    }
}

header {
    padding: 2vh 5vw 2vh 5vw;
    border-bottom: solid .01em var(--light);
}

header nav ul {
    text-decoration: none;
    list-style: none;
    font-weight: 900;
}

header nav ul li {
    display: inline-block;
    margin: 0.3em;
}

.flush-left {
    float: left;
    direction: ltr;
    text-align: left;
}

article {
    margin: 10vh 5vw 1vh 5vw;
}

article .heading {
    display: none;
}

article h2 {
    color: var(--warm);
    font-weight: 900;
    font-size: 1.3em;
}

article {
    padding: 5vw;
}

article {
    font-size: 1.4em;
    font-weight: 700;
}

#map {
    direction: ltr;
    text-align: center;
    margin-bottom: 4em;
    max-width: 90vw;
    max-height: 80vw;
    overflow: auto;
}

article>.letter>p {
    text-indent: 2em;
    word-spacing: .3em;
    line-height: 2em;
    text-align: justify;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.opening img {
    margin-right: 2em;
    width: 2em;
}

.closing {
    text-align: left;
    margin-top: 3em;
    margin-bottom: 1em;
}

.closing .name,
.closing time {
    display: block;
}

.logo {
    padding-left: 1em;
    width: 6vh;
}

.profile-pic {
    width: 7vw;
    height: 7vw;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.profile-pic img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

address {
    display: block;
    font-weight: 900;
    background-color: var(--darkest);
    color: var(--ultralight);
}

address ul {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
    padding: 3em;
}

address ul li {
    display: inline-block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    font-style: normal;
}

footer {
    text-align: center;
    background-color: var(--darkest);
    color: #fff6e8;
    font-size: .7em;
    padding-bottom: 10vh;
}


/* ===== Scrollbar ===== */

* {
    scrollbar-width: auto;
    scrollbar-color: #569700 #ffffff;
}

*::-webkit-scrollbar {
    width: 7px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #569700;
    border-radius: 20px;
    border: 2px solid #ffffff;
}

/* ===== Animations ===== */

*,
a,
button,
input,
textarea,
select {
    -webkit-transition: display 1s, filter 1s, width 1s, height 1s, background 1s, color 1s, font 1s, box-shadow 2s, -webkit-transform 1s, opacity 2s, border 1s;
    transition: display 1s, filter 1s, width 1s, height 1s, background 1s, color 1s, font 1s, box-shadow 2s, transform 1s, opacity 2s, border 1s;
}

/* ===== Tooltips ===== */

a[title]:hover::after {
    margin-right: .3em;
    padding-right: .3em;
    padding-left: .3em;
    content: attr(title);
    font-size: .7em;
    background-color: var(--darkest);
    color: var(--ultralight);
    animation: accordion 1s forwards;
    border-radius: .5em;
}

a[title]:hover::before {
    margin-left: .1em;
    display: inline-block;
    content: " ";
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--dark) transparent transparent;
}

@-webkit-keyframes accordion {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Bionic ===== */

.b {
    color: var(--mid);
}

.bb {
    color: var(--darkest);
}