@font-face {
    font-family: 'Blue-Pen';
    src: url('../fonts/Blue-Pen.otf');
  }
  
  .font-bluepen{
      font-family: 'Blue-Pen';
      color: #d41872;
      font-size: 60px;
      background: #d41872;
      background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }


  .font-blupen40{
    font-family: 'Blue-Pen';
    color: #d41872;
    font-size: 32px;
    background: #d41872;
    background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: linear-gradient(left, #a445b2, #d41872, #fa4299);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  } 

  .font-bluepen-grey{
    font-family: 'Blue-Pen';
    color: #9b9b9b;
    font-size: 60px;
    background: #9b9b9b;
    background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.font-blupen40-grey{
  font-family: 'Blue-Pen';
  color: #9b9b9b;
  font-size: 32px;
  background: #9b9b9b;
  background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 


.font-bluepen-sakura{
  font-family: 'Blue-Pen';
  color: #b74470;
  font-size: 60px;
  background: #b74470;
  background: -webkit-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: -moz-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.font-blupen40-sakura{
  font-family: 'Blue-Pen';
  color: #b74470;
  font-size: 32px;
  background: #b74470;
  background: -webkit-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: -moz-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

.font-bluepen-bw{
  font-family: 'Blue-Pen';
  color: #000;
  font-size: 60px;
  /* background: #d41872;
  background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: linear-gradient(left, #a445b2, #d41872, #fa4299);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}


.font-blupen40-bw{
  font-family: 'Blue-Pen';
  color: #000;
  font-size: 32px;
  /* background: #d41872;
  background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
  background: linear-gradient(left, #a445b2, #d41872, #fa4299);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
} 




  
  /* @font-face {
    font-family: 'DroidSerif';
    src: url('https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  .test-cl{
      font-family: 'DroidSerif';
      color: white;
  }  */
  
  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(77,77,77,0.80); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
      background: #d41872;
      background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
      background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
  
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }



  /* css scroll grey */
  .scrollgrey::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .scrollgrey::-webkit-scrollbar-track {
    background: rgba(199,199,199,0.40); 
  }
   
  /* Handle */
  .scrollgrey::-webkit-scrollbar-thumb {
      background: #9b9b9b;
      background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
  
  }
  
  /* Handle on hover */
  .scrollgrey::-webkit-scrollbar-thumb:hover {
    background: #efefef; 
  }



  

  /* css scroll sakura */
  .scrollsakura::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .scrollsakura::-webkit-scrollbar-track {
    background: rgba(117,90,80,0.60); 
  }
   
  /* Handle */
  .scrollsakura::-webkit-scrollbar-thumb {
      background: #b74470;
      background: -webkit-linear-gradient(left, #d796b0, #d6d2d4, #9f2f4f);
      background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
      background: -moz-linear-gradient(left, #e0d5da, #b74470, #9f2f4f);
      background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
  
  }
  
  /* Handle on hover */
  .scrollsakura::-webkit-scrollbar-thumb:hover {
    background: #d796b0; 
  }





  /* css scroll blackwhite */
  .scrollblackwhite::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  .scrollblackwhite::-webkit-scrollbar-track {
    background: transparent; 
  }
   
  /* Handle */
  .scrollblackwhite::-webkit-scrollbar-thumb {
      background: #9b9b9b;
      /* background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
      background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f); */
  
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
  
  }
  
  /* Handle on hover */
  .scrollblackwhite::-webkit-scrollbar-thumb:hover {
    background: #efefef; 
  }
  
  
  /* css button home and back */
  /* css button play or pause music */
  .back-btn{
    /* background: #8f5a70; */
    background: #d41872;
    background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .back-btn:hover{
    background: #555;
  }


  .backgrey-btn{
    /* background: #8f5a70; */
    background: #9b9b9b;
    background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .backgrey-btn:hover{
    background: #555;
  }

  .backsakura-btn{
    /* background: #8f5a70; */
    background: #b74470;
    background: -webkit-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -moz-linear-gradient(left, #e0d5da, #b74470, #9f2f4f);
    background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .backsakura-btn:hover{
    background: #e7bad2;
  }


  /* back button */
  .backbw-btn{
    background: #fff;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: black;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    right: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
    border: 1px solid black;
  }
  .backbw-btn:hover{
    background: #000;
    color: white;

  }
  /* end back button */

  
  
  .home-btn{
    /* background: #8f5a70; */
    background: #d41872;
    background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    left: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .home-btn:hover{
    background: #555;
  }  


  .homegrey-btn{
    /* background: #8f5a70; */
    background: #9b9b9b;
    background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    left: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .homegrey-btn:hover{
    background: #555;
  }  

  .homesakura-btn{
    /* background: #8f5a70; */
    background: #b74470;
    background: -webkit-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -moz-linear-gradient(left, #e0d5da, #b74470, #9f2f4f);
    background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    left: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
  }
  .homesakura-btn:hover{
    background: #e7bad2;
  }  
  /* end button */


  /* button black white */
  .homebw-btn{
    background: #fff;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: black;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-decoration: none;
    transition: ease all 0.3s;
    position: fixed;
    left: 15px;
    bottom:2vh;
    z-index: 2;
    cursor: pointer;
    border: 1px solid black;
  }
  .homebw-btn:hover{
    background: #000;
    color: white;
  }  
  /* end black whtite button */


  .feedback {
    background: #d41872;
    background: -webkit-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -o-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: -moz-linear-gradient(left, #a445b2, #d41872, #fa4299);
    background: linear-gradient(left, #a445b2, #d41872, #fa4299);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    color: white;
    padding: 6px 8px;
    font-size: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    /* border-radius: 4px; */
    /* border-color: #46b8da; */
  }
  
  .mybutton {
    position: fixed;
    bottom: 2vh;
    left:45%;
    z-index: 3;
  }

  @media only screen and (max-width: 768px) {
    .mybutton {
        position: fixed;
        bottom: 2vh;
        left:30%;
        z-index: 3;
    }
  }


  .feedback-grey {
    background: #9b9b9b;
    background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    color: white;
    padding: 6px 8px;
    font-size: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    /* border-radius: 4px; */
    /* border-color: #46b8da; */
  }



  .feedback-sakura {
    background: #b74470;
    background: -webkit-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -o-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: -moz-linear-gradient(left, #d796b0, #b74470, #9f2f4f);
    background: linear-gradient(left, #d796b0, #b74470, #9f2f4f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    color: white;
    padding: 6px 8px;
    font-size: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    /* border-radius: 4px; */
    /* border-color: #46b8da; */
  }



  .feedback-bw {
    /* background: #9b9b9b;
    background: -webkit-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -o-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: -moz-linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
    background: linear-gradient(left, #e3e2e0, #9b9b9b, #9f9f9f);
  
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s; */
    background: #fff;
    color: black;
    padding: 6px 8px;
    font-size: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid black;
    /* border-radius: 4px; */
    /* border-color: #46b8da; */
  }
    
  
  .feedback-bw:hover {
    background: #000;
    color: white;
  }
  
  
    
  #loaders{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
                50% 50% no-repeat rgb(249,249,249);
  }