/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ SPACER :) ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* ========================================================== */
/*                     LINKED HTML: BLOG                      */
/*                     HAS BOTH SIDEBARS                      */
/* ========================================================== */
/* --- ▪▪▪ 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;}

p {padding:10px;
font-size:14px;
font-family:"texty";
text-align:left;}

.infoheader {font-family:"texty";
 font-weight:bold; 
 color: #000;
font-size:20px;}

hr {border-style: solid; 
border-width: 1px;
color:#000;}

.sideimg{display: flex;
justify-content:center;
margin-bottom:10px;}

.sideheader{padding:6px;
font-size:16px;
background-color: #d8d3ea;
text-align:left; 
}

/*--- 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: #f7f7f7;
  background-image:url(#);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 30px;
  margin-left:10%;/*left space between edge of screen and sidebar*/
  font-family:"texty";
  border-style:solid;
  border-width:1px;
  border-color:#c4c4c4;
  
}

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

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #5b56cb;
  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;}
} 

/*--- END SIDEBAR---*/

.col1 {
  width:63%;
  min-height:200vh;
  background-color: #ededed;
  background-image:url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/greygrid.png);
  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: 16px;
  padding:20px;
  font-family:"texty";
  position: absolute;
}

/*  THOSE SIDE BOXES */
.col1info {
  background-color: #f7f7f7;
  background-image:url(#);
  padding: 15px;
  margin-bottom:15px;
  border-style:solid;
  border-color:#000000;
  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: 16px;
  text-align:left;
  width:860px;
}

/* TAGS / FILTER BUTTONS */
/* Css just for the example */
.filter-buttons {
  margin-bottom: 10px;
  margin-top:10px;
  margin-left:8px;
}
.filter-button {
  border: solid;
  border-width:1px;
  background-color: #f7f7f7;
  color: #000;
  width:95%;
  margin:2px;
  padding:4px;
  padding-left:10px;
  text-align:center;
  font-family:"texty";
  font-size:14px;
  border-radius:5px;
  cursor: pointer;
}

.filter-button:hover{color:#36357E;
background-color:#d8d3ea;}

.filter-button.active {
  color: #36357E;
  background-color:#d8d3ea;
  
}

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


/* --- ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ EFFECTS & ANIMATIONS ▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪▪ --- */
/* --- ▪▪▪ BACKGROUND ANIMATION ▪▪▪ ---  */
html {
  height: 100%
}
body {
   background: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/dot-tile-modified.jpeg) repeat 0 0;
   background-color: #e4e9fc;
    height: 100%;
  /*-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;
  }
}*/