/* coded by @abicodes!
please don't remove credit, claim as your own, or use as a base!
 
- basic isotope combination filtering setup from: https://codepen.io/desandro/pen/eYNEpQ
- metafizzy istotope
- phosphor icons
- google fonts + fontshare 
*/ 
 
/****************************************
 Variables
*****************************************/
 
:root{
 /*
 
background colors
 
  - edit color1, color2, and color3 to change the gradient combination!
  - alternatively, edit only color1 and go to the background section for a mono-color background*/
  --color1: #251932;
  --color2: #371B54;
  --color3: #C86D8C;
 
 
  /* colors
 
  - edit light + dark to change the text + line colors
  - accent changes link hover color + button hover color*/ 
 
  --transparent: rgba(0,0,0,0);
  --light: #FEE7DC;
  --light-transparent:rgba(240, 240, 240, .4);
  --dark: #1E191C;
  --dark-transparent: rgba(20, 20, 20, .7);
  --accent:rgba(145, 181, 177, .5);
 
  /* fonts*/ 
  --headerfont:'VeniceClassic', sans-serif;
  --bodyfont:'Montserrat', sans-serif;
  --accentfont: 'Inconsolata', monospace;
 
  /* font sizes*/
  --largest-font:2.3rem; /*large sidebar font*/
  --large-font:1.4rem; /*character name font*/
  --medium-font: .85rem; /*body font*/
  --small-font:.75rem; /*character blurb + buttons*/
 
  /* sidebar width*/
  --sidebar-width:260px;
 
  /* image height + width*/
  --height:361px;
  --width:230px;
  --gap:35px; /*gap between characters*/
 
  /*background gradients
 
  - i wouldn't recommend playing with the actual gradient code, if you can help it! however, if you want a solid background, replace the below with:
 
  "--background: "var(--background-texture), var(--color1);" 
 
  and make sure to change the color1 variable to the color that you would like the background to be!*/
 
  --background:
    var(--background-texture),
    var(--color2-gradient),
    var(--color3-gradient2),
    var(--color2-gradient3),
    var(--color1-gradient2),
    var(--color2-gradient2),
    var(--color3-gradient),
    var(--color3-gradient3),
    var(--color1-gradient);
 
  --color1-gradient: 
    linear-gradient(to right,
      var(--color1) 0%,
      var(--transparent) 100%);
  --color1-gradient2:
    radial-gradient(circle at bottom right, 
      var(--color1), 
      var(--transparent) 50%);
  --color2-gradient:
    radial-gradient(circle at bottom left, 
      var(--color2) 0%, 
      var(--transparent) 70%);
  --color2-gradient2:
    radial-gradient(circle at 60% center, 
      var(--color2) 0%, 
      var(--transparent) 55%);
  --color2-gradient3:
    radial-gradient(circle at 100% center, 
      var(--color2) 0%, 
      var(--transparent) 30%);
  --color3-gradient:
    radial-gradient(circle at top right,
      var(--color3),
      var(--transparent) 100%);
  --color3-gradient2:
    radial-gradient(circle at center left,
      var(--color3),
      var(--transparent) 25%);
  --color3-gradient3:
    radial-gradient(circle at 60% bottom,
      var(--color3),
      var(--transparent) 75%);
 
  --background-texture: url('https://img.nickpic.host/56Mk0X.png');
 
}

@font-face {
    font-family: Minecraft;
    src: url('/fonts/Minecraft.ttf')  format("truetype");
}

@font-face {
    font-family: PixelOperatorMono;
    src: url('/fonts/PixelOperatorMono.ttf')  format("truetype");
}

@font-face {
    font-family: PixelOperatorMono-Bold;
    src: url('/fonts/PixelOperatorMono-Bold.ttf')  format("truetype");
}

@font-face {
    font-family: VeniceClassic;
    src: url('/fonts/VeniceClassic.ttf')  format("truetype");
}
 
