body {
  
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6wBZ6IHC6-7ItvAO57TwFxK3zilRGhO4pfJ8N65kRAQT5pkIiTCoUHEeZOgAFYcwZaD0&usqp=CAU);
  background-size: 250px;
  z-index: -1;
  
}






@font-face {
  font-family: "LeetSpeak";
  src: url('/Users/slb/Desktop/lutrin/LeetSpeak.ttf') format('truetype');

}

.funtain {
  position: absolute;
  top: 356.5px;
  left: 652px;
  z-index: 10000;
}

.road1 {
  color: black;
  writing-mode: vertical-rl;
  font-size:16px;
  text-wrap: nowrap;
  
  position: absolute;
  top: 1224px;
  left: 700.5px;
  z-index: 100;
}
.poem {
  color: wheat;
  font-size: 16px;
  width: 290.5px;
  height: 940px;
  position: absolute;
  top: 2969.5px;
  left: 1012.5px;
  z-index: 100;
  background-color: cadetblue;
  padding: 20px;
  border-right: 20px ridge #a18986;
  border-top: 20px ridge #a18986;
  border-bottom: 20px ridge #a18986;
  border-left: 20px ridge #a18986;
  line-break: auto;
}
.poem2 {
  color: rgb(255, 0, 0);
  font-size: 16px;
  width: 317.5px;
  height: 802px;
  position: absolute;
  top: 8394.5px;
  left: 10088.5px;
  z-index: 100;
  background-color: rgb(230, 202, 224);
  padding: 20px;
  border-right: 20px ridge #a18986;
  border-top: 20px ridge #a18986;
  border-bottom: 20px ridge #a18986;
  border-left: 20px ridge #a18986;
  line-break: auto;
}


