@font-face {
    font-family: 'Plaster';
    src: url('https://file.garden/ZzAFOQ4MgBkQ6IrR/art/NewAmsterdam-Regular.ttf') format('truetype');
}


body {
  background-color: #fffffd;
  padding:0%;
  margin:0%;
  width:100vw;
}

* {
  box-sizing:border-box;
}

a {
  color:#00001a;
}

h2 {
  font-family:"Plaster";
}

p {
   font-family: "Courier New";
   text-align:center;
}

#top-banner {display:none;
}

::selection {
  background-color:#9999ff;
  color:white;
}

#site {
 display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "sidebar sidebar header header header header header header header header"
    "sidebar sidebar header header header header header header header header"
    /*"sidebar sidebar divider divider divider divider divider divider divider divider"*/
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"
    "sidebar sidebar gallery gallery gallery gallery gallery gallery gallery gallery"; 
}

#sidebar {
  grid-area:sidebar;
  padding:auto;
  background-color:#f9f9f2;
  color:#00001a;
  margin:0px 0px;
  height:100%;
  position:relative;
}



#recent{
  background-image:url(https://file.garden/ZzAFOQ4MgBkQ6IrR/art/meh_clown.png);
  background-size:470px;
  background-position: 50% 25%;
  background-repeat: repeat-x;
  grid-area:header;
  height:370px;
  background-color:red;
  display: flex;
  justify-content: center;
  align-items: center;
}

#recent-pic{
  width:calc((100% - 400px) * 0.70);
  height:300px;
    object-fit: cover;
  overflow:hidden;
}

.recent-pic-blur{
  backdrop-filter:blur(15px);
  background: rgba(255, 255, 255, 0.2);
width:calc((100vw - 280px) * 0.45);
  height:100%;
}

.heart_divider {
  top:-7%;
  position:absolute;
  width:calc(100% - 10px);
  height:60px;
  background-size:125px;
  background-image:url("https://file.garden/ZzAFOQ4MgBkQ6IrR/art/hearts.webp");
  background-repeat:round space;
}

.gallery {
  
  position:relative;
  grid-area:gallery;
  grid-area:header;
  margin:auto;
  margin-top:0px;
  padding:3px;
  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: 2;
  -webkit-column-gap: 0px; 
  -moz-column-count: 2;
  -moz-column-gap: 0px; 
  column-count: 2;
  column-gap: 0px; 
  break-inside: avoid-column;
}

.post {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:0px;
  overflow:hidden;
   border-radius:0px;
  max-height:;
  width:100%;
  margin-bottom:0px;
   break-inside: avoid;
  /*filter:brightness(105%) contrast(105%) opacity(60%) blur(0.5px);
  transition:filter 0.2s;*/
   
}

.pic {
  pointer-events:inherit;
  z-index:0;
  overflow:hidden;
  object-fit:cover;
  max-height:450px;
  border: 1px solid white;
  /*filter:brightness(0.8)  grayscale(100%) sepia(100%) saturate(100%) hue-rotate(3084deg) saturate(260%);*/
}

.post:hover .pic {
  filter:brightness(110%) blur(10px) saturate(90%);
 transition:filter 0.1s;
}

.text {
  color:white;
  pointer-events:inherit;
  z-index:3;
position: absolute;
  width:auto;
  padding-top:auto;
  height:auto;
}

.post:hover .text {
  pointer-events:inherit;
  font-size:50px !important;
}

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

  img {
  position:relative;
   display: block;
  margin:auto;
  
}
 

#hs:hover {
   animation-name: rock;
  animation-duration: 1s;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

.butt {}

.dropbtn {display:none;}

#menu {
  position:absolute;
  background-color:;
  width:100%;
  height:100vh;
   display: none;
  z-index:3;
}
.b {}
.dropdown {
  position: relative;
  display: inline-block;
  z-index:2;
}
.b {
 
}



@media only screen and (max-width: 1200px) {
  #recent-pic{
  width:calc((100% - 400px) * .9);
  height:300px;
    object-fit: cover;
  overflow:hidden;
}
}

 @media only screen and (max-width: 900px) {
   
   #menu {
  position:absolute;
  grid-area:gallery;
  background-color:white; 
  width:100%;
  height:100vh;
   display: none;
  z-index:3;
}
    .b {
  
  background-color:#f9f9f2;;
  width:100%;
  height:100vh;
   display: none;
  z-index:3;
}
   
.show {display:initial !important;
   grid-area:gallery;}
   
#site {
  display: grid; 
  gap: 0px 0px; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  grid-template-areas: 
    "header header header header header"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"; 
}
   
    #top-banner {
     grid-area:header;
      background-color:#f9f9f2;
  color:#00001a;
  display:flex;
flex-direction:row;
   }
   
   #sidebar {
  display:none;
}
   
   #recent-pic{
  width:calc((100% - 250px) * 1);
  height:300px;
    object-fit: cover;
  overflow:hidden;
}

.recent-pic-blur{
  backdrop-filter:blur(15px);
  background: rgba(255, 255, 255, 0.2);
width:calc((100vw - 250px) * 0.4);
  height:100%;
}
   
.gallery {
  grid-area:gallery;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
   }
   
   .dropbtn {
    margin-left:calc(18vw) !important;
   cursor: pointer;
   display:flex;
   background-color:rgba(255, 255, 255, 0);
   border:0px;}
}

 @media only screen and (max-width: 750px) {
   .gallery {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
     margin:0px;
   }
   
   #site {
    grid-template-columns:1fr 1fr 1fr 1fr 1fr; 
    grid-template-areas: 
    "header header header header header"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"; 
}
}

 @media only screen and (max-width: 700px) {
   
   #sidebar {
  grid-area:sidebar;
  padding:auto;
  background-color:#f9f9f2;
  margin:0px 0px;
  height:100%;
  position:relative;
  color:#00001a;
}
   
   .gallery {
      grid-area:gallery;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
   }
   
.pic {
  overflow:hidden;
  object-fit:cover;
  max-height:350px;
  border: 1px solid white;
}
   
}

@media only screen and (max-width: 550px) {
   .gallery {
     grid-area:gallery;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
   }
  
     #site {
    grid-template-columns:1fr 1fr 1fr 1fr 1fr; 
    grid-template-rows:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "header header header header header"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
    "gallery gallery gallery gallery gallery"
   ; 
}
}