.garden_container{
    width:800px;
    height:600px;

    overflow:scroll;
    overscroll-behavior:none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#testbutton{
    position:absolute;
    left:10px;
    top:10px;

    width:120px;
    height:20px;

    background-color: red;
    color:white;

    z-index: 100;
}

.tile_containerm{
    position:relative;
    height:100px;
    width: 150px;
}

.tile_floorm{
    width:100px;
    height:100px;
    
    transform: rotateX(60deg) rotate(45deg);
    position:relative;
    left: 22px;
}

.tile_objectm{
    width: 200px;
    height: 200px;
    position: relative;
    top: -209px;
    left: -23px;

    filter:drop-shadow(3px 3px 3px rgb(0, 0, 0));

    background-repeat:no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;

    background-size:200px;
    
}

.rotate_l{
    transform: rotateX(60deg) rotate(45deg) rotateY(90deg) rotateZ(270deg);
    position:absolute;
}
.rotate_m{
    position:absolute;
    
}
.rotate_r{
    transform: rotateX(60deg) rotate(135deg) rotateY(90deg) rotateZ(270deg);
    position:absolute;
}
.rotate_floor{
    transform: rotateX(60deg) rotate(45deg);
    position:absolute;
}

.rotate_upl{ /* Tilted up and left, at a 45 degree angle */
    transform: rotateX(60deg) rotate(45deg) rotateY(45deg) rotateZ(270deg);
    position:absolute;
}

.rotate_upr{ /* Tilted up and right, at a 45 degree angle */
    transform: rotateX(60deg) rotate(135deg) rotateY(45deg) rotateZ(270deg);
    position:absolute;
}

.deco_single{
    /* For decorations that use a single texture, since images are annoying */
    background-repeat:no-repeat;
    background-size: contain;
}



.garden_container::-webkit-scrollbar {
  display: none;
}

.garden_content{
    position:relative;
    overflow:hidden;
}

#dummysquare{
    width:100px; height:100px; top: 1px; left: 1px; background-color: black;
}

#menu-placemode{
    width:800px;
    height:75px;

    position:relative;
    z-index:101;
    top:20px;

    pointer-events: none;
    
    background: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 80%, rgba(0, 0, 0, 0.8) 100%);
    


    display:flex;
    flex-direction: row;
    align-items:start;
    justify-content: space-between;
}

#menu-placemode-infocontainer{
    height:70%;

    margin-left:100px;

    display:flex;
    flex-direction: row;
    align-items: center;
}

#menu-placemode-icon{
    width: 50px;
    height: 50px;

    position: relative;

    background-color: white;
    filter:drop-shadow(0px 0px 5px white);

    background-size: 500px 500px;

    animation-name: placemodeIconCircle;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes placemodeIconCircle{
    0%{top:2px;}
    50%{top:-2px}
    100%{top:2px;}
}

#menu-placemode-name{
    font-size:20px;
    font-weight: bold;
    color: white;
    margin-left:20px;
    filter:drop-shadow(1px 1px 1px black)
}

#menu-placemode-cancelbutton{
    width:75px;
    height:30px;

    margin-top:8px;
    margin-right:100px;

    background-color: rgba(226, 226, 226, 0.9);

    font-size: 21px;

    pointer-events:all;
    cursor: pointer;

    display:flex;
    align-items: center;
    justify-content: center;
}

#menu-placemode-cancelbutton:hover{
    background-color: rgba(209, 209, 209, 0.9);
}








/* Tile floor classes classes */

.tilestyle_pinkandgold{
    background-image:linear-gradient(0deg,rgba(255, 59, 199, 1) 0%, rgba(252, 234, 70, 1) 100%); 
}

.tilestyle_simplebrown{
    background-color:rgb(94, 68, 55);
}

.tilestyle_forrestgreen{
    background-color:#54673a;

    opacity:80%;
}




/* Styling for hub area */

#hub-container{
    background-color: rgb(89, 244, 255);
}

#hub-floor{
    z-index: 0;
    background-image: url(../assets/textures/grass_test.png);
    background-repeat: repeat;
    background-size: 150px;
    width:1500px;
    height:1500px;

    top: -419px;
  left: -349px;
}

