/* RESET - Sets the page to appear consistently across browsers */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a, button { cursor: revert; }
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { border: 0; font-size: 100%; font: inherit; margin: 0; padding: 0; vertical-align: baseline; }
img { max-width: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { white-space: revert; }
:focus { outline: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* COLOURS - Uses rgb so that opacity can be used */
:root {
--black: 0, 0, 0;
--white: 255, 255, 255;
--background: 11, 22, 18;
--text: 129, 151, 108;
--link: 160, 159, 66;
--hover: 224, 217, 136;
--headings: 31, 97, 66;
}

/* GENERAL */
body { background: rgba(var(--background)) url('bg.jpg') fixed no-repeat; background-size: cover; color: rgba(var(--text)); font-family: 'Poltawski Nowy', Times New Roman, serif; font-size: calc(18px + 0.390625vw) /* This value allows for fluid text. You can set a different base value (18px) or adjust the "zoom" with the vw value */; font-weight: 400; line-height: 1.8; margin: 4vh 2vw; padding: 0; text-align: center; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
p { padding: 0 0 1.25rem 0; }
hr { border: 0; height: 1px; background-image: linear-gradient(to right, transparent, rgba(var(--link), 0.75), transparent); }

/* LINKS */
a { color: rgba(var(--link)); font-weight: 600; text-decoration: underline 1px solid; transition: all 0.3s linear; }
a:hover { color: rgba(var(--hover)); transition: all 0.3s linear; }

/* HEADINGS */
h1 { font-family: 'UnifrakturMaguntia', 'Poltawski Nowy', Times New Roman, serif; font-size: 6vw; font-weight: 400; line-height: 1.3em;  text-shadow: 1px 1px 0 rgba(var(--background)), 1px -1px 0 rgba(var(--background)), -1px 1px 0 rgba(var(--background)), -1px -1px 0 rgba(var(--background)), 0 0 5px rgba(var(--hover)); } /* Controls font style of site title text */
h2, h3, h4, h5, h6 { font-family: 'Poltawski Nowy', Times New Roman, serif; font-style: italic; font-weight: 600; line-height: 1.2em; } /* Controls font style of all other headings */
h2 { font-size: 1.6em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.2em; }

/* LISTS */
ul, ol { list-style-position: inside; margin: 0 0 1.25em 0; padding: 0 0 0 1.25rem; }
ul li ul { margin-bottom: 0; }

/* FORMS */
input, textarea, select { background-color: rgba(var(--background)); border: 1px solid rgba(var(--hover)); color: rgba(var(--text)); font-family: 'Poltawski Nowy', Times New Roman, serif; font-size: 0.8em; padding: 0.625rem; }
input:focus, textarea:focus, select:focus { border-color: rgba(var(--link)); }

button { background-color: rgba(var(--link)); border: 0; color: rgba(var(--background)); font-family: 'UnifrakturMaguntia', 'Poltawski Nowy', Times New Roman, serif; font-size: 0.9em; font-weight: 400; line-height: 1em; padding: 0.625rem 0.625rem 0.25rem 0.625rem; transition: all 0.3s linear; }
button:hover { cursor: pointer; transform: translate(1px, 1px); transition: all 0.3s linear; }

/* STRUCTURE */
.container { background-color: rgba(var(--background), 0.8); display: flex; flex: 1 1 auto; margin: 0 auto; max-height: calc(-8vh + 100dvh); max-width: 1920px /* Change this to widen or narrow the base width of the layout */; text-align: left; }
.content { flex: 1 1 auto; padding: 0.625rem 1.875rem; text-shadow: 1px 1px 0 rgba(var(--background)); }
.sidebar { flex: 0 0 25%; padding: 0.625rem 1.875rem; }
.left { order: -1; max-width: 250px /* Change this to widen or narrow the base width of the menu */; }
.right { font-size: 0.8em; max-width: 350px /* Change this to widen or narrow the base width of the sidebar */; }
.content, .sidebar { overflow-x: hidden; overflow-y: auto; scrollbar-color: rgba(var(--text)) transparent; scrollbar-width: thin; }
.content::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background-color: rgba(var(--text)); }

/* HEADER */
header { text-align: center; }

/* MENU */
#menu { font-size: 0.9em; }
#menu ul { list-style: none; margin: 0 0 0.625rem 0; padding: 0; }
#menu a { text-decoration: none; }

/* RESPONSIVITY */
@media (max-width: 960px) { h1 { font-size: 8vw; }
.container { flex-direction: column; }
.left { max-height: 80px; max-width: 100%; }
#menu { column-count: 4 /* Change this according to the length of your link titles (longer link titles, fewer columns) */; }
#menu ul { margin: 0; }
.submenu { display: none; } 
.right { max-height: 150px; max-width: 100%; } }