@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
.hide {
     display: none;
}

 body{
    margin-left: 15%;
    margin-right: 15%;
    background-color:black;
    font-family: "Courier Prime", monospace;
    font-size: 14px;
 }

 .card {
    text-align: center;
 }

 #card-grid{
    width:300px;
    display:grid;
 }

 .entries {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
     grid-gap: 25px;
     justify-content: center;
 }

.search-wrapper{
    margin-left:10%;
    margin-right: 10%;
    display: grid;
    place-items: center;
    padding: 30px;
    border:1px solid white;

}
.slider{
    width: 90%;
}
 #sliders {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 4000px));
     text-align: center;
 }

#box-slider-val{
    display: grid;
    grid-template-columns: 1% 98% 1%;

 }

 input[name="search"] {
     width: 60%;
     height: 2.5em;
 }

 h1{
    color: white;
    text-align:center
 }

 h2,h3,h4{
    color: white;
    margin-bottom: -12px;
}

a {
    color:white;
    text-decoration:none
}

/* Modified code from https://github.com/Softwave/softwave.github.io/blob/master/style.css#L108 */
  a {
    text-decoration: none;
    display: inline;
    position: relative;
    color: white;
  }
  
  a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transform-origin: bottom right;
    transition: transform 0.15s ease-out;
  }
  
  a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

p{
    color: white;
    line-height: 1px;
    margin-bottom: 15px;
}

 footer{
    color:white;
    text-align: center;
    margin-top: 100px;
 }

 input{
    margin: 0 auto;
    display: block;
    font-family: "Courier Prime", monospace;
 }
 .invisible_button{
    padding-top:20px;
    color: white;
    background-color: transparent;
    font-size: large;
    text-align: center;
    vertical-align: center;
    border:none;

 }
 #card-grid {
    transition: 0.1s; 
 }

 #card-grid:hover{
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transform:scale(1.1);

    background: rgb(82,82,82);
    background: -moz-radial-gradient(circle, rgba(82,82,82,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(82,82,82,1) 0%, rgba(0,0,0,1) 100%);
    background: radial-gradient(circle, rgba(82,82,82,1) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#525252",endColorstr="#000000",GradientType=1); 

    padding: 10px;
    padding-bottom: 20px;
    border-radius: 10px;
    z-index: 1000;

    overflow: hidden;
 }

 #card-grid:hover .filter{
   position: absolute;
   width: 300px;
   height: 100%;
   z-index: -1;
   filter: url(#noiseFilter);
   opacity: 0.3;
 }