.path1 {
  width: 100px;
  height: 9809px;
  background-color: #fcffaa;

  position: absolute;
  top: 495px;
  left: 640px;
  
  border-right: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  
  z-index: 51;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path2 {
  width: 340.5px;
  height: 108px;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
  position: absolute;
  top: 366.5px;
  left: 295px;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path3 {
  width: 3400px;
  height: 108px;
  background-color: #faffa4;
  position: absolute;
  top: 366.5px;
  left: 770px;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path4 {
  width: 123px;
  height: 3523px;
  background-color: #faffa4;
  position: absolute;
  top: 495px;
  left: 4150.5px;
  border-right: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path5 {
  width: 637px;
  height: 256px;
  background-color: #faffa4;
  position: absolute;
  top: 3999px;
  left: 3504px;
  border-top: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path6 {
  width: 672.5px;
  height: 256px;
  background-color: #faffa4;
  position: absolute;
  top: 3999px;
  left: 4293.5px;
  border-top: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path7 {
  width: 622.5px;
  height: 572px;
  position: absolute;
  top: 4265.5px;
  left: 3895px;
  border-top: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 120;
}
.path8 {
  width: 374.5px;
  height: 602px;
  position: absolute;
  top: 4274px;
  left: 3504px;
  border-left: 20px ridge #d07a6e;
  z-index: 30;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path9 {
  width: 409.5px;
  height: 602px;
  position: absolute;
  top: 4274px;
  left: 4556px;
  border-right: 20px ridge #d07a6e;
  z-index: 30;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path10 {
  width: 640.5px;
  height: 256px;
  background-color: #faffa4;
  position: absolute;
  top: 4867.5px;
  left: 3505px;
  border-bottom: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path11 {
  width: 819.5px;
  height: 256px;
  background-color: #faffa4;
  position: absolute;
  top: 4867.5px;
  left: 4146px;
  border-bottom: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  z-index: 102;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path12 {
  width: 1745.5px;
  height: 255.5px;
  background-color: #faffa4;
  position: absolute;
  top: 4848px;
  left: 1768.5px;
  border-bottom: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  z-index: 200;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path13 {
  width: 117.5px;
  height: 272.5px;
  background-color: #faffa4;
  position: absolute;
  top: 4850px;
  left: 1630.5px;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path14 {
  width: 117.5px;
  height: 1994px;
  background-color: #faffa4;
  position: absolute;
  top: 2856.5px;
  left: 1630.5px;
  border-right: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.path15 {
  width: 798.5px;
  height: 113.5px;
  background-color: #faffa4;
  position: absolute;
  top: 2721.5px;
  left: 830.5px;
  border-bottom: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  z-index: 200;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
  border-left: 20px ridge #d07a6e;
}
.path16 {
  width: 140.5px;
  height: 134.5px;
  left: 1647.5px;
  background-color: #faffa4;
  position: absolute;
  top: 2721.5px;
  border-top: 20px ridge #d07a6e;
  z-index: 200;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;

}
.path17 {
  
  height: 115.5px;
  width: 2257.5px;
  left: 1778.5px;
  background-color: #faffa4;
  position: absolute;
  top: 2721.5px;
  border-top: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;

}
.path18 {
  
  height: 143.5px;
  width: 2024.5px;
  left: 4963.5px;
  background-color: #faffa4;
  position: absolute;
  top: 5666.5px;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/LIMESTO3.JPG);
  background-size: 250px;
  transform: rotate(35deg);
  
  box-shadow: 0 0 18px 18px rgb(146, 131, 103) inset;
}
.path19 {
  
  height: 143.5px;
  width: 2410.5px;
  left: 4511.5px;
  background-color: #faffa4;
  position: absolute;
  top: 2680.5px;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/LIMESTO3.JPG);
  background-size: 250px;
  transform: rotate(-3deg);
  box-shadow: 0 0 18px 18px rgb(146, 131, 103) inset;
}
.path20 {
  
  height: 137.5px;
  width: 507.5px;
  left: 6739.5px;
  background-color: #faffa4;
  position: absolute;
  top: 3053.5px;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/LIMESTO3.JPG);
  background-size: 250px;
  transform: rotate(65deg);
  box-shadow: 0 0 18px 18px rgb(146, 131, 103) inset;
}
.path21 {
  
  height: 137.5px;
  width: 295.5px;
  left: 6735.5px;
  background-color: #faffa4;
  position: absolute;
  top: 3304.5px;
  z-index: 20000;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/LIMESTO3.JPG);
  background-size: 250px;
  transform: rotate(5deg);
  box-shadow: 0 0 18px 18px rgb(146, 131, 103) inset;
  z-index: 30000000;
}
.water {
  height: 10010.5px;
  width: 11662px;
  position: absolute;
  top: -212.5px;
  left: -26px;
  z-index: 1;
  border-top: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: -20;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKQXZg3n6YbrloQkiM0TCrZhsBj9GHyH7zCsonDkxgss00P0Up2HYOaHYP9FE7WpxKPv0&usqp=CAU0);
  background-repeat: repeat;
  background-size: 150px;
   ;
}



.plaza {
  width: 118px;
  height: 115px;
  background-color: #faffa4;
  position: absolute;
  top: 366.5px;
  left: 653.5px;
  border-top: 20px ridge #d07a6e;
  z-index: 3;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.plaza2 {
  width: 123.5px;
  height: 118.5px;
  background-color: #faffa4;
  position: absolute;
  top: 366.5px;
  left: 4170px;
  border-top: 20px ridge #d07a6e;
  border-right: 20px ridge #d07a6e;
  z-index: 50;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}
.plaza3 {
  width: 235px;
  height: 251.5px;
  background-color: #faffa4;
  position: absolute;
  top: 4017.5px;
  left: 4066.5px;
  z-index: 50;
  background-image: url(https://textures.neocities.org/textures/stone-and-brick/Yellobrk.JPG);
  background-size: 250px;
}


.lebeaumec {
  position: absolute;
  top: 849px;
  left: 832px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.pando {
  position: absolute;
  top: 2059px;
  left: 4408px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.dreams{
  position: absolute;
  top: 3180.5px;
  left: 3368.5px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.janetsobel {
  position: absolute;
  top: 566px;
  left: 3004.5px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.cheer{
  position: absolute;
  top: 4413.5px;
  left: 3957px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 1000;
}
.prince {
  position: absolute;
  top: 3699px;
  left: 4646px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.roberta {
  position: absolute;
  top: 2115px;
  left: 111px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.wallpaper {
  width: 1874.5px;
  height: 417.5px;
  position: absolute;
  top: 2305.5px;
  left: 1895px;
  background-image: url(https://gallica.bnf.fr/ark:/12148/btv1b6901121p/f1.highres);
  background-size: 514px;
  z-index: 3000;
}
.usaflag{
  mix-blend-mode:darken;
  position: absolute;
  top: 1895.5px;
  left: 1766.5px;
}
.golden{
  position: absolute;
  top: 4119.5px;
  left: 908.5px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.cath{
  position: absolute;
  top: 4148.5px;
  left: 942.5px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
}
.float{
  position: absolute;
  top: 3114.5px;
  left: 2052.5px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 20000;
}
.othello{
  mix-blend-mode: darken;
  position: absolute;
  top: 1124.5px;
  left: 1533.5px;
  z-index: 1;
}
.see{
  
  position: absolute;
  top: 9285.5px;
  left: 10868.5px;
  z-index: 1;
  border-right: 20px ridge #000000;
  border-top: 20px ridge #000000;
  border-bottom: 20px ridge #000000;
  border-left: 20px ridge #000000;
}
.maison{
  position: absolute;
  top: 7108px;
  left: 8165px;
  z-index: 3000;
}
.pacific{
  position: absolute;
  top: 5175px;
  left: 5595px;
  z-index: 2999;
}
.reddit{
  position: absolute;
  top: 5167px;
  left: 5693px;
  z-index: 3000;
}
.vermeer {
  position: absolute;
  top: 3076px;
  left: 6683px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  z-index: 30000;
}
.cindy {
  position: absolute;
  top: 1901px;
  left: 7537px;
  border-right: 20px ridge #d06e92;
  border-top: 20px ridge #d06e92;
  border-bottom: 20px ridge #d06e92;
  border-left: 20px ridge #d06e92;
  z-index: 30000;
}
.traps{
  position: absolute;
  top: 2124px;
  left: 8366px;
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  transform: rotate(-5deg);
}
.curtain{
  position: absolute;
  top: 1814px;
  left: 7608px;
  z-index: 40000;
  filter: hue-rotate(90deg);

}

.lovers{
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  width: 260.5px;
  position: absolute;
  top: 5228.5px;
  left: 1314px;
  z-index: 3000;
}

.drag{
  border-right: 20px ridge #d07a6e;
  border-top: 20px ridge #d07a6e;
  border-bottom: 20px ridge #d07a6e;
  border-left: 20px ridge #d07a6e;
  width: 400.5px;
  position: absolute;
  top: 5223.5px;
  left: 2495px;
  z-index: 3000;
}

.trash{
  width: 70.5px;
  position: absolute;
  top: 1133.5px;
  left: 2498px;
  z-index: 3000;
  filter:contrast(70%)
}



.draggable:hover {
    cursor: move;
    cursor: -moz-move;
    cursor: -webkit-move;
    z-index: 99999999;
}
.draggable:hover::after {
   position: absolute;
    top: 50%;
    left: 50%;
    content: "drag me";
    backdrop-filter: blur(20px);
    font-family: 'Syne', sans-serif;
    padding: 1rem;
    border-radius: 50px;
    color: white;
}





.buis{
  position: absolute;
  top: 549px;
  left: 506px;
  z-index: 9;
}
.buis2{
  position: absolute;
  top: 239.5px;
  left: 818.5px;
  transform: rotateY(180deg);
}
.palm{
  position: absolute;
  top: 224px;
  left: 476.5px;
  transform: rotateY(180deg);
}
.palm2{
  position: absolute;
  top: 533.5px;
  left: 805.5px;
  transform: rotateY(180deg);
}
.tree{
  position: absolute;
  top: 1111.5px;
  left: 1387.5px;
  z-index: 2;
  
}
.tree2{
 
  width: 1306.5px;
  height: 1927.5px;
  position: absolute;
  top: 5103.5px;
  left: 6912px;
  background-image: url(https://textures.neocities.org/textures/plants/cc301003.png);
  background-size: 436px;
  z-index: 30;
  
}
.tree3{
 
  width: 1180.5px;
  height: 1725.5px;
  position: absolute;
  top: 5477.5px;
  left: 7158px;
  background-image: url(https://textures.neocities.org/textures/plants/cc301003.png);
  background-size: 295px;
  z-index: 3000;
  
}
.tree4{
 
 width: 291.5px;
  height: 442.5px;
  position: absolute;
  top: 5477.5px;
  left: 6654px;
  background-image: url(https://textures.neocities.org/textures/plants/cc301003.png);
  background-size: 295px;
  z-index: 3000;
  
}
.tree5{
 
 width: 291.5px;
  height: 686.5px;
  position: absolute;
  top: 6123.5px;
  left: 7583px;
  background-image: url(https://png.pngtree.com/png-clipart/20220915/ourmid/pngtree-sanchezia-nobilis-bush-png-image_6176139.png);
  z-index: 300;
  
}

.bird{
  position: absolute;
  top: 573.5px;
  left: 851px;
  transform: rotateY(180deg);
}
.flower{
  width: 200px;
  height: 73px;
  position: absolute;
  top: 4311px;
  left: 3926.5px;
  background-image: url(https://textures.neocities.org/textures/plants/qhd50025.jpg);
  background-size: 100px;
  z-index: 2000;
}
.flower2{
  width: 200px;
  height: 73px;
  position: absolute;
  top: 4311px;
  left: 4326.5px;
  background-image: url(https://textures.neocities.org/textures/plants/qhd50025.jpg);
  background-size: 100px;
  transform: rotateY(180deg);
  z-index: 2000;
}
.flower3{
  position: absolute;
  top: 4325.5px;
  left: 4077px;
}
.flower4{
  width: 199px;
  height: 101.5px;
  position: absolute;
  top: 4748.5px;
  left: 3922.5px;
  background-image: url(https://web.archive.org/web/20091021165800if_/http://www.geocities.com/lafemme2004/pretty_flower_pink_lg_clr.gif);
  background-size: 100px;
  z-index: 2000;
}
.flower5{
  width: 199px;
  height: 101.5px;
  position: absolute;
  top: 4748.5px;
  left: 4329px;
  background-image: url(https://web.archive.org/web/20091021165800if_/http://www.geocities.com/lafemme2004/pretty_flower_pink_lg_clr.gif);
  background-size: 100px;
  z-index: 3000;
  transform: rotateY(180deg);
}
.flower6{
  width: 194px;
  height: 98px;
  position: absolute;
  top: 4748.5px;
  left: 4129.5px;
  background-image: url(https://textures.neocities.org/textures/plants/flowr1.jpg);
  background-size: 100px;
  z-index: 3000;
}
.fountain2{
  width: 747.5px;
  height: 151.5px;
  position: absolute;
  top: 4884.5px;
  left: 2290px;
  background-image: url(https://web.archive.org/web/20090829223441/http://www.geocities.com/parkerhouse_2000/wtrfountain.gif);
  background-size: 150px;
  z-index: 3000;
}
.bridge{
  position: absolute;
  top: 2598px;
  left: 403px;
  z-index: 3000;
}
.bridge2{
  position: absolute;
  top: 2506px;
  left: 3899px;
  z-index: 30000;
}
.playground{
  position: absolute;
  top: 3248px;
  left: 1805px;
  z-index: 30000;
}
.grass{
  width: 1375.5px;
  height: 1188.5px;
  position: absolute;
  top: 3059.5px;
  left: 1886px;
  background-image: url(https://blob.gifcities.org/gifcities/6CGC32FDDNPGPBZUORZ7BNAZ4T4273SD.gif);
  background-size: 203px;
  z-index: 3000;
  border-right: 20px ridge #d66a5b;
  border-top: 20px ridge #e8e549;
  border-bottom: 20px ridge #6e9ad0;
  border-left: 20px ridge #247233;
}
.bench{
  width: 965.5px;
  height: 233.5px;
  position: absolute;
  top: 4296.5px;
  left: 1959px;
  background-image: url(https://www.dressityourself.co.uk/wp-content/uploads/2021/03/Old-Garden-Bench-120cm-x-89cm-x-52cm.png);
  background-size: 242px;
  z-index: 30001;

}



.elements{
  height: 10000px;
}
.titleclick{
  color: #57fd5a;
  font-size: 20px;
  text-shadow: rgba(0, 0, 0, 0.667) 2px 2px 2px;
  line-break: auto;
  pointer-events:all;
  
}
/* Popup container */
.popup {
  position: sticky;
  padding: 2px;
  top: 28.5px;
  left: 27px;
  display: inline-block;
  cursor: pointer;
  z-index: 9999999999;
  pointer-events:none;
}
/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 388px;
  color: #57fd5a;
  display:inline-block;
  position: sticky;
  z-index: 9999999999;
  left: 10px;
  margin-left: 20px;
  margin-top: 20px;
  font-size: 20px;
  text-align: justify;
  text-justify: none;
  
  text-shadow: rgba(0, 0, 0, 0.667) 2px 2px 2px;

}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 


html {
  
  width: 4000%;
  
  
  
  
}