/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SPACER :) ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* ========================================================== */
/*                     LINKED HTML: TOS                       */
/* ========================================================== */
/* --- ▪▪▪ APPLIES TO ALL ▪▪▪ ---  */
* * {box-sizing: border-box;}
/* --- ▪▪▪ CUSTOM CURSOR ▪▪▪ ---  */
* {cursor: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/glove.cur), auto !important;} 

/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ GENERAL EDITS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
ul {color: var(--font-color);
  font-size: var(--ul-size);}

hr {border-style: solid; 
border-width: 1px;
border-color: var(--border-hr);}

/* highlight color*/
mark {background-color:var(--highlight);}

p{color:var(--font-color);}

/*tags button in col1info / containers */
.button {
  background-color: var(--sideheader);
  font-family: var(--font);
  border: solid;
  border-width:1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  height:25px;
}
.floatright{float:right;}

/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SIDEBAR / SIDENAV ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
.sideimg{display: flex;
justify-content:center;
margin-bottom:10px;}

/*--- FIXED / STICKY SIDEBAR ---*/
 /* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 240px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: var(--sidenav-bg);
  background-image: var(--sidenav-bg-img);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 30px;
  margin-left:10%;/*left space between edge of screen and sidebar*/
  font-family: var(--font);
  border-style:solid;
  border-width:1px;
  border-color: var(--border-hr);
  
}

/* The navigation menu links */
.sidenav a {
  color: var(--links);
  display: block;
  transition-duration: .5s; /*text moves right on hover*/
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: var(--links-hover);
  margin-left: 15px; /*text moves right on hover*/
}

/* Style page content */
.main {
  margin-left: 380px; /* moves col1 left */
  max-width:910px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 

/*--- SIDEBAR / SIDENAV CONTENT ---*/
  .copyright{text-align:center; 
    position:absolute;
    bottom:0;
    padding-left:15%;
    padding-bottom:5%;
    font-size:var(--copyright-size);
    color: var(--font-color);}
  

  .scrollbox {
    font-size:var(--scrollbox-size); 
    margin:10px; 
    padding-left:10px; 
    padding-top:10px;  
    border: solid 1px; 
    color:var(--scrollbox-fontcolor);
    border-color:var(--border-hr);
    background-color: var(--scrollbox-bg);
    border-radius:5px; 
    height: var(--scrollbox-height);
    width:90%;
    overflow:auto;
  }

/*--- SORT BY TAG / FILTER BUTTONS ---*/
.filter-buttons {
  margin-bottom: 10px;
  margin-top:10px;
  margin-left:8px;
}
.filter-button {
  border: solid;
  border-width:1px;
  border-radius:5px;
  border-color:var(--border-hr);
  background-color: var(--filter-btn-bg);
  color: var(--filter-btn-color);
  width:95%;
  margin:2px;
  padding:4px;
  padding-left:10px;
  text-align:center;
  font-family: var(--font);
  font-size: var(--filter-btn-size);
  cursor: pointer;
}

.filter-button:hover{color: var(--btn-active-text);
background-color: var(--btn-active-bg);}

.filter-button.active {
color: var(--btn-active-text);
background-color: var(--btn-active-bg);
}

.filter-items {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  display: none;
}
.filter-item.active {
  display: flex;
}



/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ ALL HEADERS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
.infoheader {font-family: var(--font);
 font-weight:bold; 
 color: var(--font-color);
font-size:var(--infoheader-size);}

.sideheader{padding:6px;
font-size:var(--sideheader-size);
background-color: var(--sideheader);
text-align:left; 
}


/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ MAIN CONTENT / COL! ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
.col1 {
  width:63%;
  min-height:200vh;
  background-color: var(--col1-bg);
  background-image: var(--col1-bg-img);
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  font-size: var(--col1-size);
  padding:20px;
  font-family: var(--font);
  position: absolute;
}

/*  THOSE SIDE BOXES */
.col1info {
  background-color: var(--col1-info);
  background-image:url(#);
  padding: 15px;
  margin-bottom:15px;
  border-style:solid;
  border-color: var(--border-hr);
  border-width:1px;
  border-radius:10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  font-size: var(--col1-size);
  color: var(--font-color);
  text-align:left;
  width:860px;
}

/* --- ▪▪▪ spoiler/collapse/accordion ▪▪▪ ---  */
details {
  border: none;
  border-radius: 4px;
  padding-left:25px;
  list-style:none;
  color: var(--font-color);
}
summary {
  font-weight: bold;
  padding-bottom:5px;
  color: var(--font-color);
  font-size: var(--ul-size);
}
details[open] summary {
  border-bottom: none;
}


/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ BACKGROUND ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
html {
  height: 100%
}
body {
   background: var(--background-image) repeat 0 0;
   background-color: var(--background);
    height: 100%;
  /* remove comment tags for animated bg */
  /*-webkit-animation: bg-scrolling-reverse 4s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
    background-position: 40px 40px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
   background-position: 40px 40px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
   background-position: 40px 40px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
   background-position: 40px 40px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
 background-position: 40px 40px;
  }
}
@keyframes bg-scrolling {
  0% {
    background-position: 40px 40px;
  }
}*/