@font-face {
  font-family: "Lobster";
  src: url("../fonts/fontspring-demo-walpurgis-night.otf");
  /* src: url("../fonts/cretino/Cretino.otf"); */

}
@font-face{
    font-family: "stylst-ft";
  src: url("../fonts/Chopinscript-jWKj.otf");
}
@font-face {
  font-family: "styl-ft";
  src: url("../fonts/garineldo-font/Garineldo-MJqY.otf");
}
@font-face {
  font-family:'comic-ft';
  src: url("../fonts/hey-comic-font/HeyComic-vm34M.otf");

}
@font-face {
  font-family:'site-ft';
  src: url("../fonts/raela-grotesque-font/RaelaGrotesqueLight-0v1ER.ttf");

}

:root{
  --h1_80:80pt;
  --h1_70:70pt;
  --h1_60:60pt;
  --h1_50:50pt;
  --h1_40:40pt;
  --h1:30pt;
  --h2:25pt;
  --h3:20pt;
  --h4:15pt;
  --h5:12pt;
  --h6:10pt;
  --h7:8pt;
  --h8:5pt;
  --h9:2pt;
  --h10:1pt;
  --icon-sq-h:25px;
  --icon-sq-w:25px;

  --white: #000a;
  --bodyColor: #292a2b;
  --borderFormEls:rgba(0,0,0,.6);
  --bgFormElsFocus: hsl(0, 7%, 20%);

  --primary-color:#ea4631;
;
  
}

/* width */
::-webkit-scrollbar {
  width: 5px;
  height:10px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color); 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

*{
  font-family: 'site-ft',sans-serif;
  margin: 0px;
  padding: 0px;
}
.golden-button {
      touch-action: manipulation;
      display: inline-block;
      outline: none;
      font-family:'comic-ft';
      font-size: var(--h5);
      box-sizing: border-box;
      border: none;
      border-radius: 0.3em;
      height: 2.75em;
      line-height: 2.5em;
      text-transform: uppercase;
      padding: 0 1em;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
        inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
      background-image: linear-gradient(160deg,
          #a54e07,
          #b47e11,
          #fef1a2,
          #bc881b,
          #a54e07);
      border: 1px solid #a55d07;
      color: rgb(120, 50, 5);
      text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      background-size: 100% 100%;
      background-position: center;
    }

    .golden-button:focus,
    .golden-button:hover {
      background-size: 150% 150%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
      border: 1px solid rgba(165, 93, 7, 0.6);
      color: rgba(120, 50, 5, 0.8);
    }

    .golden-button:active {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    }

    svg{
        height:var(--icon-sq-h);
        width:var(--icon-sq-w);
        fill: #fffa;
      }
    svg:hover{
      fill: var(--primary-color);
    }


    .tags {
      list-style: none;
      margin: 0;
      overflow: hidden; 
      padding: 0;
    }
    
    .tags li {
      float: left; 
    }
    
    .tag {
      background: var(--primary-color);
      border-radius: 3px 0 0 3px;
      color: #000;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 20px 0 23px;
      position: relative;
      margin: 0 10px 10px 0;
      text-decoration: none;
      -webkit-transition: color 0.2s;
    }
    
    .tag::before {
      background: #000;
      border-radius: 10px;
      box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
      content: '';
      height: 6px;
      left: 10px;
      position: absolute;
      width: 6px;
      top: 10px;
    }
    
    .tag::after {
      background: #000;
      border-bottom: 13px solid transparent;
      border-left: 10px solid var(--primary-color);
      border-top: 13px solid transparent;
      content: '';
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .tag:hover {
      background-color: var(--primary-color);
      color: white;
      cursor: pointer;
    }
    
    .tag:hover::after {
       border-left-color: var(--primary-color); 
    }

    .wins-layer{
      max-width: 1200px;;
    }

        .google-login {
      color: #535a60;
      border-color: #d6d9dc
    }

    .auth-provider {
      cursor: pointer;
      border: 1px solid #d6d9dc;
      text-align: center;
      background: #FFF;
      color: #535a60;
      padding: 10px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .auth-provider:hover {
      background-color: rgba(0, 0, 0, .2);
    }


        .btn{
      padding:15px 25px;
      border-radius:25px;
      cursor: pointer;
      border:1px solid #fff
    }
    .light-btn{
      border-color: #fff;
      color:#fff;
    }
    .light-btn:hover{
      background-color: #fff;
      color:#000;
    }
    .light-btn:hover span{
      transition: .3s;
      transform: translateX(15px);
    }

    @media only screen and (max-width: 700px) {
      .box-unit-1 {
        flex-direction: column-reverse;
      }

      .main-cnt-foot {
        flex-direction: column;
      }
     
    }

    @media only screen and (max-width: 900px) {

      .box-unit-2{
        justify-content: center;
        flex-direction: column;
      }

      .box-unit-3 {
        justify-content: center;
        flex-direction: column-reverse;
      }

      .cursor,.cursor2{
        display: none;
      }
     
    }