@font-face {
    font-family: "Handwritten";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url("/fonts/Handwritten.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-weight: 400 800;
    font-style: normal;
    src: url("/fonts/EBGaramond.woff2") format("woff2 supports variations"),
         url("/fonts/EBGaramond.woff2") format("woff2-variations");
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ECE0BC;
}

#container {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: top;
    flex-direction: column;
    align-items: center;
    position: relative;
}

#welcome {
    text-align: center;
}

#top-bar, #foot {
    background-image: url("/img/header-texture2.jpg");
    background-size: 100%;
    color: #ece0bc;
}

#top-bar {
    position: sticky;
    top: 0;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 0 0 20px 20px;
    text-shadow: 
    0px -2px 2px rgba(0, 0, 0, 0.7),
    0px 2px 2px rgba(255, 255, 255, 0.3);
    font-family: "Handwritten", cursive, serif;
    font-size: 20pt;
    font-weight: bold;
    z-index: 1;
}

h1, h2 {
    margin: 0 0 0 10px;
    font-family: "Handwritten", cursive, serif;
    letter-spacing: -6%;
    word-spacing: 2px;
}

#logotype {
    height: 120%;
}

#logotype img {
    height: 100%;
    opacity: 0.8;
    margin: 0 0 0 20px;
}

#main-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 20pt;
}

#main-menu li {
    display: inline-block;
    padding: 0 20px;
}

a, a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    animation: efektRGB 6s linear infinite;
}

#main-menu a, #main-menu a:visited {
    display: inline-block;
    transition: transform 0.3s ease;
}

#main-menu a:hover {
    transform: translate(0, -4px);
}

.menu-toggle {
    display: none;
}

@keyframes efektRGB {
    0%   { color: #ff0000; text-shadow: 0 0 8px #ff0000b3; }
    17%  { color: #ff00ff; text-shadow: 0 0 8px #ff00ffb3; }
    33%  { color: #0000ff; text-shadow: 0 0 8px #0000ffb3; }
    50%  { color: #00ffff; text-shadow: 0 0 8px #00ffffb3; }
    66%  { color: #00ff00; text-shadow: 0 0 8px #00ff00b3; }
    83%  { color: #ffff00; text-shadow: 0 0 8px #ffff00b3; }
    100% { color: #ff0000; text-shadow: 0 0 8px #ff0000b3; }
}

#page-contents, #top-bar {
    width: 91.6%;
    max-width: 1100px;
}

#page-contents {
    padding: 30px;
    margin-top: 10px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #d3c69e;
    font-family: "EB Garamond", serif;
    font-size: 14pt;
    color: #2b190f;
    margin-bottom: 30px;
}

.flex-container {
    display: flex;
}

#main-text {
    width: 100%;
    max-width: 750px;
}

#sidebar {
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-text h3 {
    font-size: 19pt;
}

#main-text p {
    font-size: 16pt;
    text-align: justify;
}

#foot {
    width: 100%;
    padding: 10px;
    margin-top: auto;
    text-align: center;
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    font-size: 12pt;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Handwritten", cursive, serif;
    font-weight: bold;
    line-height: 150%;
}

#page-contents hr {
    border: none;
    border-top: 1px solid #542309;
    color: #542309;
    height: 0;
    width: 70%;
    overflow: visible;
    text-align: center;
    background-color: inherit;
}

#page-contents hr::after {
    content: "❖ ❖ ❖";
    display: inline-block;
    position: relative;
    top: -0.7em;
    background-color: inherit;
    padding: 0 10px;
}

body {
    display: flex;
    flex-direction: column;
}