@import url('https://fonts.googleapis.com/css2?family=Grandstander:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary: #69C798;
  --primary-text: #441c28;
  --secondary: #FBE8A6;
  --secondary-text: #441c28;
  --accent: none;
  --accent-text: #441c28;
}
body
{
 font-family: 'Grandstander' !important;
}
button

{
  font-family: 'Grandstander' !important;
  font-size: 1rem;
 }
button
{
  font-weight: 900 !important;
  outline: 8px solid var(--text-light) !important;
  font-size: 24px;
  background-color: var(--background-light);
  padding: 16px 24px 12px 24px !important;
  transition: all 0.25s cubic-bezier(.46,1.28,.8,1.26);
  font-family: 'Grandstander', cursive; border: none !important;color: var(--text-light) !important;
  filter: drop-shadow(6px 6px 0 var(--text-light));
  text-transform: uppercase;
  font-weight: 900;
}
button:hover
{
  cursor: pointer !important;
  background-color: var(--primary) !important;
  filter: drop-shadow(10px 10px 0 var(--text-light));
  color: var(--secondary-text) !important;
}
.texter {
  background-color:var(--primary) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;position: relative !important;
}
.heading-text
{
  position: relative;
  display: flex;
  margin: 0 auto !important;
  width: 80%;
  overflow: visible !important;
  align-items: center;
  justify-content: center;
  text-align: center;text-shadow: 12px 8px 0px var(--secondary-text);
  -webkit-text-stroke-width: 6px; overflow: hidden;
  -webkit-text-stroke-color: var(--secondary-text);
  letter-spacing: -16px;
  padding: 0px 16px;
}
.letter:hover 
{
  color: var(--primary) !important;
  transform: translate(0%, -0%) rotate(5deg) scale(1.25 );
  text-shadow:  12px 12px 0 var(--secondary-text);
  padding: 0px 16px;
}
.letter
{
  font-family: 'Grandstander', cursive;
  font-size: 10em;color: var(--secondary) !important;
  font-weight: 900 !important;  transition: all 0.2s cubic-bezier(.46,1.28,.8,1.26);
}
.backgroundImg {background-image: url(./images/bg.png) !important;
background-repeat: repeat;
background-position: top;
background-size: 300px 300px !important;
background-clip: padding-box;
}
.mint-container 
{
  padding: 50px 100px !important;
  background-color: var(--secondary) !important;
  justify-content: center;
  display: flex;
  flex-direction: row;
  z-index: 25;
  border-radius: 40px;
  transition: all 0.25s cubic-bezier(.46,1.28,.8,1.26) !important;
  box-shadow: 0px 0px 0px 20px var(--primary) !important;
}
.centered-container
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 300px;
  padding: 20px 0px;
}
h2
{
  padding: 20px;
  margin: 2vw !important;
  font-size: 3rem !important;
  font-weight: 900 !important;
  font-family: 'Grandstander';
}
@media only screen and (max-width: 800px)
{
  .mint-container
  {
    flex-direction: column;
    margin-top: 100px;
  }
  h2
{
  padding: 20px;
  margin: 5vw !important;
  font-size: 2rem !important;}
  h1
  {
    display: none;
  }
}