#hub-roadlong{
    z-index: 1;
    background-image: url(../assets/textures/asphalt_hub_roadline.png);
    background-size:200px;
    width:200px;
    height: 1500px;
    top: -301px;
    left: 274px;
}

#hub-roadexit{
    z-index: 1;
    background-image: url(../assets/textures/asphalt_hub.png);
    background-size:200px;
    height:200px;
    width:600px;

    top: 461px;
  left: 411px;
}

#hub-roadexitcontainer{
    width:400px;
    height:200px;
    z-index: 2;
    background-image: linear-gradient(90deg, rgba(255, 0, 0, 0), rgb(4, 4, 4, 0), rgb(255, 255, 255, 50));
    background-size:200%;
    background-position-x: -100px;
    opacity: 50%;
    top: 434px;
    left: 459px;

    display:flex;
    align-items: center;
    justify-content: center;

    transition:0.2s;

    cursor:pointer;
}

#hub-roadexitcontainer:hover{
    background-position-x: -300px;
}

#hub-roadexitarrow{
    rotate:-90deg;
    opacity: 80%;
    width:75px;

    position:relative;

    left:-50px;

    animation-name:hubArrowIdle;
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

@keyframes hubArrowIdle {
    0%{left:-50px}
    50%{left:-35px}
    100%{left:-50px;}
}


#hub-store1-wallsouth{
    z-index:30;
    width:100px;
    height:100px;

    top: 380px;
    left: 8px;

    background-color: rgb(72, 102, 158);
    background-image:url(../assets/textures/woodlogwall.png);
}

#hub-store1-roof{
    z-index:35;
    width:100px;
    height:200px;

    top: 251px;
    left: 77px;

    background-color: #5d4837;
}


#hub-store1-walleast{
    z-index:30;
    width:200px;
    height:100px;

    top: 361px;
    left: 61px;

    background-color: rgb(75, 109, 172);
    background-image:url(../assets/textures/woodlogwall.png);
}

#hub-store1-sign{
    z-index:40;
    width:150px;
    top: 327px;
    left: 84px;
}



#hub-bar-walleast{
    z-index: 29;
    width:200px;
    height:200px;

   background-color: rgb(172, 159, 75);
    background-image: url(../assets/textures/brickswalldark.png);
    top: 141px;
    left: 313px;
}

#hub-bar-wallsoutheast{
    z-index: 29;
    width: 100px;
    height: 173px;
    background-color: rgb(156, 144, 67);
    background-image: url(../assets/textures/brickswalldark.png);
    background-size: 40px;
    position: absolute;
    top: 190px;
    left: 242px;
}

#hub-bar-wallsouth{
    z-index: 29;
    width:100px;
    height:200px;

    background-color: rgb(148, 137, 65);
    background-image: url(../assets/textures/brickswalldark.png);
    

    top: 159px;
    left: 157px;
}

#hub-bar-roofeast{
    z-index:30;
    width:200px;
    height:100px;

    background-color: #03420b;

    top: 62px;
    left: 287px;
}

#hub-bar-roofsouth{
    z-index:30;
    width:100px;
    height:100px;

    background-color: #03420b;
    top: 79px;
    left: 182px;
}

#hub-bar-rooftop{
    width:100px;
    height:200px;
    background-color: #06510f;
    top: -48px;
    left: 278px;
}

#hub-bar-rooffilling{
    background-color: #03420b;
    width: 104px;
    height: 96px;
    z-index: 28;
    position: absolute;
    top: 103px;
    left: 242px;
}


#hub-bar-sprayletters{
    z-index: 30;
    top: 151px;
    left: 293px;
    width: 239px;
    opacity: 59%;

    pointer-events: none;
}









/* Styling for test garden */

#garden-test-content{
    width:1000px;
    height:1000px;
    background: #03420b;
    background: linear-gradient(153deg,rgba(3, 66, 11, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(76, 115, 9, 1) 100%);
}

