/* 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 */
:root {
--black: 0, 0, 0;
--white: 255, 255, 255;
--kraft: 184, 172, 156;
--ruler1: 153, 144, 138;
--ruler2: 194, 188, 180;
--sticky: 255, 255, 204;
--padborder: 181, 181, 181;
--padline: 223, 232, 236;
--padmargin: 248, 211, 211;
--pink: 255, 119, 228;
--yellow: 252, 248, 63;
}

/* GENERAL */
body { background: rgba(var(--kraft)); background-image: url('endgr.jpg'), url('endgr.jpg'); background-position: left top, left top; background-repeat: no-repeat, no-repeat; background-attachment: scroll, fixed; background-size: 100% auto, auto; color: rgba(var(--black), 0.8); font-family: 'Mynerve', Comic Sans, cursive; font-size: calc(15px + 0.390625vw) /* This value allows for fluid text. You can set a different base value (15px) or adjust the "zoom" with the vw value. If you change the font/font size, you may need to adjust line-height or the .pad lines to match them up */; font-weight: 400; line-height: 1.3; margin: 0; padding: 0; text-align: center; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
p { padding: 0 0 1.85rem 0; }
hr { border: 0; border-bottom: 2px dotted rgba(var(--black), 0.7); }

/* LINKS */
a { background: transparent; background-image: linear-gradient(to right, rgba(var(--pink), 0.1), rgba(var(--pink), 0.7) 4%, rgba(var(--pink), 0.3)); color: rgba(var(--black)); border-radius: 0.8em 0.3em; font-weight: 800; margin: 0 -0.4em; padding: 0.1em 0.4em; position: relative; text-decoration: none; transition: all 0.3s linear; z-index: 1; }
a:hover { background: transparent; background-image: linear-gradient(to right, rgba(var(--yellow), 0.1), rgba(var(--yellow), 0.7) 4%, rgba(var(--yellow), 0.3)); transition: all 0.3s linear; }

/* HEADINGS */
h1 { color: rgba(var(--black), 0.7); font-family: 'Permanent Marker', Comic Sans, cursive; font-size: 7vw; line-height: 1em; margin: 0 0 1.25rem 0; text-transform: uppercase; } /* Controls font style of site title text, you will have to play around with these settings depending on the length of your site title. */
h2, h3, h4, h5, h6 { font-family: 'Permanent Marker', Comic Sans, cursive; font-weight: 400; } /* 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.2em 0; padding-left: 20px; }
ul li ul { margin-bottom: 0; }

/* FORMS */
input, textarea, select { background-color: rgba(var(--white)); border: 1px solid rgba(var(--padline)); color: rgba(var(--black), 0.8); font-family: 'Mynerve', Comic Sans, cursive; font-size: 1em; padding: 0.625rem; }
input:focus, textarea:focus, select:focus { border-color: rgba(var(--padmargin)); }

button { display: inline-block; background: rgba(var(--pink)); border: 3px solid rgba(var(--white)); border-radius: 30px; box-shadow: 3px 3px 5px rgba(var(--black), 0.2); color: rgba(var(--black)); font-family: 'Permanent Marker', Comic Sans, cursive; font-size: 1em; font-weight: 400; outline: 1px solid rgba(var(--padline)); padding: 0.25rem 1rem; transition: all 0.3s linear; transform: rotate(-0.5deg); }
button:hover { cursor: pointer; transform: translate(1px, 1px); transition: all 0.3s linear; }

/* STRUCTURE */
.container { margin: 0 auto; max-width: 1920px; }
.wrapper { display: flex; flex: 1 1 auto; flex-direction: row; text-align: left; padding: 0 2vw; }
.content { flex: 1 1 auto; padding: 0 1.875rem; }
.sidebar { flex: 0 0 25%; max-width: 380px; }
.left { order: -1; }
@media (max-width: 1024px) {
.wrapper { flex-wrap: wrap; justify-content: space-between; }
.content { flex-basis: 100%; padding: 0!important; }
.sidebar { flex-basis: calc(50% - 0.625rem); max-width: 512px; }
.left { order: 0; }
}
@media (max-width: 500px) {
.wrapper { flex-direction: column; flex-wrap: nowrap; }
.sidebar { flex-basis: 100%; max-width: 100%; }
}

/* HEADER */
header { margin-top: 5vw /* Adjust this value if your site title appears to sit strangely */; }

header #menu { margin: 4vh 2vw 0 2vw; padding: 0; }
header #menu ul { background: url('pica.png') repeat-x, linear-gradient(90deg, rgba(var(--ruler1)) 7%, rgba(var(--ruler2)) 39%, rgba(var(--ruler1)) 82%); box-shadow: 5px 5px 7px rgba(var(--black), 0.4); display: flex; flex-wrap: wrap; justify-content: center; font-family: 'Permanent Marker', Comic Sans, cursive; overflow: hidden; transition: all 0.3s ease; 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 { background: none; color: rgba(var(--black), 0.7); display: inline-block; font-weight: 400; padding: 1.25rem 1rem; text-align: center; transition: all 0.3s linear; }
header #menu li a:hover { transform: translate(1px, 1px); transition: all 0.3s linear; }


/* NOTEPAD & STICKY NOTES 
You may need to play around with some of the values in this section if you change the font or text size */
.item { margin-bottom: 1.875rem; }
.note { background-color: rgba(var(--sticky)); box-shadow: 5px 5px 7px rgba(var(--black), 0.4);  display: block; padding: 1rem 1.25rem; }
.pad { background: rgba(var(--white)); background: linear-gradient(to top, rgba(var(--padline)) 0%, rgba(var(--white)) 8%) 0 57px; background-size: 100% 30px; border: 1px solid rgba(var(--padborder)); box-shadow: 5px 5px 7px rgba(var(--black), 0.4); padding: 27px 55px 27px; position: relative; }
.pad::before { background-color: rgba(var(--white)); border: 1px solid rgba(var(--padborder));  bottom: -3px; content: ""; height: 15px; left: 0; margin: 0 1px; position: absolute; width: auto; z-index: -1; }
.pad::after { border-left: 1px solid rgba(var(--padmargin)); bottom: 0; content: ""; position: absolute; left: 39px; top: 0; width: 0; }

/* FOOTER */
footer { font-family: 'Permanent Marker', Comic Sans, cursive; font-size: 0.6em; letter-spacing: 1px; margin: 1.25rem 0; text-align: center; text-transform: uppercase; }