/*----------------------------
       Standard Features 
  -----------------------------*/

  html{
    background : linear-gradient(90deg, rgba(27, 118, 175, 1) 0%, rgba(23, 126, 184, 1) 1.8%, rgba(13, 147, 208, 1) 21.03%, rgba(0, 174, 239, 1) 50.28%, rgba(3, 167, 231, 1) 65.71%, rgba(20, 132, 190, 1) 94.89%, rgba(27, 118, 175, 1) 100%);
       scroll-behavior: smooth;
       font-family: 'Open Sans';
       overflow-x: hidden;
       overflow-y: auto;
     }
   
     .off{display: none;}
     .fade{opacity: 0;}
     .noC{pointer-events: none;}
     .center{text-align: center !important;margin:0 auto;}
   
     /*----------------------------
                Menu 
     -----------------------------*/
     
     .menuBtn{
       position: relative; 
       top:-340px;
     }
   
     .menuBtn:active{
       top:-338px !important;
   } 
     
     .menuTitle{
       text-align: center;
       color: white;
       font-size: 5em;
       margin:5px;
     }
     
     .menuNav{
       text-align: center;
       position: relative;
       top:170px;
       transition: opacity .5s;
     }
     
     #topPaste{
     position: absolute;
     top:-30px;
     left: 0px;
     width: 100%;
     z-index: 0;
     }
     
     .menuChar{
       position: relative;
       height: 440px;
       user-select: none;
       pointer-events: none;
     }
   
   
   
   /*----------------------------
                Info 
   -----------------------------*/ 
   .infoPage{
       margin-top: 380px;
       color:white;
       text-align: center;
       transition: opacity 2s;
   }
   
   .infoPage img{
       max-width: 90%;
       max-height: 400px;
   }
   
   .infoPage h1{
       text-align: center;
       font-size: 4em;
       margin: 0px;
   }
   
   .infoPage p{
     font-size: 2.3em;
   margin-top:-3px;
   max-width: 70%;
   text-align: left;
   margin:0 auto
   }


   /*----------------------------
           CSS Animations
   -----------------------------*/ 
   @keyframes bounce {
    0%   {transform:translate(0px, 0px);}
    50% {transform:translate(0px, 5px);}
    100% {transform:translate(0px, 0px);}
  }

  .bounce{animation-name: bounce;}
   
   
   /*----------------------------
            Game Page 
   -----------------------------*/ 
   .gamePage{
       margin-top: 140px;
       color:white;
       text-align: center;
       transition: opacity 2s;
   }
   
   .gamePage h1{
       text-align: center;
       font-size: 4em;
       margin: 0px;
   }
   
   #brushy{
       margin-top: -25px;
       height: 500px;
       margin-left:-100px;
       user-select: none;
     }

     #hat{
      position: relative;
      left:5px;
      top:-450px;
      user-select: none;
     }

     .tallHat{
      top: -390px !important;
     }
  

     #brushyPic{
      
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
   
   .controls,.shop{
       border-top: solid 5px white;
       width: 100%;
       height: 200px;
   }
   
   
   .btnInside{
       width:70px;
       height:70px;
       background : linear-gradient(135deg, rgba(101, 107, 108, 1) 0%, rgba(120, 125, 126, 1) 8.19%, rgba(156, 160, 162, 1) 26.76%, rgba(185, 188, 191, 1) 45.4%, rgba(206, 207, 211, 1) 63.89%, rgba(218, 219, 223, 1) 82.17%, rgba(222, 223, 227, 1) 100%);
       text-align: center;
       position: relative;
       top:10px;
       left: 10px;
       border-radius: 90px;
       filter:blur(3px);
       border-block-start-style: none;   
       }
       
       .btnOutside{
       user-select: none;
       display: inline-block;
       width:90px;
       height:90px;
       background-color: black;
       border-radius: 90px;
       cursor: pointer;
       background : linear-gradient(135deg, rgba(222, 223, 227, 1) 0%, rgba(218, 219, 223, 1) 17.83%, rgba(206, 207, 211, 1) 36.11%, rgba(185, 188, 191, 1) 54.6%, rgba(156, 160, 162, 1) 73.24%, rgba(120, 125, 126, 1) 91.81%, rgba(101, 107, 108, 1) 100%);
       box-shadow: rgba(0, 0, 0, 0.46) 2px 4px;
       margin:10px;
   }
       
       
   
   
   .btnOutside:hover > .btnText{color:#444444}
   .btnOutside:active{
       box-shadow: none;
       position:relative;
   top:1px;
   left: 1px;
   }
   
   
       .btnText{
           font-size: 20px;
           font-weight: bolder;
           color:#6D6E71;
           position: relative;
           top:-38px;
           left: 1px;
       }
       
   
       
   
   /*----------------------------
           Game Assets      
   -----------------------------*/
   .userInputBox{
       background-color: #FF9770;
       border: solid 2px white;
       z-index: 40000;
   
       margin-top:-10px;
       font-size: 1.5em;
       border-radius: 25px;
       padding: 15px;
       width: 300px;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-100%);
       transition: opacity 1s;
   }

   .endscreen{
    top: 465px;
   }
   
   .userInputBox input{
       width: 80%;
       padding:14px;
       font-size: .8em;
   }
   
   .cover{
     background-color: #000000a6;
     position: absolute;
     width: 100vw;
     height: 100vh;
     transform: translate(-50%,-50%);
     left: 50%;
     top: 50%;
     z-index: 30000;
     transition: opacity 1s;
   }
   
   .userInputBox .btnText{
      top:-41px;
   }
   
   
   #paste_drop{user-select: none;}
   
   .pasteProg{
       margin:0 auto;
       text-align: center;
       max-width: 300px;
       margin-top: 10px;
   }
   
   .pasteBar{
       background-color: white;
       width: 230px;
       height: 33px;
       border-radius: 15px;
       float: right;
   }
   
   .pasteLevel{
       background-color: #EA8B92;
       max-width: 100%;
       height: 33px;
       border-radius: 15px;
       width: 40%;
   }
   
   #gameStats{
       font-size: 2em;
       margin:0px;
       user-select: none;
   }


   .shopContainer{
 width: 100%;
 height: 100%;
 overflow-x: auto;
 overflow-y: auto;
   }

   .shopItem{
    margin-top:10px;
    border:solid 3px white;
    background-color: white;
    color:black;
    width: 100px; 
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
    user-select: none;
   }

   .shopItem:hover{box-shadow: black 3px 3px;}
   .shopItem:active{ transform: translate(3px,3px);box-shadow: none;}
   .off{display: none;}

   .tab{
    min-width:100px;
    max-width: 150px;
    height: 30px;
    border-radius: 10px 10px 0px 0px;
    background-color: white;
    color:#6D6E71;
    font-weight: bolder;
    font-size: 21px;
    user-select: none;
    cursor: pointer;
   }

   .tab:hover, tab:active{
    box-shadow: black 3px 2px 5px;
   }

 #tabTxt{
    position: relative;
    top:4px;
   }

 

   .move{
    transform:translate(0px, 5px);
    /*transform:rotate(-3deg)*/
    }