*{
   font-family: ABeeZee;
   box-sizing: border-box;
   font-size:16px;
}
body{
    /* Disable pull to refresh on mobile*/
    overscroll-behavior-y: contain;

}
input[type=range]{
    
    -webkit-appearance: none;

}

input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width:48px;
    height:48px;
}
input[type=range]::-moz-range-thumb{
    -webkit-appearance: none;
    width:48px;
    height:48px;
}
input[type=range]::-ms-thumb{
    -webkit-appearance: none;
    width:48px;
    height:48px;
}

fieldset{
    text-align: center;
}
img {
  max-width: 100%;
  height: auto;
  border:1px solid #888;
background-color: white;
padding:5px;

}
button{
    all: initial;
    all: unset;
    margin-top:7px;
    
    
    
}
input, select{
    width:100%;
    margin:7px 7px 7px 0px;
    
    min-height:48px;
    
}
.gridItem{
    display:block;
    position:relative;
}
.gridBox{
    position:relative;
    display:grid;
    /* grid-template-columns:  30px 445px 30px; */
}
.image {
  background-color:#ccc;
  margin: auto 20px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
padding:10px;
margin:5px;
}
.clickablePic{
    transition: all 0.5s;
    width:100%
}
.clickablePic:hover,.clickablePic:active{
    transition: all 1s;
    cursor: pointer;
    transform: scale(120%);
    filter: brightness(140%);
    z-index: 50;
}

textarea{
    position: relative;
    display: block;
    font-size: 18px;
    resize: none;
    width:100%;
    height:100px;
    
}
.quote{
  display:block;
  position:relative;
  
  width:100%;
  margin:5px;
  padding:5px;
  border:1px solid #888;
  cursor:pointer;
}
select{
    position: relative;
    text-align: center;
    justify-content: center; 
    font-size:18px;
    height:22px;
}
.quote:hover,.quote:active{
    background:#ff9900cc;
}
legend{
    font-weight: 900;
    cursor: pointer;
    transition: all 0.5s;
    
}
legend::before{
    content: "<";
    color:#ffffff;
   position: relative;
   display: inline-block;
   transition: all 1.5s;
   
}
legend::after{
     content: ">";
     color:#ffffff;
    position: relative;
    display: inline-block;
    transition: all 1.5s;
    
}
legend:hover, legend:active{
    color:#ff9900;
}
legend:hover:after, legend:active:after,legend:hover:before, legend:active:before{
    position: relative;
    display: inline-block;
    color:#6b21f5;
    width:auto;
    overflow: inherit;
}

.myButton{
    /* color: white; */
    all: initial;
    all: unset;
    width:100%;
    margin:7px 7px 7px 0px;
    
    min-height:48px;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  justify-content: center;
  border:0.5px solid #888;
  display:inline-block;
  font-size:18px;
  
    color:#fff;
  background: hsl(208,55.8%,62.5%);
  /* box-shadow: 0 0 5px -1px rgba(0,0,0,0.2); */
  margin-top:-2px;
  vertical-align:middle;
  padding:2px;
  
  text-align: center;
}
.ord1{
    order:1;
}
.ord2{
    order: 2;
}
.myButton:active,.myButton:hover{
    /* box-shadow: 0 0 5px -1px rgba(0,0,0,0.6); */
    background:#DDD;
    background: hsl(208,55.8%,42.5%);
    cursor: pointer;
}
.quote span{
  display:block;
}
.quote span:before{
content: "";
}
canvas{

max-width:100%;
max-height:auto;
}
.controls{
/* display: none; */
 
}
.hidden{
    display:none;
}

.shrinkfield{
    height:48px;
    overflow: hidden;
}
.growField{
    min-width: 100px;
    margin-right:3px;
    padding-left:3px;
}
.ulButt{
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}
#fonts{
    margin-right:3px;
    max-width: 95%;
}
input[type=range]{
    pointer-events: none;
    touch-action: none;
    
  }
  input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chrome and Safari*/
    pointer-events: auto;
    touch-action: auto;
    border-radius: 3px;
    position: relative;
    top:-20px;
    background: transparent;
  background: hsl(208,55.8%,62.5%);
    min-width:48px;
    min-height:48px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  border-radius:25px;
  }
  input[type=range]::-moz-range-thumb{/*Firefox*/
    pointer-events: auto;
    touch-action: auto;
    min-width:48px;
    min-height:48px;
    background: hsl(208,55.8%,62.5%);
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  border-radius:25px;
  }
  input[type=range]::-ms-thumb{/*Internet Explorer*/
    pointer-events: auto;
    touch-action: auto;
    min-width:48px;
    min-height:48px;
    background: rgb(101, 156, 204);
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  border-radius:25px;
    
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: hsl(218,55.8%,22.5%);
    border-radius: 1.3px;
    border: 0.2px solid #010101;
  }
  
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #367ebd;
  }
  
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    background: hsl(218,55.8%,22.5%);
    border-radius: 1.3px;
    border: 0.2px solid #010101;
  }
  
  input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
    
  }
  input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
  }
  input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
  }


  
/* Large screen media queries */
@media only screen and (min-width: 600px) {
    .ulButt{
      
        margin:initial;
        max-width: 250px;
    }
    fieldset{
        text-align: initial;
    }
    input, select{
        margin:7px 7px 7px 0px;
        min-width: initial;
        max-width: 250px;
        width:250px;
        /* min-height:48px;
        max-width:250px;
        width:250px; */
    }
    .myButton{
        max-width: 250px;
    }
    .flex{
        flex-direction: row;
        display: flex;
        justify-content:space-between;
    }
    range{
        min-width: initial;
        max-width:250px;
    }
    input[type=range]::-webkit-slider-thumb{
        border-radius:25px;
        min-width:28px;
        min-height:28px;
        width:28px;
        height:28px;
        top:-10px
    }
    input[type=range]::-moz-range-thumb{
       
        width:28px;
        height:28px;
    }
    input[type=range]::-ms-thumb{
       
        width:28px;
        height:28px;
    }
}