/* 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: 75, 56, 92;
--text: 225, 205, 235;
--link: 145, 113, 168;
--border: 66, 32, 92;
--gold: 221, 171, 46;
--highlight: 250, 226, 138;
}

/* GENERAL */
body { background: rgba(var(--background)) url('/img/bg.png') fixed repeat; color: rgba(var(--text)); font-family: 'Crimson Pro', 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.5; 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(--gold), 0.75), transparent); }

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

/* HEADINGS */
h1, h2, h3, h4, h5, h6 { background: rgba(var(--gold)); background: linear-gradient(to bottom, rgba(var(--gold)) 55%, rgba(var(--highlight)) 60%, rgba(var(--gold)) 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Applies the gold gradient to all headings. */
h1 { font-family: 'Mea Culpa', 'Playfair Display', Times New Roman, serif; font-size: 10vw; margin: 0 0 0.625rem 0; } /* Controls font style of site title text */
h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Times New Roman, serif; font-weight: 700; font-style: italic; } /* Controls font style of all other headings */
h2 { font-size: 1.4em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

/* 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; }
li::marker { color: rgba(var(--gold)); } /* Colour of the list markers */

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

button { background-image: linear-gradient(to bottom, rgba(var(--gold)) 25%, rgba(var(--highlight)) 50%, rgba(var(--gold)) 75%); border: 0; color: rgba(var(--background)); font-family: 'Playfair Display', Times New Roman, serif; font-size: 0.9em; font-style: italic; font-weight: 700; padding: 0 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 { margin: 0 auto; max-width: 1366px /* Change this to widen or narrow the base width of the layout */; }
.border { border: 35px solid transparent; border-image: url('/img/border.png') 35 round; }
.wrapper { background-color: rgba(var(--background)); display: flex; flex: 1 1 auto; flex-direction: row; text-align: left; }
.content { flex: 1 1 auto; padding: 0 1.875rem; }
.sidebar { font-size: 0.8em; flex: 0 0 25%; max-width: 300px /* Change this to widen or narrow the base width of the sidebar */; }

/* HEADER */
header #menu { border: 35px solid transparent; border-image: url('/img/border.png') 35 round; position: relative; z-index: 1; margin: 0 0 0.625rem 0; }
header #menu ul { background-color: rgba(var(--background)); color: rgba(var(--gold)); display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 0.9em; text-transform: uppercase; overflow: hidden; margin: -23px 0; width: 100%; }
header #menu li { list-style: none; text-align: center; }

/* Change these values depending on the number of links in your menu (yes, this means you will have to do some maths, sorry!) */
header #menu li { flex-basis: 16.6666666667%; }
@media (max-width: 1024px) { header #menu li { flex-basis: 33.3333333333%; }}
@media (max-width: 600px) { header #menu li { flex-basis: 50%; }}

header #menu li a, header #menu .subnav .btn { color: rgba(var(--gold)); display: inline-block; font-weight: 700; padding: 0.75rem 1rem; text-align: center; text-decoration: none; transition: all 0.3s linear; }
header #menu li a:hover, header #menu .subnav .btn:hover { color: rgba(var(--link)); transform: translate(1px, 1px); transition: all 0.3s linear; }
header #menu .subnav { overflow: hidden; }
header #menu .subnav .btn { text-shadow: 1px 1px 0 rgba(var(--black)); }
header #menu .subnav:hover .btn { cursor: zoom-in; }
header #menu .subnav .i { font-size: 0.5em; vertical-align: middle; }
header #menu .subnav:hover .subnav-content { visibility: visible; opacity: 1; pointer-events: auto; transition: all 0.3s linear; }
header #menu .subnav .subnav-content { background-color: rgba(var(--background), 0.9); display: flex; flex-wrap: wrap; justify-content: center; position: absolute; left: 0; visibility: hidden; opacity: 0; font-size: 0.9em; text-transform: initial; pointer-events: none; transition: all 0.3s linear; width: 100%; z-index: 1; }
header #menu .subnav .subnav-content a { color: rgba(var(--link)); padding: 0.8rem 1.5rem; transform: translate(0); transition: all 0.3s linear; }
header #menu .subnav .subnav-content a:hover { color: rgba(var(--gold)); transition: all 0.3s linear; }

/* SIDEBAR - Left */
.sidebar { border-right: 2px solid rgba(var(--border)); margin: -23px 0; padding: 23px 35px 23px 0; order: -1; }
@media (max-width: 1024px) { .sidebar { margin: 0 0 -23px -23px; border: 0; padding: 23px; order: 0;  } }

/* Prefer the sidebar on the right of the layout? Remove the two lines of code above and "uncomment" this section by removing the last */
/* SIDEBAR - Right
.sidebar { border-left: 2px solid rgba(var(--border)); margin: -23px 0; padding: 23px 0 23px 35px; order: 0; }
@media (max-width: 1024px) { .sidebar { margin: 0 -23px -23px 0; border: 0; padding: 23px;  } } */

/* FOOTER */
footer { color: rgba(var(--text), 0.8); font-size: 0.6em; letter-spacing: 1px; margin: 1.25rem 0 0 0; text-align: center; text-transform: uppercase; }

/* RESPONSIVITY */
@media (max-width: 1024px) {
.wrapper { flex-wrap: wrap; justify-content: space-between; gap: 0; }
.content { flex-basis: 100%; border-bottom: 2px solid rgba(var(--border)); margin: 0 -23px; padding: 0 23px; }
.sidebar { flex-basis: 50%; max-width: 512px; }
}
@media (max-width: 500px) {
.wrapper { flex-direction: column; flex-wrap: nowrap; }
.sidebar { flex-basis: 100%; max-width: 100%; }
}
 /* Star - https://www.cursors-4u.com/cursor/sym20 */
* {
  cursor: url('https://sei.beauty/img/sym20.cur'), auto !important;
}
/* End www.Cursors-4U.com Code */