<style>
    @font-faace {
      font-family:Nightmaw;
      src: url(https://ibuuprofen.neocities.org/Nightmaw.otf);
    }
    @font-face { font-family: GravitasOne-Regular ;
  src: url('https://acetaminophriends.neocities.org/GravitasOne-Regular.ttf'); }
@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap');

.head {
  width: 62vw;
  height:200px;
  margin:20px auto;
}

.blah {
  margin:auto;
  width:fit-content;
}

.container {
  margin:auto;

  width:fit-content;
  
}

.gallery {
  
  background:black;
  padding:10px;
  width:fit-content;
  height:auto;
 /*display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-auto-flow:row;
  gap: 40px 15px;
  grid-auto-flow: dense;*/
  -webkit-column-count: 4;
  -webkit-column-gap: 15px; 
  -moz-column-count: 4;
  -moz-column-gap: 15px; 
  -moz-row-count:3;
  column-count: 4;
  column-gap: 15px; 
  break-inside: avoid-column;
 
}
    
    * {
      font-family: Courier New;
    }
    
    img {
  position:relative;
   display: block;
  margin:auto;
  
}

h1 {
   font-family: "Nightmaw";
  font-size:70px;
  
}

p {
  color:white;
}

li {
  color:white;
  list-style-type: none;
}

a {
 color:red;
}

::selection {
  background-color:red;
  color:white;
}

.post {
 
   border-radius:10px;
  max-height:;
  width:260px;
  margin-bottom:10px;
   break-inside: avoid;
   text-align:center;
   
}

.pic {
  filter:grayscale(100%);
  overflow:hidden;
  filter:grayscale;
  object-fit:cover;
  max-height:340px;
   border-radius:10px 10px 0px 0px;
  border: 1px solid white;
  
}

.pic:hover {
  filter:grayscale(0%);
 
}

.caption {
    border-radius:0px 0px 10px 10px;
  border:1px solid white;
  max-height:100px;
}

body {
  background-color:#000000;
  background-image:url(https://file.garden/ZzAFOQ4MgBkQ6IrR/backgrounds/snow.gif);
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
    
    @media only screen and (max-width: 1200px) {
 .gallery {
  
  background:black;
  padding:10px;
  width:fit-content;
  height:auto;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px; 
  -moz-column-count: 2;
  -moz-column-gap: 15px; 
  column-count: 2;
  column-gap: 15px; 
  break-inside: avoid-column;
 
}
}
    
     @media only screen and (max-width: 700px) {
 .gallery {
  
  background:black;
  padding:10px;
  width:fit-content;
  height:auto;
  -webkit-column-count: 2;
  -webkit-column-gap: 15px; 
  -moz-column-count: 2;
  -moz-column-gap: 15px; 
  column-count: 2;
  column-gap: 15px; 
  break-inside: avoid-column;
 
}
      
       ul {padding:10px;
       margin:10px;}
}
    
      @media only screen and (max-width: 650px) {
 .gallery {
  
  background:black;
  padding:10px;
  width:fit-content;
  height:auto;
  -webkit-column-count: 1;
  -webkit-column-gap: 15px; 
  -moz-column-count: 1;
  -moz-column-gap: 15px; 
  column-count: 1;
  column-gap: 15px; 
  break-inside: avoid-column;
 
}
       
       
       ul {padding:10px;
       margin:10px;}
}
  </style>