@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inconsolata:wght@200..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Silkscreen:wght@400;700&display=swap');
		
		
		/* Background: Jacob van Ruisdael, View of Haarlem with Bleaching Grounds, c. 1670-1675 */
		
		
		
		body {
			font-family: "Inter", sans-serif;
			font-size:17px;
			line-height:24px;
			/*background:#f8f6ed;*/
			text-align:center;
			margin-top:0px;
			margin-left:0px;
			margin-right:0px;
			display: flex;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
      min-height: 100vh;       /* Necessary to fill the screen */
			overflow-y: hidden;
			
			background-image:url('/bg4.png');
			background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      min-height: 100vh;
			
			@media (max-width: 400px) {
    			background:
            linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
            linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
            #e9e3c6;
          
         background-size:
              10px 10px,
              10px 10px,
              80px 80px,
              80px 80px,
              80px 80px,
              80px 80px,
              80px 80px,
              80px 80px;
          background-color: #e9e3c6;
        }
        
			@media (max-width: 400px) {font-size:16px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;}
		  /* @media (prefers-color-scheme: dark) { background-color: #2c2c2c; color: #ffffff; } */
		}


    /*
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f8f6ed 3px, #f8f6ed 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f8f6ed 3px, #f8f6ed 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f8f6ed;
      background-size:
          10px 10px,
          10px 10px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px; */

		
		#outerhouse{
		  position:absolute;
		  z-index: 10;
		  cursor: default;
		}
		
		#outerhouseheader{
		  width:820px;
		  box-sizing: border-box;
		  overflow:hidden;
		  border-radius:25px;
		  padding:10px;
		  background:#74716380;
		  /*background:transparent;*/
		  cursor: move;
		  /*z-index: 10;*/
		  
		  @media (max-width: 400px) {
		    background:transparent;
		    width:100%;
		    padding:0px;
		    border-radius:0px;
		  }
		}
		
		
		.innerhouse{ /*CONFORMED DESKTOP HEIGHT: 670px */
		  width:800px;
		  box-sizing: border-box;
		  overflow:hidden;
		  border:1px solid gray;
		  border-radius:19px;
		}
		
		.title{
		  font-family: Silkscreen;
		  height:40px;
		  width:100%;
		  display:block;
		  box-sizing: border-box;
		  text-align:center;
		  text-decoration:none;
		  color:black;
		  /*background:#f4f1e2;*/
		  background:#ebe5cb;
		  font-weight:300;
		  font-size:14px;
		  text-align:center;
      align-content:center;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
		}
		
		.title:hover {
		  /*background-color:#d1ccb2;*/
		  background:blue;
		  color:white;
		}
		
		.gardenlink{
		  font-family: Silkscreen;
		  height:40px;
		  width:50%;
		  display:block;
		  box-sizing: border-box;
		  text-align:center;
		  text-decoration:none;
		  color:black;
		  /*background: #E9E3C6;*/
		  background:#f4f1e2;
		  font-weight:300;
		  font-size:14px;
		  text-align:center;
      align-content:center;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
		}
		
		.gardenlink:hover {
		  /*background-color:#d1ccb2;*/
		  background:blue;
		  color:white;
		}
		
		.intro{
      width:800px;
      height:0px;
      font-size:15px;
      line-height:24px;
      text-align:center;
      align-content:center;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
      text-wrap: wrap;
      /*flex: 0 0 auto;*/
      /*background-color:#f1eedc;*/
      /*height:320px;*/
      /*overflow-y: auto;*/
      text-transform:lowercase;
      background:#f4f1e2;
      border-left:1px solid gray;
      border-right:1px solid gray;
      border-bottom:1px solid gray;
      box-sizing: border-box;
    }

    .intro a{
		  color:black;
		  background-color:transparent;
		  text-decoration:none;
		}
		
		.intro a:hover{
		  color:white;
		  background-color:black;
		  text-decoration:none;
		}
		
		.cats{
      height:40px;
      overflow-x: scroll;
      overflow-y: hidden; 
      white-space: nowrap; /* Ensures content stays in one line */
      display: flex;
      align-items: center;
      padding:0px;
      box-sizing: border-box;
      align-content:center;
      padding:0px;
		  margin-right:-1px;
		}
		
		.window{
		  height:440px;
		  color:black;
		  /*background:#f8f6ed;*/
      overflow-x: scroll;
      overflow-y: hidden; 
      white-space: nowrap; /* Ensures content stays in one line */
      /*height: 95.5dvh;*/
      border-top:1px solid gray;
      border-bottom:1px solid gray;
      display: flex;
      align-items: center;
      /* @media (prefers-color-scheme: dark) { background-color: #000000; color: #ffffff; } */
      /*width:100%;*/
      width:800px;
      background:#f4f1e2;
      gap: 35px;
      padding-top:35px;
      padding-right:35px;
      padding-left:35px;
      padding-bottom:24px;
      box-sizing: border-box;
      align-content:center;
      cursor: default;
		}
    
    .book {
      height:320px;
      border-radius:12px;
      /*transition-duration: .3s;*/
      overflow: hidden;
      /*filter: drop-shadow(0px 0px 4px gray);*/
      /*border:1px solid #c6c6c6;*/
      border:1px solid gray;
      
    } 
    
    
    
                @media(max-width:480px){
                  .book{
                     height:380px;
                  }
                }
                
  
    
    
    .book:hover {
      /*filter: drop-shadow(0px 0px 10px gray);*/
      /*transform: scale(1.02);*/
      /*transition-duration: .3s;*/
      opacity:1;
    }

    
  
    
    .image-container {
        position: relative; /* Essential for relative positioning */
        display: inline-block; /* Wraps tightly around the image */
    }
    
    /*
      .image-container:after {
        	content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: radial-gradient(circle, #000 1px, transparent 1px);
          background-size: 4px 4px; /* Adjust dot spacing 
          opacity: 0.7; /* Adjust intensity 
          mix-blend-mode: overlay; /* Blends with content 
          pointer-events: none; /* Clicks pass through
          z-index: 10;
          background-color: rgba(93,	90, 79, 0.3);
          border-radius:12px;
        }
        
     */
    

    .star {
        position: absolute;
        top: -14px;    /* Adjust for distance from top */
        right: -18px;  /* Adjust for distance from right corner */
        z-index: 10;  /* Ensures star stays on top of the main image */
    }
    
    .heart{
        border-radius:0px!important;
    }



    .filterDiv {
      display: none; /* Hidden by default */
      
    }
   
   /* The "show" class is added to the filtered elements */
    .show {
      display: block;
    }
   
    /* Style the buttons */
    .btn {
      color:black;
      border-right: 1px solid gray;
      border-left: 1px solid gray;
      border-top:none;
      border-bottom:none;
      outline: none;
      padding-right: 20px;
      padding-left: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      font-size:14px;
      font-family: Silkscreen;
      cursor: pointer;
      text-transform:lowercase;
      background:#f4f1e2;
      height:100%;
      margin-right:-1px;
      margin-left:-1px;
    }
    
    .btn:hover {
      background: #d1ccb2;
      color:black;
    }
    
    .btn.active {
      background: blue;
      color: white;
    }
    
    .btn1 {
      border-right: 1px solid gray;
      border-left: 1px solid gray;
      border-top:none;
      border-bottom:none;
      outline: none;
      padding-right: 20px;
      padding-left: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      font-size:14px;
      font-family: Silkscreen;
      cursor: pointer;
      text-transform:lowercase;
      color:black;
      background:#f4f1e2;
      height:100%;
    }
    
    .btn1:hover {
      background: #d1ccb2;
      color:black;
    }
    
    .btn1.active {
      background: blue;
      color: white;
    }

    .btn2 {
      border-right: 1px solid gray;
      border-left: 1px solid gray;
      border-top:none;
      border-bottom:none;
      outline: none;
      padding-right: 20px;
      padding-left: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
      font-size:14px;
      font-family: Silkscreen;
      cursor: pointer;
      text-transform:lowercase;
      color:black;
      background:#f4f1e2;
      height:100%;
      margin-right:-1px;
    }
    
    .btn2:hover {
      background: #d1ccb2;
      color:black;
    }
    
    .btn2.active {
      background: black;
      color: red;
      border: 1px solid black;
    }

    @media (max-width: 400px) {
		  
		  /*total box height for mobile:590px;*/
		  
		  body{ /*MOBILE*/
		    margin:0px;
		    padding-left:20px;
		    padding-right:20px;
		    padding-top:0px;
        overflow:hidden;
        background:black;
		  }
		  
		  #outerhouse{ /*MOBILE*/
  		  box-sizing: border-box;
  		  width:100%;
  		  padding-left:20px;
		    padding-right:20px;
		  }
		  
		  #outerhouseheader{ /*MOBILE*/
  		  
		  }
		  
		  .innerhouse{ /*MOBILE*/
  		  width:100%;
  		  box-sizing: border-box;
		  }
		  
		  .intro{ /*MOBILE*/
		    width:100%;
		    padding:20px;
		    font-size:15px;
		    line-height:22px;
		    box-sizing: border-box;
		    height:180px;
		  }
		  
		  .window{ /*MOBILE*/
		    width:100%;
		    height:410px;
		  }
		  
		  .book { /*MOBILE*/
        height:350px;
		  }
		  
		  
		  
		}




    /* SCROLLBAR */
    
    /* width */
    ::-webkit-scrollbar {
      display:none;
      height: 3px;
      box-sizing: border-box;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      display:none;
      background: transparent;
      box-sizing: border-box;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      /*background: #a39e8a;*/
      display:none;
      background:gray;
      height:3px;
      border-radius:200px;
      box-sizing: border-box;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      display:none;
      background: #8b8876;
      transition-duration: .3s;
      box-sizing: border-box;
    }

   
   /*DRAGGABLES*/
   
  
    
    #moon {
      position: fixed;
      z-index: 9;
      background-color: transparent;
      border: none;
      text-align: center;
      cursor: move;
      top:3%;
      left:2%;
      
      @media (max-width: 400px) {
        display:none;
      }
    }