:root {
    --main-bg-color: #e994f4;
    --main-fg-color: #e7e7e7;
    --controls-width: 100px;
}

#main-window[chromehidden*="toolbar"] #nav-bar {
    visibility: collapse;
}

* {
    box-sizing: border-box;
    user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    font-family: 'Courier New', Courier, monospace;
}


::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

.sidebar {
    font-family: 'Courier New', Courier, monospace;
}

body { 
    margin: 0px; 
    /*padding: 20px; */
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    font-size: 0.8em;
}

.pagewithtitle {
    padding:0px;
    margin:auto;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

@media (orientation: landscape) {
    .pagewithtitle {
        width: 100vh;
        height: 100vh;
    }
    .modal-content {
        width: 95vh;
        height: 60vh;
    }
}

@media (orientation: portrait) {
    .pagewithtitle {
        width: 100vw;
        height: 100vw;
    }
    .modal-content {
        width: 95vw;
        height: 60vw;
    }
}

#mainimagecontainer {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.mainimage {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.wateroverlay {
    position: absolute;
    width: 68%;
    height: 68%;
    top: 13.4%;
    left: 16%;

}

.overlayimage {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
}

#aebox {
    left: 40.2%;
    top: 24.5%;
    width: 7%;
    height: 5.3%;
}

#psbox {
    left: 38.6%;
    top: 20.3%;
    width: 7.2%;
    height: 5.2%;
}

#prbox {
    left: 56.1%;
    top: 23.9%;
    width: 6.5%;
    height: 4.9%;
}

#waterer {
    left: 47%;
    top: 23.1%;
    width: 8.9%;
    height: 7.5%;
}

#stalk {
    left: 46.9%;
    top: 9.1%;
    width: 14%;
    height: 19.3%;
}

#plant {
    left: 46.7%;
    top: 11.7%;
    width: 5.7%;
    height: 7.3%;
}

#log3 {
    left: 65.8%;
    top: 60.3%;
    width: 10.7%;
    height: 4.5%;
}

#log2 {
    left: 62.4%;
    top: 58.1%;
    width: 12.1%;
    height: 5.1%;
}

#log1 {
    left: 58.9%;
    top: 56.0%;
    width: 14.8%;
    height: 6.2%;
}

#islandr {
    left: 64.2%;
    top: 62.3%;
    width: 19.9%;
    height: 8.6%;
}

#islandl {
    left: 16.2%;
    top: 66.8%;
    width: 13.6%;
    height: 8.6%;
}

#ladder {
    left: 67%;
    top: 40.4%;
    width: 6.3%;
    height: 6.5%;
}

#rope {
    left: 52.8%;
    top: 60.4%;
    width: 5.0%;
    height: 10.6%;
}

#door {
    left: 22.3%;
    top: 57.7%;
    width: 8.3%;
    height: 8.2%;
}

#cloud1 {
    left: -30%;
    top: 10%;
    width: 19.0%;
    height: 13.6%;
    z-index: 1;
}

#cloud2 {
    left: -60%;
    top: 30%;
    width: 19.6%;
    height: 8.8%;
}

.cloud {
    position: absolute;
    transition-duration: 20s;
    animation-name: cloudy;
    animation-timing-function: linear;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    transform-origin: center;
}


@keyframes cloudy {
    0%   { transform: translateX(0); opacity: 1;}
    90%  { transform: translateX(180vw); opacity: 1;}
    91%  { transform: translateX(180vw); opacity: 0;}
    92%  { transform: translateX(0); opacity: 0;}
    100%  { transform: translateX(0); opacity: 1;}
}



.active {
    transition-duration: 2s;
    animation-name: bouncy;
    animation-timing-function: linear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: center;
}


@keyframes bouncy {
    0%   { transform: scale(1,1)      translateY(0)    translateX(0); }
    25%  { transform: scale(1.1,1.1)   translateY(2%)  translateX(1%); }
    75%  { transform: scale(0.9,0.9)   translateY(-2%)  translateX(-1%); }
    100%  { transform: scale(1,1)      translateY(0)    translateX(0); }
}

  /* The Modal (background) */
  .modal {
    visibility: hidden;
    position: fixed;
    opacity: 0;
    z-index: -1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: none; 
    /*background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    transition: all .5s ease-in-out;
  }

  .show {
      visibility:visible;
      z-index: 100;
      opacity: 1;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
  }
  
  /* Modal Content/Box */
  .modal-content {
    /*background-color: #555;*/
    background-color: none;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto; 
    padding: 20px;
/*    border: 1px solid #888;
    border-radius: 10px;*/
    border: none;
    font-size: 1.5em;
    font-weight: bold;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }
  
  #closework {
      position: absolute;
      top: -0.75em;
      right: -0.75em;
      width: 1.5em;
      height: 1.5em;
      background-color: #202020;
      border-radius: 1em;
      line-height: 1.5em;
      text-align: center;
  }

  #closework .material-icons {
    line-height: unset;
  }

  .sidebar {
    font-size: 20;
  }