#floor-test{
    z-index: 0;
    background-image: url(../assets/textures/grass_test.png);
    background-size:200px;
    height: 2545px;
  width: 2806px;
  top: -646px;
  left: -905px;
}

#wall-test-l{
    background-image:url(../assets/textures/bricks_test.png);
    background-size:100px;
    width:600px;
    height:400px;
    z-index: 5;

    left: -104px;
    top: -155px;
}


#wall-test-m{
    background-image:url(../assets/textures/bricks_test.png);
    background-size:90px;
    width:550px;
    height:542px;
    z-index: 2;

    left: 228px;
     top: -427px;
}

#wall-test-r{
    background-image:url(../assets/textures/bricks_test.png);
    background-size:100px;
    width:600px;
    height:400px;
    z-index: 5;

    left: 590px;
    top: -155px;
}

#deco-test-door{
    background-image:url(../assets/door_creepy.png);
    z-index:60;
    width:75px;
    height:156px;
    top: 22px;
    left: 257px;
}

#deco-test-exitsign{
    background-image:url(../assets/exitsigntemp.png);
    z-index:60;
    width:50px;
    height:25px;
    top: 8px;
  left: 268px;
}


#tilecont-test1{
    left: 154px;
    top: 200px;

    z-index:51;
}

#tilecont-test2{
    left: 154px;
    top: 460px;

    z-index:52;
}

#tilecont-test0{
   left: 616px;
  top: -79px;
  z-index: 53;
}








/*    Urrall    */

#garden-urrall-content{
    width:1000px;
    height:1000px;
    background: #03420b;
    background-image: url(../assets/backgrounds/urrall_clouds.png);
    background-size: 200px 200px;
}

#floor-urrall-south{
    top: 102px;
  left: -372px;

    width:1500px;
    height:1500px;
    background-image: url(../assets/textures/grass_smoother.png);

    filter:saturate(40%);

    z-index:0;
}

#floor-urrall-east{
top: -176px;
  left: 583px;

    width:1000px;
    height:1000px;
    background-image: url(../assets/textures/grass_smoother.png);

    filter:saturate(40%);

    z-index:0;
}

#fence-urrall-paddockfence{
    background-image: url(../assets/decorations/urrall-fence.png);
    top: 412px;
  left: 238px;
    width:1000px;
    height:100px;
    background-repeat:repeat-x;
    background-size: auto 100px;

    z-index: 25;
}

#fence-urrall-roadtrees{
    background-image:url(../assets/decorations/urrall-treeline2.png);
    width:2000px;
    height:300px;
    background-repeat:repeat-x;
    background-size: auto 300px;

top: -304px;
  left: -386px;

  z-index: 24;
}

#floor-urrall-roadlong{
    z-index: 1;
    background-image: url(../assets/textures/asphalt_hub_roadline.png);
    background-size:150px;
    filter:invert(14%);
    width:150px;
    height: 1500px;
    top: -563px;
    left: 274px;
}

#floor-urrall-roadgrass{
    z-index: 0;
    background-image: url(../assets/textures/grass_smoother.png);
    background-size:150px;
    filter:hue-rotate(-20deg) saturate(60%);
    width:250px;
    height: 1500px;
    top: -581px;
    left: 274px;
}

#fence-urrall-roadplants{
    background-image:url(../assets/decorations/urrall-roadplants.png);
    width: 2000px;
    height: 200px;
    background-repeat: repeat-x;
    background-size: auto 200px;
    top: 18px;
    left: -386px;
    z-index: 24;
}

#floor-urrall-puddle{
    position: absolute;
    background-image: url(../assets/decorations/urrall-puddle.gif);
    width:283px;
    height:161px;
    background-size: 283px 161px;
    top: 357px;
  left: 276px;
    filter:opacity(90%);
    z-index: 24;
}

#tilecont-urrall0{
    z-index:51;
    top: 169px;
  left: 775px;
}

#tilecont-urrall1{
    z-index:51;
    top: 360px;
  left: 43px;
}

#obj-urrall-exitsign{
    top: 143px;
  left: 18px;

    z-index: 24;
}