/* Global animations */
@keyframes flicker {
  0% {
   opacity: 0.27861;
  }
  5% {
   opacity: 0.34769;
  }
  10% {
   opacity: 0.23604;
  }
  15% {
   opacity: 0.90626;
  }
  20% {
   opacity: 0.18128;
  }
  25% {
   opacity: 0.83891;
  }
  30% {
   opacity: 0.65583;
  }
  35% {
   opacity: 0.67807;
  }
  40% {
   opacity: 0.26559;
  }
  45% {
   opacity: 0.84693;
  }
  50% {
   opacity: 0.96019;
  }
  55% {
   opacity: 0.08594;
  }
  60% {
   opacity: 0.20313;
  }
  65% {
   opacity: 0.71988;
  }
  70% {
   opacity: 0.53455;
  }
  75% {
   opacity: 0.37288;
  }
  80% {
   opacity: 0.71428;
  }
  85% {
   opacity: 0.70419;
  }
  90% {
   opacity: 0.7003;
  }
  95% {
   opacity: 0.36108;
  }
  100% {
   opacity: 0.24387;
  }
}

@keyframes textShadow {
  0% {
   text-shadow: 0.4389924193300864px 0 1px var(--text-shadow-2), -0.4389924193300864px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  5% {
   text-shadow: 2.7928974010788217px 0 1px var(--text-shadow-2), -2.7928974010788217px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  10% {
   text-shadow: 0.02956275843481219px 0 1px var(--text-shadow-2), -0.02956275843481219px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  15% {
   text-shadow: 0.40218538552878136px 0 1px var(--text-shadow-2), -0.40218538552878136px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  20% {
   text-shadow: 3.4794037899852017px 0 1px var(--text-shadow-2), -3.4794037899852017px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  25% {
   text-shadow: 1.6125630401149584px 0 1px var(--text-shadow-2), -1.6125630401149584px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  30% {
   text-shadow: 0.7015590085143956px 0 1px var(--text-shadow-2), -0.7015590085143956px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  35% {
   text-shadow: 3.896914047650351px 0 1px var(--text-shadow-2), -3.896914047650351px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  40% {
   text-shadow: 3.870905614848819px 0 1px var(--text-shadow-2), -3.870905614848819px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  45% {
   text-shadow: 2.231056963361899px 0 1px var(--text-shadow-2), -2.231056963361899px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  50% {
   text-shadow: 0.08084290417898504px 0 1px var(--text-shadow-2), -0.08084290417898504px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  55% {
   text-shadow: 2.3758461067427543px 0 1px var(--text-shadow-2), -2.3758461067427543px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  60% {
   text-shadow: 2.202193051050636px 0 1px var(--text-shadow-2), -2.202193051050636px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  65% {
   text-shadow: 2.8638780614874975px 0 1px var(--text-shadow-2), -2.8638780614874975px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  70% {
   text-shadow: 0.48874025155497314px 0 1px var(--text-shadow-2), -0.48874025155497314px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  75% {
   text-shadow: 1.8948491305757957px 0 1px var(--text-shadow-2), -1.8948491305757957px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  80% {
   text-shadow: 0.0833037308038857px 0 1px var(--text-shadow-2), -0.0833037308038857px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  85% {
   text-shadow: 0.09769827255241735px 0 1px var(--text-shadow-2), -0.09769827255241735px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  90% {
   text-shadow: 3.443339761481782px 0 1px var(--text-shadow-2), -3.443339761481782px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  95% {
   text-shadow: 2.1841838852799786px 0 1px var(--text-shadow-2), -2.1841838852799786px 0 1px var(--text-shadow-1), 0 0 3px;
  }
  100% {
   text-shadow: 2.6208764473832513px 0 1px var(--text-shadow-2), -2.6208764473832513px 0 1px var(--text-shadow-1), 0 0 3px;
  }
}

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 999999999999999999999999;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

p, i, a, h1, h2, h3, h4, h5, button {
  animation: textShadow 1s infinite;
}

/* Fonts */
@font-face {
  font-family: Inter;
  src: url(../assets/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf);
}

@font-face {
  font-family: Montserrat;
  src: url(../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
  font-style: normal;
}

@font-face {
  font-family: Montserrat;
  src: url(../assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf);
  font-style: italic;
}

/* Global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  scroll-behavior: smooth;
}

:root {
  --main-color: #24201e;
  --accent-color: #302924;
  --tertiary-color: #9ac563;
  --tertiary-color-light: #ccd88d;
  --body-text-color: #F0EAD2;
  --text-shadow-1: rgba(0, 255, 0, 0.15);
  --text-shadow-2: rgba(255, 0, 255, 0.1);
  --transition-s: all 0.1s ease-in-out;
  --transition-m: all 0.2s ease-in-out;
  --transition-l: all 0.3s ease-in-out;
  --transition-xl: all 0.5s ease-in-out;
}

html.dark body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 999999999999999999999999;
  pointer-events: none;
  animation: flicker 1s infinite;
}

html, body {
  max-width: 100%;
  background-color: var(--main-color);
}

html {
  font-size: 16px;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Scrollbar */
html::-webkit-scrollbar {
  appearance: none; /* Safari */
	width: 0; /* Chrome */
  height: 0;
}

/* Grid */
.grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
  padding: 2rem;
  margin: 2rem;
  grid-auto-flow: dense;
  justify-content: center;
  align-content: center;
  background-color: var(--accent-color);
  border-radius: 2rem;
}

.container {
  display: flex;
  padding: 7.5rem 1rem;
  width: 100vw;
  justify-content: center;
}

/* Section content */
.content {
  text-align: center;
  overflow: hidden;
  width: 100%;
  max-width: 1920px;
}

/* Buttons */
.btn_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.button {
  padding: 1rem;
  width: fit-content;
  border: none;
  outline: none;
  background: transparent;
  color: var(--tertiary-color);
  transform: scale(1);
  transition: var(--transition-l);
  font-size: 1rem;
  cursor: pointer;
  border-radius: 1rem;
}

.button:hover {
  color: var(--tertiary-color);
  background-color: var(--accent-color);
  padding: 1rem 2rem;
  transition: var(--transition-l);
}

.button:active {
  color: var(--tertiary-color-light);
  background: var(--tertiary-color);
  transition: var(--transition-m);
}

/* Links */
.link {
  color: var(--tertiary-color);
  transition: var(--transition-m);
}

a {
  text-decoration: none;
}

.link:hover {
  color: var(--tertiary-color-light);
  transition: var(--transition-l);
}

.link:active {
  color: var(--body-text-color);
  transition: var(--transition-s);
}

/* Text */
.heading {
  color: var(--tertiary-color);
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
  font-family: Montserrat;
}

.subheading{
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--body-text-color);
  width: 100%;
  margin-bottom: 2rem;
}

.body_text {
  font-size: 1.5rem;
  color: var(--body-text-color);
  font-weight: 200;
}

.dbl_space {
  margin-top: 1.5rem!important;
}

br {
  content: "";
  display: block;
  margin-top: .75rem;
}

/* Divider */
.border_bottom {
  display: flex;
  justify-content: center;
  height: .1rem;
  width: 100%;
}

.border_bottom span {
  width: 85%;
  max-width: 1300px;
  height: 100%;
  background: var(--accent-color);
}

/* Hero section */
.hero {
  background-color: var(--main-color);
  padding: 7.5rem, 0;
}

.bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bg_img {
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
  height: 100vh;
  width: 100vw;
  object-fit: cover;
}

.hero_container {
  align-items: center;
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  text-align: center;
}

.hero_heading {
  font-size: 15rem!important;
}

.hero_btn_container {
  margin-top: 3rem;
}

/* Footer */
.footer_container {
  background: var(--main-color);
}

.footer_content{
  padding: .25rem 1rem;
  margin: 0 auto;
  height: 7.5vh;
  width: 100%;
  max-width: 1920px;
  text-align: left;
  align-content: center;
  overflow-x: hidden;
}

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

  html {
    font-size: 10px;
  }

  .grid_container {
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
  }

  .hero_heading {
    font-size: 7.5rem!important;
  }

}