/* You can add global styles to this file, and also import other style files */
// Global variables

// $primaryRedHex: #DC3535;
// $primaryOrangeHex: #D17842;
// $primaryBlackHex: #0C0F14;
// $primaryDarkGreyHex: #141921;
// $secondaryDarkGreyHex: #21262E;
// $primaryGreyHex: #252A32;
// $secondaryGreyHex: #252A32;
// $primaryLightGreyHex: #52555A;
// $secondaryLightGreyHex: #AEAEAE;
// $primaryWhiteHex: #FFFFFF;
// $primaryBlackRGBA: rgba(12,15,20,0.5);
// $secondaryBlackRGBA: rgba(0,0,0,0.7);

// Colors
$col-red: #dc3535;
$col-orange: #d17842;
$col-dark: #0c0f14;
$col-border: #21262e;
$col-lightBlack: #252a32;
$col-darkGray: #52555a;
$col-gray: #aeaeae;
$col-white: #ffffff;
$rad-25: 25px;
$rad-10: 10px;
$rad-7: 7px;
$small-btn-size: 30px;
$gap-25: 25px;
$gap-15: 15px;
$blur-20: 20px;
$header-height: 55.3px;
$menu-bar-height: 72.5px;
$main-gradient: linear-gradient(to bottom right, #252a32 0%, #262b3300 100%);
$sec-gradient: linear-gradient(to bottom right, #21262e 20%, #0c0f14 70%);

$lay999: 999;
// Heading sizes
h1 {
  font-size: 28px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 14px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 10px;
}

// Global rules
:is(*, ::before, ::after) {
  font-family: "poppins", "sanserif", "arial";
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: $col-dark;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  // cursor: url(assets/icons/coffee-bean.svg), auto; 
}

button {
  user-select: none;
}

img {
  user-select: none;
}
// Helper Classes

// .container {
//   padding: 10px 30px;
//   position: relative;
//   z-index: 1;
// }
// input[type="button"]:active,
// button:active {
//   color: $col-orange;
//   background-color: transparent;
//   border-color: $col-orange;
// }

[btnshape]:active {
  background-color: transparent;
  color: $col-orange;
  border-color: $col-orange;
}

//show and hide animation
@keyframes show-animation {
  0% {
    display: none;
  }
  1% {
    display: block;
    top: 70%;
    opacity: 0;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes hide-animation {
  0% {
    top: 0;
    opacity: 1;
  }
  99% {
    top: 70%;
    opacity: 0;
  }
  100% {
    display: none;
  }
}
