@font-face {
    font-family: pencil;
    src: url("../pencil.ttf");
}
th, td {
  
     padding-right: 30px;
}


body {
    background-image: url(https://64.media.tumblr.com/871773c093281b455b5ee6abe2e6dfe5/c33ef4067bcde5db-ec/s250x400/8239b1cc8f773e3e78ad300f9c03924822adc82e.jpg);
    font-family:pencil;
  min-height: 120vh; 
    cursor: url("Normal-Select.cur"), auto !important;
    padding: 20px;
}

.sidebar {
    width: 17%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    border: 1px solid lime;
    background-color: black;
    background-repeat: repeat;
    text-align: center;
   
}



nav{
   width: 17%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    border: 1px solid lime;
    background-color: black;
    background-repeat: repeat;
    text-align: center;
}

.navlink{
  background-color: white;
  display: block;
  padding: 5px;
  margin: 8px 5px 8px;
}


h1 {
    color:aliceblue;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.header {
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;

}

.nav {
background: linear-gradient(180deg,rgba(0, 128, 0, 0.514),#000);
border: 1px solid lime;
font-size: 30px;
color: rgba(245, 245, 245, 0.829);
font-family: pencil;
height: 50px;
border: 2px;
width: 230px;
text-align: left;
margin-bottom: 4px;
}
.sidebtn:hover{
    opacity: 0.5;
}

.backstory {
   color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil"; 
}


.occontainer {
  border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 75%;
margin-left: 20%;
overflow-y:auto;
position: relative;
overflow-x:hidden;
text-align: left;
height: 85%;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 30px;
font-family:"pencil";

}

a {
  color: lime;
}

.mainImage {
 margin: 5px;
  border: 2px solid lime;
  margin-left: 70%;
  margin-top: auto;
  height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;

}

img {
  max-width: 100%;
  height: auto;
}


.container {
  overflow: hidden;
}

.filterDiv {
  float: right;
  width: 200px;
  text-align: left;
    margin: 0 auto;
  margin-left: 10px;
  display: none;

  
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
    background-color: #000000; 
  border: 1px solid lime;
  color: lime;
  border-radius:10px;
  text-align: center;
  text-decoration: none;
  font-size: 20px;

  padding: 15px 32px;
  display: inline-block;
   margin: 4px ;
  transition-duration: 0.4s;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.btn:hover {
 background-color: #343b32;
    color: rgb(186, 255, 186);
}

/* Add a dark background to the active button */
.btn:active {
 background-color: #343b32;
   color: rgb(186, 255, 186);
}



.gallery { /* this is the main div that wraps your gallery */

display:flex;
  flex-wrap:wrap;
justify-content: flex-start;

width: 1200px;
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:200px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:200px; /* this should match the image width */
  margin-right:50px; /* this controls the gaps between the images */
  margin-bottom:150px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}


.basics {
    width:30%;
     border: 1px solid green;

    box-sizing: border-box;
 
    padding:20px;
    background-color: #000000;

  
    top: 15px;
    font-size: 20px;
    height:fit-content;
}




.sidebar-left {
    height: 100%;
}

.grid-holder {
    margin-left: 265px;
    width: 980px;
    min-height: 1000px;
}

button {
    cursor: var(--cursor-hover);
    background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	outline: inherit;
}

.toggles {
    position: sticky;
    top: 0;
}

.filter li, .sort li {
    list-style: none;
    margin-bottom: 4px;
    transition: ease-in 0.2s, ease-out 0.2s;
}

.filter li:hover, .sort li:hover {
    color: var(--primary);
}

.filter ul, .sort ul {
    margin-left: -23px;
    margin-top: 3px;
}

.filter i, .other-stuff i {
    margin-right: 8px;
}

.filter h1, .sort h2 {
    border-bottom: 2px dashed var(--default-text);
    padding: 5px;
    padding-bottom: 7px;
    margin: 5px 10px;
    margin-left: -1px;
    font-size: 19px;
}

.active::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url(/assets/img/boogleicon.ico);
    height: 16px;
    width: 16px;
    margin-left: 10px;
    margin-top: -1px;
}

#myBtn {
    text-align: center;
    background-color: transparent;
    font-size: 18px;
    padding: 9px;
    border-radius: 5px;
    border: 1px solid var(--box-bg);
    font-weight: bold;
    color: var(--default-text);
    transition: ease-in 0.2s, ease-out 0.2s;
    margin-left: 58px;
    margin-bottom: 5px;
    margin-top: 5px;
}

#myBtn:hover {
    text-align: center;
    background-color: var(--secondary);
    font-size: 18px;
    padding: 9px;
    border-radius: 5px;
    border: 1px solid var(--secondary);
    font-weight: bold;
    color: var(--contrast-2)
}

.other-stuff span {
    font-family: "MS PGothic", sans-serif;
}



.grid-item {
    display: block;
    float: left;
    margin: 1%;
    padding: 10px;
    width: 200px;
}

.avi-container img:hover {
  transform:scale(0.7); /* this scales up the image when you hover over it */
     transition: ease-in 0.3s, ease-out 0.3s;
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
  
}

/* Image style */

.grid-item img {
    transition: ease-in 0.3s, ease-out 0.3s;
    width: 100%;
    height: auto;
}

.grid-item:hover a img {
    margin-top: -7px;
    margin-bottom: 7px;
}

.avi-container {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    margin: auto;
}

/* Content container info */

.info {
    margin-top: 0px;
    width: 100%;
    text-align: center;
    color: lime;
}

/* Info heading */

.info h3 {
    margin: 0;
    color: var(--default-text);
    font-size: 20px;

    transition: ease-in 0.2s, ease-out 0.2s;
}

.info h3:hover {
    color: var(--secondary);
}

/* Info description */

.info-deets {
    margin: 0;
 
    font-size: 16px;
    color: seashell;
}

.infodesc {
    margin: 0;
     color: seashell;
    font-size: 14px;
 
}

.hide {
    display: none;
}