/* Split the screen in half */
.split {
  height: 100dvh;
  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(208, 120, 180, 0.7),
	rgba(180, 90, 160, 0.8)
    ) 1 100%;
}
/* Control the right side */
.right {
  right: 0;
/*  background-color: red; */
}

body {
    background: #D3E390;
    /* background: linear-gradient(238deg, rgba(211, 227, 144, 1) 0%, rgba(174, 230, 96, 1) 42%, rgba(196, 232, 111, 1) 100%); */
    background: linear-gradient(180deg, rgba(211, 227, 144, 1) 0%, rgba(196, 232, 111, 1) 22%, rgba(255, 255, 255, 1) 60%);
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


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



/* Control the right side */
.right {
/*  background-color: #FFFFE8; */
}

.right-topright {
    position: fixed;
    height: 50dvh;
    right: 0;
    width: 25dvw;  /* 4 items per row */
    top: 0;
    overflow: hidden;
}

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

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

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



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

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

.waveform {
  width: 200%;
  top: 50%;
  position: absolute;
bottom: 0;
overflow: hidden;
  height: auto; /* Maintain aspect ratio */
  /* CSS filter to make waveform stroke appear thicker */
  filter:
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 0.5px black)
    drop-shadow(0px 0px 1px black);
}



.stem {
  position: absolute;
right: 14%;
top: 27%;
  width: 25%;
height: auto;
  top: 0;
}

body .imageEditorContainer {
  --background-color-1: rgba(255, 255, 255, 0);
  --background-color-2: rgba(255, 255, 255, 0);
  --background-color-3: rgba(255, 255, 255, 0);
  --primary-background-color: rgba(255, 255, 255, 0);

}

/* Mobile portrait mode optimizations */
@media screen and (orientation: portrait) {
    body {
	background: rgba(211, 227, 144, 1);
	background-repeat: no-repeat !important;
	background-attachment: scroll !important;
  }

  .left {
    border-image: none !important;
    border-right: 3px solid rgba(208, 120, 180, 0.5) !important;
    background: transparent !important;
  }

  .right {
    background: transparent !important;
  }

  .split, .right, .left,
  .right-topleft, .right-topright,
  .right-bottomleft, .right-bottomright {
    overflow: hidden !important;
  }
}