:root {
    --header-image: url('/img/photo/kyrgyzstan1920x1080.jpg');
    --body-bg-image: url('/img/photo/gothicwalltileable.jpg');
    /*main colors*/
    --grey-lightest: #f5f0dc;
    --grey-light:    #e8d89a;
    --grey-mid:      #c9a84c;
    --grey-dark:     #7a5c1e;
    --grey-darkest:  #1a1508;
    /*accent color*/
    --accent:        #f0d060;
    --accent-glow:   #c9a84c;
}
/*---RESET & BODY---*/
* {
    box-sizing: border-box;
}
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: #1a1205;
    background-image: var(--body-bg-image);
    background-size: 65px;
    color: #f0e6c0;
}
/*---CONTAINER---*/
#container {
    max-width: 1400px;
    margin: 0 auto;
}
/*links inside container -except nav*/
#container a {
    color: #7a5c1e;
    font-weight: bold;
}
/*---TOP BAR---*/
#topBar {
    width: 100%;
    height: 55px;
    padding: 10px;
    font-size: smaller;
    background-color: #0e0b02;
}
/*---HEADER---*/
#header {
    width: 100%;
    background-color: #1a1508;
    height: 150px;
    background-image: var(--header-image);
    background-size: 100%;
}
/*---NAVBAR---*/
#navbar {
    height: 55px;
    background-color: #0e0b02;
    width: 100%;
    border-top: 1px solid #c9a84c;
    border-bottom: 1px solid #c9a84c;
}
#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}
/*---FLEX + SIDEBARS + MAIN---*/
#flex {
    display: flex;
}
aside {
    background-color: #2a1f08;
    border-right: 1px solid #c9a84c;
    width: 200px;
    padding: 20px;
    font-size: smaller;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#leftSidebar  { order: 1; }
#rightSidebar { order: 3; }
main {
    background-color: var(--grey-darkest);
    flex: 1;
    padding: 20px;
    order: 2;
}
/*---FOOTER---*/
footer {
    background-color: #0e0b02;
    border-top: 1px solid #c9a84c;
    width: 100%;
    height: 40px;
    padding: 10px;
    text-align: center;
    color: #c9a84c;
}
/*---TYPOGRAPHY---*/
h1 {
    color: #f0d060;
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    letter-spacing: 2px;
    text-shadow:
        0 0 6px  #c9a84c,
        0 0 14px #c9a84c,
        0 0 30px #a07830,
        0 0 60px #7a5c1e;
    animation: flicker 3s ease-in-out infinite;
}
@keyframes flicker {
    0%, 100% {
        text-shadow:
            0 0 6px  #c9a84c,
            0 0 14px #c9a84c,
            0 0 30px #a07830;
    }
    50% {
        text-shadow:
            0 0 12px #f5e070,
            0 0 28px #f0d060,
            0 0 60px #c9a84c,
            0 0 100px #a07830;
    }
}
h2 {
    color: var(--grey-light);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
}
h3 {
    color: #c9a84c;
}
strong {
    color: #f0d060;
}
/*to center text*/
.center {
    text-align: center;
}
/*---NORMAL-BOXES---*/
.box {
    background-color: #0e0b02;
    border: 1px solid #c9a84c;
    padding: 10px;
}
.box p {
    color: #e8d89a;
}
/*---BUTTON WITH IMAGE---*/
.button {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #c9a84c;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.button img {
    display: block;
    width: 100%;
    height: auto;
}
.button:hover {
    border-color: #f0d060;
    box-shadow: 0 0 8px #c9a84c, 0 0 20px #a07830;
}