/* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
    left: 0;

}


.right {
  right: 0;

}

body {
background: #8EA34B;
/*background: linear-gradient(143deg, rgba(142, 163, 75, 1) 0%, rgba(225, 240, 161, 1) 100%);*/
  margin: 0;
  padding: 0;
}


/* Split the screen in half */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

/* Control the left side */
.left {
    left: 0;
  border-width: 0 7px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(135, 20, 30, 0.3), rgba(150, 70, 10, 0.3)
    ) 1 100%;    
}




.right-topright {
    position: fixed;
    height: 50%;
    right: 0;
    width: 25vw;  /* 4 items per row */
    top: 0; 
    height: 50%;
}

.right-topleft {
    position: fixed;
    height: 50%;
    top: 0; /* 2 rows */    
  left: 50%;
  width: 25%;  /* 4 items per row */

}

.right-bottomright {
    position: fixed;
    right: 0;
        bottom: 0;
  width: 25%;  /* 4 items per row */
  height: 50%; /* 2 rows */
}

.right-bottomleft {
    position: fixed;
    left: 50%;
    bottom: 0;
  width: 25%; 
  height: 50%;
}



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.floating {
   position: -webkit-sticky;
   position: sticky;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 9999;
}




.rest {

    width: 100%;
    height: 50%; /* Maintain aspect ratio */
  position: absolute;
  top: 0%;
  right: 0%;
}


body .imageEditorContainer {
  --background-color-1: rgba(256, 256, 256, 0);
  --foreground-color-1: black;
}

/* Mobile portrait mode optimizations */


.svg-filter-1 {
    filter: brightness(0) saturate(100%) invert(24%) sepia(93%) saturate(2739%) hue-rotate(162deg) brightness(96%) contrast(97%);
}

.svg-filter-2 {
    filter: brightness(0) saturate(100%) invert(81%) sepia(48%) saturate(5407%) hue-rotate(116deg) brightness(96%) contrast(95%);
}

.svg-filter-3 {
    filter: brightness(0) saturate(100%) invert(82%) sepia(8%) saturate(7498%) hue-rotate(164deg) brightness(94%) contrast(96%);
}

.svg-filter-4 {
    filter: brightness(0) saturate(100%) invert(60%) sepia(9%) saturate(1533%) hue-rotate(202deg) brightness(93%) contrast(85%);
}

.svg-filter-5 {
    filter: brightness(0) saturate(100%) invert(37%) sepia(10%) saturate(469%) hue-rotate(332deg) brightness(94%) contrast(79%);
}