/*-------------------------------------------------------------------------------------------------------------------
   Overalls
-------------------------------------------------------------------------------------------------------------------*/

   * {
      border: 0;
      box-sizing: border-box;
      margin: 0;
      outline: none;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
   }

   a {
      color: inherit;
      text-decoration: none;
   }

   img {
      display: block;
      pointer-events: none;
   }

   p { 
      margin: 0; 
   }

   textarea { 
      resize: none; 
   }

   ul li { 
      list-style: none; 
   }

   :root {
      --black-dark:   #17181C;
      --black-light:  #3B3D3F;
      --black-medium: #2A292E;
      --gray-dark:    #444444;
      --gray-light:   #999999;
      --gray-medium:  #3F3F3F;
      --white-dark:   #EEEEEE;
      --white-light:  #FFFFFF;
      --white-medium: #FDFDFD;
      --white-off:    #F5F5F5;

      --accent:       #110133;
      --gradient:     linear-gradient(135deg, #01E0FF, #FD01A6);
      --primary:      #01E0FF;
      --secondary:    #FD01A6;

      --green:        #7CCF78;
      --red:          #E74470;
   }

   ::placeholder { 
      color: var(--white-light); 
      opacity: .5;
   }

   ::-webkit-scrollbar {
      height: 0;
      width: 0;
   }

/*-------------------------------------------------------------------------------------------------------------------
   HTML tags
-------------------------------------------------------------------------------------------------------------------*/

   body {
      background: #EBEBEB;
      color: var(--white-light);
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      font-weight: 400;
      width: 100%;
   }

/*-------------------------------------------------------------------------------------------------------------------
   [#] IDs
-------------------------------------------------------------------------------------------------------------------*/



/*-------------------------------------------------------------------------------------------------------------------
   [.] Classes
-------------------------------------------------------------------------------------------------------------------*/

   

/*-------------------------------------------------------------------------------------------------------------------
   Colors
-------------------------------------------------------------------------------------------------------------------*/

   .black-dark-b { background: var(--black-dark) !important; }
   .black-dark-c { color: var(--black-dark) !important; }
   .black-light-b { background: var(--black-light) !important; }
   .black-light-c { color: var(--black-light) !important; }
   .black-medium-b { background: var(--black-medium) !important; }
   .black-medium-c { color: var(--black-medium) !important; }
   .gray-dark-b { background: var(--gray-dark) !important; }
   .gray-dark-c { color: var(--gray-dark) !important; }
   .gray-light-b { background: var(--gray-light) !important; }
   .gray-light-c { color: var(--gray-light) !important; }
   .gray-medium-b { background: var(--gray-medium) !important; }
   .gray-medium-c { color: var(--gray-medium) !important; }
   .white-dark-b { background: var(--white-dark) !important; }
   .white-dark-c { color: var(--white-dark) !important; }
   .white-light-b { background: var(--white-light) !important; }
   .white-light-c { color: var(--white-light) !important; }
   .white-medium-b { background: var(--white-medium) !important; }
   .white-medium-c { color: var(--white-medium) !important; }
   .white-off-b { background: var(--white-off) !important; }
   .white-off-c { color: var(--white-off) !important; }

   .accent-b { background: var(--accent) !important; }
   .accent-c { color: var(--accent) !important; }
   .gradient-b { background: var(--gradient) !important; }
   .primary-b { background: var(--primary) !important; }
   .primary-c { color: var(--primary) !important; }
   .secondary-b { background: var(--secondary) !important; }
   .secondary-c { color: var(--secondary) !important; }

   .green-b { background: var(--green) !important; }
   .green-c { color: var(--green) !important; }
   .red-b { background: var(--red) !important; }
   .red-c { color: var(--red) !important; }

/*-------------------------------------------------------------------------------------------------------------------
   Third-party
-------------------------------------------------------------------------------------------------------------------*/

   

/*-------------------------------------------------------------------------------------------------------------------
   Responsive Web Design
-------------------------------------------------------------------------------------------------------------------*/

   @media screen and (max-width: 768px) {
   }