/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
img{vertical-align:middle}a{color:inherit}
/* End extract */


/******** GENERAL BASE STYLING ********/

:root{
   /* misc styling */
    --spacing: 15px;
    --border-radius: 15px;
    --underline: solid;

    /* calculations */
    --halfspacing: calc(var(--spacing) / 2);
    --doublespacing: calc(var(--spacing) * 2)   
}

[data-theme="dark"] {
    --border: solid, hsl(19, 100%, 35%), .1rem;
    --altborder: dashed, hsl(19, 100%, 35%), .1rem;
	  --color-bg: hsl(0, 58%, 4%);
    --color-bg-accent: #313131;
    --color-fg: hsl(19, 67%, 62%);
    --color-head: hsl(19, 100%, 44%);
    --color-accent: hsl(19, 100%, 44%);
    --color-hover: hsl(43, 100%, 61%);
    --toggle-img: url(/images/00_UI/tolight_button.png);
    --color-border: hsl(19, 100%, 35%);
}

[data-theme="light"] {
    --border: solid, hsl(19, 100%, 35%), .1rem;
    --altborder: dashed, hsl(19, 100%, 35%), .1rem;
	  --color-bg: #fff7d9;
    --color-bg-accent: #faf8f4;
    --color-fg: hsl(19, 100%, 17%);
    --color-head: #26150c;
    --color-accent: hsl(19, 100%, 37%);
    --color-hover: #f4cf2a;
    --toggle-img: url(/images/00_UI/todark_button.png);
    --color-border: hsl(19, 100%, 35%);
}


/******** TEXT + CONTENT STYLING ********/

body {
  position: relative;
  margin: 0 auto;
}

a:link {
  color: var(--color-accent)}
a:hover {
  color:var(--color-hover)} 
a:visited {
  color: var(--color-accent)}

.almendra-display-regular {
  font-family: "Almendra Display", serif;
  font-weight: 400;
  font-style: normal;
}

html,body {
  font-family: "inconsolata", sans-serif;
  background-image: url(/hndrhalloween/images/100line_hal_webbg.jpg);
  image-rendering: pixelated;
  background-color: #26150c;
  background-attachment: fixed;
  width: 100%;
	color: var(--color-fg);
  font-size: 1rem;
  padding-top: 1rem;
	}

ul {
  padding-left: var(--doublespacing);
  padding-right: var(--doublespacing);
  padding-top: var(--halfspacing);
  padding-bottom: var(--halfspacing);
}

ul li {
  padding-top: .5rem;
  }

h1,h2,h3,h4,h5,h6 {
	font-family: "Courier Prime", serif;
  color: var(--color-head);
  margin-top: 10px;
  margin-bottom: 10px}
h1 {
	font-size: 85px;
	line-height: 80%;	}
h2 {
	font-family: "Balthazar", serif;
  font-size: 65px;
  color: rgb(255, 197, 143);
	line-height: 80%;	}
h3 {
	font-family: "Balthazar", serif;
  font-size: 48px;	
  color: rgb(255, 197, 143)}
h4 {
  font-size: 30px;	
  color: rgb(255, 197, 143)}
h5 {
	font-size: 24px;	}
h6 {
	font-size: 18px;	}

.content {
  margin-top: 70px;
  margin-bottom: 30px;
  margin-right: 10%;
  margin-left: 10%;
}

.center {
  display: flex;
  flex-flow: column wrap;
  text-align: center;
	margin-left: 20%;
	margin-right: 20%;
}


/******** BUTTONS ********/

.displaytoggle {
  padding: 1px;
  position: absolute;
  top: 1%;
  right: 1%;
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  size: .8rem;
  image-rendering: pixelated;
  text-align:center;
}

.randompromt {
  padding: 6px;
  text-align: center;
  background-color: var(--color-cbg);
  color: var(--color-fg);
  border: var(--border);
  border-radius: 5px;
}


/******** BOXES + CONTAINERS ********/

.topbanner {
  width: 100%;
  display: block;
  position: static;
  top: 0px;
  overflow: hidden;
}

.topbanner img{
  width: 100%;
  image-rendering: pixelated;
}

.bottombanner {
  width: 100%;
  display: block;
  position: static;
  bottom: 0px;
  overflow: hidden;
}

.bottombanner img{
  width: 100%;
  image-rendering: pixelated;
}

.rowcontainer {
  display: flex;
  justify-content: center;
}

.eventmascots {
  display: block;
  align-content: center;
  padding: var(--spacing) auto;
}

.eventmascots img {
  max-width: 450px;
}

.bigbox{
  display: flex;
  flex-flow: column wrap;
  gap: var(--halfspacing) var(--spacing);
  margin: var(--spacing) auto;
  max-height: 90%;
  width: 64%;
  max-width: 800px;
  padding: 1.5rem;
  background-color: var(--color-bg);
  break-inside:avoid;
  border: var(--border);
  border-radius: 15px;
}

.promptbox{
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  gap: var(--halfspacing) var(--spacing);
  margin: var(--spacing) auto;
  height:fit-content;
  width: 450px;
  max-width: 80%;
  padding: 1.5rem;
  background-color: var(--color-bg);
  break-inside:avoid;
  border-radius: 15px;
  border: var(--altborder);  
}


/******** ADJUSTING FOR MOBILE ********/

  @media screen and (max-width: 767px) {
    .content {margin-top: 15px;
      margin-bottom: 10px;}
    html,body {padding-top:1rem}
    .bigbox {width: 95%}
    .content {margin-right:5%;
      margin-left:5%}
    h1 {font-size: 48pt;}
    .body {width: 100%}
    .flex {display: block;
	    margin-left: 5%;
	    margin-right: 5%;}
    .center {display: block;
	    margin-left: 5%;
      margin-right: 5%;} 
    .topbanner img {width: 1200px;}
    .bottombanner img {width: 1200px;}
    h2 {font-size: 55px;}
    h4 {font-size: 25px;}
  }

    @media screen and (max-width: 1050px) {
    .rowcontainer {flex-flow: row wrap;}
  }