:root {
   --header-image: url("/assets/images/subfolder/blobz.gif");
   --body-bg-image: url("/assets/images/vgrid.jpg");
   --mouse-default: url("/assets/cursors/rotten-custom-default.gif");
   --mouse-link-select: url("/assets/cursors/rotten-custom-link.gif");
   --mouse-pointer: url("/assets/cursors/rotten-custom-pointer.gif");
   --text-default-color:#ffffff;
   --text-select-color:#3535a3;
   --text-select-bg:#ffe550;
   --bg-default:#111140;
   --bg-main:#3535a3;
   --bg-aside:#1f1f6f;
   --bg-box:#111140;
   --bg-collapsible:#1f1f6f;
   --accent-color-1:#ED64F5;
   --accent-color-2:#fa9cff;
   --accent-color-3:#111140;
   --accent-color-4:#3535a3;
   --accent-color-5:#ffe550;
}

/* ------ FONT FORMATTING ------ */
html {
   font-size: 18px;
   /* sets the root font size */
}

* a {
   color: var(--accent-color-1);
}

* a:hover {
   cursor: var(--mouse-link-select), auto;
   color: var(--accent-color-5);
   text-decoration: underline;
}

* button:hover {
   cursor: var(--mouse-pointer), auto;
}

html, html * {
   cursor: none !important;
}

#custom-cursor {
   position: fixed;
   left: 0;
   top: 0;
   width: 32px;
   pointer-events: none;
   z-index: 999999;
   transform: translate(-2px, -2px);
}


@font-face {
   font-family: shpinscher;
   src: url("./fonts/shpinscher.woff2") format("woff2"),
      url("https://tunnel-vision.neocities.org/fonts/shpinscher.woff2") format("woff2");
   font-display: block;
}

@font-face {
   font-family: emojifont;
   src: url("./fonts/emojifont.woff2") format("woff2"),
      url("https://tunnel-vision.neocities.org/fonts/emojifont.woff2") format("woff2");
   font-display: block;
}

h1, h2, h3, strong {
   color: var(--accent-color-1);
}

h1 {
   font-size: 1.75rem;
   /* rem unit is relative to the font size of the root html element <html> */
   /* 2.5 * 16 = 40px */
}

h2 {
   font-size: 1.5rem;
   /* 1.875 * 16 = 30px */
}

h3 {
   font-size: 1.25rem;
   /* 1 * 16 = 16px */
}

strong {
   font-size: 1.05rem;  
   text-decoration: underline;
}

em {
   color: var(--accent-color-2);
   font-style: normal;
   text-decoration: none;
   font-size: 1.05rem;
}

hr {
   border: none;
   line-height: 2rem;
}

hr::before {
   content: "MCDYRWQRDFuOSEDQWNIMGD";
   font-family: emojifont;
   font-size: 1.5rem;
   color: var(--accent-color-3);
   display: block;
   text-align: center;
   margin-top: 1em;
}



/* CSS for custom text selection colors */
::-moz-selection {
   /* Code for Firefox */
   color: var(--text-select-color);
   background: var(--text-select-bg);
}

::selection {
   color: var(--text-select-color);
   background: var(--text-select-bg);
}



/* ------ CUSTOM BULLET POINTS FOR UL LISTS ------ */
ul {
   list-style: none;
   /* removes default bullet points */
   padding-left: 1rem;
   margin: 0;
}

ul li {
   position: relative;
   padding-left: 1.25em;
   /* font size of the list item */
}

/* custom bullet point styling and formatting */
ul li::before {
   content: "W";
   /* how the character is encoded in the emojifont character sheet */
   font-family: emojifont;
   font-size: 1em;
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-0.45em);
}

ol {
   list-style-position: outside;
   padding-left: 0.5rem;
   margin: 1rem;
}



/* ------ BACK TO TOP BUTTON FORMATTING ------ */
#topbtn {
   display: none;
   width: fit-content;
   height: fit-content;
   position: fixed;
   bottom: 2.5vh;
   right: 2.5vh;
   z-index: 99;
   border: none;
   outline: none;
   background-color: var(--accent-color-3);
   color: var(--accent-color-1);
   cursor: pointer; /* adds mouse pointer on hover */
   padding: 5px;
   border-radius: 0px; /* corner rounding */
   font-family: shpinscher;
   font-size: 1rem;
}

#topbtn .box:hover {
   background-color: var(--accent-color-4);
}

#topbtn .box {
   border: 1px solid var(--accent-color-1);
   border-radius: 0px;
   padding: 7.5px;
}



/* ------ COLLAPSIBLE BUTTON FORMATTING ------ */
/* --- OVERALL FORMATTING --- */
.proof, 
.section {
   font-family: inherit;
   color: var(--text-default-color);
   font-size: 1em;
}

.proof .collapsible,
.section > .collapsible {
   width: 100%;
   /* margin-left = left margin for the collapsible button box: */
   margin-left: 0;
   font: inherit;
   font-size: 1.05em;
   border: none;
   color: var(--text-default-color);
}

.section > .collapsible {
   /* aligns button text and icon with opposite edges of the button: */
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--accent-color-1);
}

.proof .button-header {
   /* aligns button text and icon with opposite edges of the button: */
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--accent-color-1);
}

.proof-content,
.section-content {
   display: block;
   text-align: left;
}

.proof-content[hidden],
.section-content[hidden] {
   display: none;
}


