:root {
  --background-color: #ccc;
  --desk-color: mintCream;
  --header-color: #fd7f7f;
  --border-radius: .6em;
  --box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

body{
  font-family:PT Sans, arial; 
  color:black;
  background-color: var(--background-color);
}
h1 {
  color:var(--desk-color);
  text-align:center;
}
.hiddenDiv {
  display: none;
}
#divOverlay {
  z-index: 11;
  display:block;position: 
  fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.25);
  cursor: pointer;
}
/* p elements */
.pInOut {
  border-radius: var(--border-radius);
}
.pMid {  /*Play local buffer, or start recorder.*/
  color: black;
  text-align:center;
  background: var(desk-color)
}
#pMsg { /*Display whole dictionary*/
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow-wrap: break-word;
}
.desk {
  margin-top:50px;
  margin-left:auto;
  z-index: -1;
  margin-right:auto;
  width:80%;
  background-color: var(--desk-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
.deskHeader {
  height: 50px;
  background-color: var(--header-color);
  height: 40px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

/* container canvas Balloon */
.contCanvasBalloon {
  position: relative; /* child div can position absolute */
  z-index: 10;
}
#divBasket {
  position: absolute;
  top: 24em;
  left: 2em;
}
#divCanvasBalloon {
  position: absolute;
  cursor: pointer;
  border-radius: 20em;
  background-color: cadetBlue;
  top: 18em;
  left: 3em;
  box-shadow: var(--box-shadow);
}
#canvasBalloon {
  background-color: turquoise;
  border-radius: 10em;
  width: 7em;
  height: 7em;
  box-shadow: 0 0 4px rgba(35, 173, 278, 1);  /* rgba(35, 173, 278, 1) */
}
/* background img wrap */
#svgSkyRight_wrapper {
    overflow: hidden;
}
#svgSkRight {
  position: relative;
  top: 10em;
  left: 10em;
  z-index: 0;
}
/* radio selectors */
.divRadioBtn {
  z-index: 10;
  border-radius: var(--border-radius);
  background-color: var(--desk-color);
}
#divRadioBtnHead {
  font-size:110%;
}
.divRadioBtn:hover {
  background-color: #ccc;
}
#divFlexContainer {
  display: flex;
}
.middle {
  display: flex;
  flex-direction: column;
  margin: auto;
  left: 10em;
}
/* bigger icons to click on */
.spanBigBtn {
  font-size: 150%;
  cursor: pointer;
}
/*                  ----- Edit -----                    */

/* audio controls */
#divControllerSlider {
  position: absolute;
  z-index: 11;
  background-color: var(--header-color);
  max-width: 20em;
  border-radius: var(--border-radius);
  text-align: center;
  padding: 5px;
  margin-top: 1em;
  box-shadow: var(--box-shadow);
}
/* p elem for icons of edit page */
.pEdit {
  margin:10px;
  background-color: var(--desk-color);
}
#pCopyRight {
  border-radius: var(--border-radius);
  text-align: center;
  padding: 5px;
}
/* parent of all edit divs */
#divEdit {
  width: 100%;
  background-color: var(--header-color);
}
/* div for icons of edit page */
#divEditCaller {
  background-color: var(--desk-color);
  padding: 5px;
  margin-top: 1em;
}
#divEditConfig {
 text-align: center;
  width: 100%;
  padding: 5px;
  margin-top: 1em;
}
#divEditBlacklist {
  text-align: center;
  width: 100%;
  padding: 5px;
  margin-top: 1em;
}
/* send altered text to server, to file system */
.btnSend {
  left: 50%;
  right: 50%;
  width: 80px;
  height: 40px;
  background: orange;
  font-size: 100%;
  cursor: pointer;
  border-radius: var(--border-radius);
}

/*                  ----- moving SVG -----                    */
#divMovingSVG {
  position: relative;
}
#divAirOne {
  position: absolute;
  max-width: 1em;
  max-height: 1em;
  transform: scale(3.25, 3.25);
  z-index:0;
  cursor: grab;
}
.draggable-div {
  /* drag refuses to work on mobile, keep else mobile drag touch moves around like crazy */
  touch-action: none;
}

/* --- radio buttons --- */

#divHeaderBar {
  text-align: center;
  width:100%;
}
#divHeaderWrapper {
  display: inline-block;
  text-align:center;
  width: 100%;
}
#divHeaderLeft {
  float:left;
  margin:auto;
}
#divHeaderRight {
  float:right;
}
#spanHeaderCenter {
  font-size: 175%;
  color:var(--desk-color);
}