a {
            text-decoration: none;
            color:rgb(172, 62, 120);
  }
  
.gamescreen {
    background-color: rgb(50,30,100);
    height: 90vmin;
    aspect-ratio: 2 / 1;
    margin: auto;
    position: relative;
    border-style: solid;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

  }
  
.picture{
  height: 100%;
  aspect-ratio: 1 / 1;
  background-color: rgb(245, 242, 237);
  position: relative;
  border-style: solid;
  margin: 10px;
}

.menu{
  height: 100%;
  aspect-ratio: 1 / 1.25;
  border-style: solid;
  margin: 10px;
  position: relative;
  overflow-y: scroll;
  background-color: rgb(245, 242, 237);
}

  body {
    background-color: rgb(200,200,200);
  }
  
  
  
  .chara {
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  
  .submenu{
    border-style: solid;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-evenly;
    margin: 10px;
  }
  
  .colors {
    border-style: solid;
    margin: 10px;
    display: grid;
    grid-template-areas:
    "header header"
    "picker saves"
    "modeswitch saver";
    grid-template-columns: 3fr 1fr;
    gap: 3px;
  } 
  

  .saves {
    text-align: center;
    grid-area: saves;
  }
  
  .navbutton{
    border-style: solid;
    border-color: black;
    background-color: rgb(50,30,100);
    color: white;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
    font-family: Monospace;
    cursor: pointer;
  }
  
  .itembutton{
    border-style: solid;
    border-radius: 10px;
    cursor: pointer;
    aspect-ratio: 1;
    height: 150px;
    margin: 10px;
    
  }
  
  .menupage{
    align-self: stretch;
    display: none;
    overflow-y: scroll;
    min-height: 50%;

  }
  
  .spectrum {
    width:90%;
    margin-left: 5px;
    justify-self: start;
    border-style: solid;
    
  }
  
  .picker{
    grid-area: picker;
  }

  .header{
    grid-area: header;
  }
  
  .saver{
    grid-area: saver;
    text-align: center;
  }
  
  .modeswitch{
    grid-area: modeswitch;
  }
  
  .colorsquare{
    width: 90%;
    height:35%;
    margin-bottom: 5px;
    margin-right: 10px;
    opacity: 50%;
    border-style: solid;
    background-color: rgb(255,0,0);
  }
  
  
  #one {
    background-position: top left; 
  }
  #two{
     background-position: top right; 
  }
  #three{
     background-position: bottom left; 
  }
  #four{
     background-position: bottom right; 
  }

/* edited copy and paste from W3 schools page*/

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 90%; /* Full-width */
  height: 30px;
  margin-left: 5px;/* Specified height */
  background-image: url('colors/hue.jpg');
  background-size: 100% 100% ;
  border-style: solid;/* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 5px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #000000; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 5px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #000000; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

#backmask {
  -webkit-mask-image: url(backs/back1.png);  /*make sure to javascript change when change shape*/
  mask-image: url(backs/back1.png);
}

#bangsmask {
  -webkit-mask-image: url(bangs/bangs1.png);  /*make sure to javascript change when change shape*/
  mask-image: url(bangs/bangs1.png);
}

#eyemask {
  -webkit-mask-image: url(eyes/eyes1.png);  /*make sure to javascript change when change shape*/
  mask-image: url(eyes/eyes1.png);
}

#sidesmask {
  -webkit-mask-image: url(sides/sides1.png);  /*make sure to javascript change when change shape*/
  mask-image: url(sides/sides1.png);
}

#basecolor{
  -webkit-mask-image: url(base.png);  
  mask-image: url(base.png);
}

#accmask{
   -webkit-mask-image: url(icons/trans.png);  
  mask-image: url(icons/trans.png);
}

#shinymask{
   -webkit-mask-image: url(icons/trans.png);  
  mask-image: url(icons/trans.png);
}

#miscfacemask{
   -webkit-mask-image: url(icons/trans.png);  
  mask-image: url(icons/trans.png);
}

 .colorlayer{
   width: 100%;
  bottom: 0;
  position: absolute;
  background-image: linear-gradient(to bottom, gray, white);
  mask-repeat: no-repeat;  
  mask-size: 100%;
  mix-blend-mode: overlay;
 }
#hue-selector{
}
#sat-selector{
  background-image: url(colors/saturation.jpg);
}
#light-selector{}