body{
  margin: 0px !important;
  background: var(--background);
  color: var(--light);
  font: var(--medium-font) var(--bodyfont);
  text-size-adjust: none;
  position: relative;
  background-attachment: fixed;
}
 
a{
  text-decoration: none;
  color: inherit;
  transition: .3s ease;
}
 
a:hover{
  color: var(--accent);
}
 
/****************************************
Sidebar
*****************************************/
 
.sidebar{
  width: var(--sidebar-width);
  height: calc(100vh - 80px);
  position: fixed;
  top: 40px;
  border-right: 1.5px solid var(--dark);
  padding: 20px 30px;
  box-sizing: border-box;
}
 
.sidebar span span{
  font-family: var(--headerfont);
  text-transform: lowercase;
  font-size: var(--largest-font);
  font-weight: bold;
}
 
.sidebar a{
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  gap: 10px;
  font-size: var(--small-font);
}
 
/****************************************
Button styling
*****************************************/
 
.button-set{
  text-align: right;
  margin-bottom: 20px;
}
 
.filter-title{
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .5px;
  margin-bottom: 5px;
  font-size: var(--small-font);
}
 
.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: var(--transparent);
  color: var(--light);
  font-family: var(--accentfont);
  font-size: var(--small-font);
  cursor: pointer;
  border: 1px solid var(--light);
  border-radius: 20px;
  margin-bottom: 3px;
}
 
.button:hover {
  background-color: var(--accent);
}
 
.button:active,
.button.is-checked {
  background-color: var(--light-transparent);
  color: var(--dark);
}
 
.button:active {
}
 
/****************************************
Main Section
*****************************************/
.grid{
  margin-left: calc(var(--sidebar-width) + 40px);
  margin-right: 35px;
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
}
/****************************************
Character Info
*****************************************/
 
.character-box{width: var(--width); height: calc(var(--height) + 45px); border-bottom: 1.5px solid var(--light);
display: flex;
flex-direction: column;
margin-right: var(--gap);
margin-bottom: var(--gap);}
 
.hover-container{
  height: var(--height);
  width: var(--width);
  overflow: hidden;
  position: relative;
}
 
.char-img{
  height: var(--height);
  width: var(--width);
  background-size: cover;
  transition: 1s ease;
}
 
.hover-container:hover .char-img{
  filter: blur(5px) grayscale(100%) brightness(70%);
  transition: 1s ease;
}
 
.char-name{
  text-transform: uppercase;
  font-family: var(--bodyfont);
  font-size: var(--large-font);
  margin-bottom: 9px;
  font-weight: 800;
  letter-spacing: .5px;
}
/****************************************
Character Info - Hover
*****************************************/
 
.char-hover{
  height: var(--height);
  width: var(--width);
  background: var(--background-texture), var(--dark-transparent);
  position: absolute;
  top: 0px;
  color: var(--light);
  display: grid;
  grid-template-rows: 45px 1fr 45px;
  transition: .5s ease;
  opacity: 0;
}
 
.hover-container:hover .char-hover{
  opacity: 1;
  transition: .5s ease;
}
 
.char-info{
  border-bottom: 1.5px solid var(--light-transparent);
}
 
.char-blurb{
  text-transform: uppercase;
  display: flex;
  padding: 20px 30px;
  letter-spacing: .5px;
  font-weight: 300;
  align-items: center;
  font-size: var(--small-font);
  text-align: center;
  text-align-last: center;
  line-height: 1.5;
  flex-direction: column;
}
 
.char-links{
  border-top: 1.5px solid var(--light-transparent);
}
 
.char-info, .char-links{
  padding: 0px 10px;
  display: flex;
  text-transform: uppercase;
  font-family: var(--accentfont);
  letter-spacing: .5px;
   align-items: center;
  gap: 10px;
}
 
/****************************************
Credit
*****************************************/
 
.credit{
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: var(--medium-font);
  font-family: var(--headerfont);
}