:root{
    --width:400px;
    --height:540px;

}

#wrapper{

size:var(--width) var(--height);
max-width: var(--width);
max-height: var(--height);
min-width: var(--width);
min-height: var(--height);

  position:absolute;
    padding: 10px;
    box-sizing: border-box;
        background-image: url("gameframe.png");
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;

overflow: hidden;

}
.edit{
    display: block;
}

.tab{
    overflow: hidden;



}
.tabcontent{
    display: none;
}
div{
    border: solid 0px;
    

}

h1{
    line-height: 0%;
}

#display{
    background-color: rgb(255, 189, 165);
    float: left;
    width: 50%;
    height: 100%;
}
#menu{
 background-color: #fffebe;
  float: right;
  width: 50%;
  height: 100%;
  flex: 1;
  font-size: small;
  margin: 2px;
  box-shadow: 1px 1px 5px 1px burlywood;
  z-index: 5;
  padding: 10px;
  border-radius: 8px;
  transform: rotate(-3deg);
  text-align: center;
}

img{
    position:absolute;
    mix-blend-mode: normal;

}


#clipping{
    background-color: red;mix-blend-mode: color;mask-image:url();
}

#game{
    float:left;
}
.colour{
    height: 500px;
    width: 400px;
    background-color: #808080;
    position: absolute;
    mask-mode:alpha;
    mask-repeat: no-repeat;
    pointer-events: none;

    

}

#eyedisplay{
    z-index: 0;
}

#colorpicker{
    border-radius: 50%;
  margin:auto auto 9px auto;
  width: 50px;
  height: 50px;
  background: green;
  shape-image-threshold: revert;
  outline: solid #fff676 7px;
  outline-offset: -7px;
  background-size: 5px;
}