.scratch-font {
  font-size: 23px;
}

#head-gif {
  background-image: url('../src/headmedium00.png');
  background-repeat: no-repeat;
  /*background-position: center;*/
  width: 100%;
  height: 300px;
}

#body-gif {
  background-image: url('../src/body00.png');
  background-repeat: no-repeat;
  /*background-position: center;*/
  width: 100%;
  height: 300px;
}

.scratchImage {
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  
}

.headerBar{
  width: 100%;
  height: 63px;
  background-color: #f5f4f4;
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px;
}

.createQuestionBtn{
  float: right;
  margin-top: 13px;
  margin-right: 13px;
  width: 125;
  cursor: pointer;

  border: 3px solid #78fb83;
  height: 40;
  border-radius: 30px;
  background-color: #78fb83;

  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  
}

.createQuestionBtndisabled{
  float: right;
  margin-top: 13px;
  margin-right: 13px;
  width: 125;
  cursor: not-allowed;
  
  border: 3px solid #afafaf;
  height: 40;
  border-radius: 30px;
  background-color: #afafaf;
  color: #666;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  
}

.showme{ 
  opacity: 0;  
  transition: opacity 0.5s 0.2s;

}
.showhim:hover .showme{
  opacity: 1;  
  transition: opacity 0.5s 0.3s;
}

.test{
  border: 3px solid #ff7b52;
  width: 45;
  height: 45;
  border-radius: 30px;

  -webkit-transition: 0.5s; /* Safari */
  transition: 0.5s;
}

.test:hover{
  -webkit-transition: 0.5s;
  transition: 0.5s ;
}

.btnList {
  border: 3px solid #ff7b52;
  width: 45;
  height: 45;
  border-radius: 30px;
}


.clickShadow:hover {
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
}

.clickShadow:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.hoverShadow:hover {
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
}

.btnGP{
  font-size: 30;
  margin-top: 4;
  padding-left: 7;
  transition: all .1s ease-in-out;
  /*color: #2e7af5;*/
}

.btnGP:hover{
  transform: scale(1.1);
}

.btnGP:active {
  transform: scale(0.95);
  transform: translateY(2px);
}



.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: #2df5e4;
  border: none;
  border-radius: 50px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: default;
    /* color: #495057; */
    /* background-color: #fff; */
    /* border-color: #dee2e6 #dee2e6 #fff; */
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.non-active:hover {
  background-color: #e8e8e8;
  border: none;
  border-radius: 50px;
  cursor: default;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.non-active {
  border: none;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: default;
}

.grow { transition: all .1s ease-in-out; }
.grow:hover { transform: scale(1.1); }
.grow:active { transform: scale(0.95); transform: translateY(2px);}

.blocklyMainBackground{
  fill: #d0d0d0 !important;
}

.blocklyFlyoutBackground{
  fill: #e4e3e3 !important;
}

.viewBtn{
  position: absolute;
  margin-top: 350;
  margin-left: 345px;
  background-color: #777676;
  color: white;
  font-size: 20;
  border-radius: 30px;
  width: 130;
  height: 35px;

  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}


svg:not(:root) {
  overflow: hidden;
  border-bottom-left-radius: 25px; 
  border-bottom-right-radius: 25px;
}

.blocklyScrollbarHandle {
    fill: #f5f4f4 !important;
}

.blocklyScrollbarBackground {
    fill: #c4c1c1 !important;
    /*opacity: 100 !important; */
}

.scratchRightBar {
  margin-top:-5px; width: 100% ; background-color: #e6e5e5; border-bottom-left-radius:25px; border-bottom-right-radius:25px;
}

@keyframes head {
  0%   { background-image: url('../src/headmedium00.png'); } 
  25%  { background-image: url('../src/headmediumright01.png'); }
  50%  { background-image: url('../src/headmediumright02.png');}
  75%  { background-image: url('../src/headmediumright03.png'); }
  100%  { background-image: url('../src/headmediumright04.png'); }
}

@keyframes body {
  0%   { background-image: url('../src/body00.png'); } 
  25%  { background-image: url('../src/body01.png'); }
  50%  { background-image: url('../src/body02.png');}
  75%  { background-image: url('../src/body03.png'); }
  100%  { background-image: url('../src/body04.png'); }
}

.tcm {
  font-family: 'tcm';
  font-size: 23; 
}

@font-face {
  font-family: 'tcm';
  src: url(../src/tcm.ttf) format('truetype');
}

@media screen and (max-width:1200px){
  .blocklyPanel { 
    padding-left : 30px;
  }
}
@media screen and (min-width:1200px){
  .blocklyPanel { padding-left : 0px;}
} 

@media screen and (max-width:1200px){
  .mainMargin { 
    margin-bottom: 90px;"
  }
}
@media screen and (min-width:1200px){
  .mainMargin { 
    margin-bottom: 0px;"
  }
}