/* ------ PROOF -----------------------------------------------------------------------------------------------*/
.proof {
   margin-top: -0.75rem; /* shortens the gap between the statement text and the proof */
}

.proof:has(.collapsible.active) {
   background: var(--bg-collapsible);
}

.proof:has(.collapsible:hover),
.proof:has(.proof-content:hover) {
   background: var(--bg-collapsible);
   outline: 1px solid var(--accent-color-1);
}

.proof > .collapsible {
   background: inherit;
   padding: 0.5rem;
}

/* expandable content formatting: */
.proof-content {
   background: var(--bg-collapsible);
   padding: 0.5rem;
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   margin-top: -0.5rem;
   margin-bottom: -0.5rem;
}

/* collapsible button icons: */
.proof > .collapsible:not(.active) > .button-header::after {
   content: " F";
   font-family: emojifont;
   font-size: 1.25em;
}

.proof > .collapsible.active > .button-header::after {
   content: " G";
   font-family: emojifont;
   font-size: 1.25em;
}



/* ------ SECTION ---------------------------------------------------------------------------------------------*/
.section {
   background: inherit;
}

.section > .collapsible {
   line-height: 0.5rem;
   background: inherit;
   
}

.section-content {
   background: var(--bg-main);
   padding: 0.25rem;
}

.section > .collapsible.active {
   background-color: inherit;
}

.section > .collapsible::after {
   content: " B";
   font-family: emojifont;
   font-size: 1.5rem;
   text-decoration: none;
}

.section > .collapsible.active::after {
   content: " C";
   font-family: emojifont;
   font-size: 1.5rem;
}


/* ------ CONTENT FORMATTING ------ */
/* universal formatting i.e. applies to all visible content on the page */
body {
   font-family: shpinscher, 'Times New Roman', Times, serif;
   color: var(--text-default-color);
   /* default text color */
   margin: 0;
   background-color: var(--bg-default);
   background-size: 90px;
   background-image: var(--body-bg-image);
   position: relative;
}



#container {
   max-width: 95vmax;
   margin: 2.5vh auto;
   display: flex;
   flex-direction: column;
   gap: 2.5vh;
}



/* ------ BOX FORMATTING ------ */
* {
   box-sizing: border-box; 
   /* gives all elements box sizing i.e. padding and borders are included in the width/height */
}

.box {
   background-color: var(--bg-box);
   border: 1px solid var(--accent-color-1);
   padding: 20px;
}

.box-ol {
   background-color: inherit;
   border: 1px solid var(--accent-color-2);
   margin: -0.5rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
   padding: 0.5rem;
}


/* ------ HEADER AND NAVBAR ------ */
#headerArea {
   width: 100%;
   height: 35vh;
   position: relative;
   background-color: var(--bg-default);
}

#header {
   width: 100%;
   height: 80%;
   text-align: center;
   padding-top: 7.5vh;
   color: var(--accent-color-1);
   font-size: 5rem;
   /* this is only for a background image! */
   /* if you want to put images IN the header, add them directly to the <div id="header"></div> element! */
   background-size: 90px;
   background-image: var(--header-image);
}

#navbar {
   width: 100%;
   height: 20%;
   position: sticky;
   top: 2.5vh;
}

/* formatting for the navbar */
#navbar ul {
   display: flex;
   padding: 0;
   margin: 0;
   list-style-type: none;
   justify-content: space-evenly;
}

#navbar li {
   padding-top: 15px;
}

/* navigation links*/
#navbar li a {
   font-weight: 800;
   text-decoration: none; 
   /* removes the underline from links */
}

#navbar ul li::before {
   content: none;
   /* removes the custom bullet points from the navbar links */
}



/* ------ MAIN CONTENT AND SIDEBARS ------ */
#flex {
   display: flex;
   justify-content: space-between;
   width: 100%;
}  

/* main formatting */
main {
   background-color: var(--bg-main);
   width: 50vw;
   padding: 25px;
   order: 2;
}

/* sidebar formatting */
aside {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   background-color: var(--bg-aside);
   width: 20vw;
   height: fit-content;
   padding: 20px;
   font-size: smaller;
   /* makes the sidebar text slightly smaller */
   position: sticky;
   top: 2.5vh;
}

.characterbox {
   width: 100%;
   height: fit-content;
   display: flex;
   justify-content: center;
   background-color: var(--bg-box);
   border: 1px solid var(--accent-color-1);
   padding: 20px;
}

aside ul, aside ol {
   margin: 0;
   padding-left: 0rem;
}

#leftSidebar {
   order: 1;
}

#rightSidebar {
   order: 3;
}




#footer {
   background-color: var(--bg-default);
   width: 100%;
   height: 5vh;
   padding: 1vh;
   text-align: center;
}



/* CSS for extras */
#topBar {
   width: 100%;
   height: 30px;
   padding: 10px;
   font-size: smaller;
   background-color: var(--bg-default);
}



/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page? by default, the container width is 900px.
   in order to keep things responsive, take your new height, and then subtract it by 100. 
   use this new number as the "max-width" value below. */

@media only screen and (max-width: 900px) {
  #flex {
      flex-wrap: wrap;
  }

  aside {
      width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device. feel free to play around with the order! */
  main {
      order: 1;
  }

  #leftSidebar {
      order: 2;
  }

  #rightSidebar {
      order: 3;
  }

  #navbar ul {
      flex-wrap: wrap;
  }
}