/* 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;

}

/* Control the right side */
.right {
  right: 0;
/*  background-color: red; */
}

body {
background: #357db8;
background: linear-gradient(197deg, rgba(53, 125, 184, 1) 1%, rgba(116, 172, 219, 1) 33%, rgba(116, 172, 219, 1) 46%, rgba(181, 125, 250, 1) 100%);
  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 left side */
.left {
    left: 0;
  border-width: 0 7px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(200, 200, 30, 0.3), rgba(200, 250, 180, 0.3)
    ) 1 100%;    
}

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

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

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

.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;
}

.notehead {
        width: 100%;
    height: 50dvh; 
  position: absolute;
  top: 0%;
  right: 0%;
}


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

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

/* Mobile portrait mode optimizations */
@media screen and (orientation: portrait) {
  .left {
    border-image: none !important;
    border-right: 3px solid rgba(200, 200, 30, 0.5) !important;
  }

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

.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%);
}


@media screen and (orientation: portrait) {
  body {
background: #357db8;
  }
  .split {
    position: absolute;
    width: 100%;
    height: 50%;

  }

  .right {
      width: 100%
  }
  .tap-btn {
  }
}