/*** The new CSS Reset - version 1.4.4 (last updated 22.12.2021) ***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
 *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
  max-height: 80vh;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
      display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
      - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}

/* color vars */
:root {
  --color-aware: #408fea;
  --color-focus: #f69902;
  --color-alert: #ff4800;
  --color-text: #ddd;
  --color-subtext: #bbb;
  --color-border: #ddd;
  --color-shadow: #444;
  --color-background: black;
  --gradient: linear-gradient(45deg, #ff00a2, #7300ee);
  --gradient-green: linear-gradient(45deg, #00711a, #d3eb00);
  --gradient-blue: linear-gradient(45deg, #81bbf8, #0178a4);
  --gradient-orange: linear-gradient(45deg, #ff6a00, #ffcc00);
}

.blue-glow {
  background: var(--gradient-blue);
  animation: pulse 4s ease-in-out infinite;
  background-size: 100% 200%;
  background-position-y: 100%;
}

.orange-glow {
  background: var(--gradient-orange);
  animation: pulse 4s ease-in-out infinite;
  background-size: 100% 200%;
  background-position-y: 100%;
}

.purple-glow {
  background-image: var(--gradient);
  animation: pulse 4s ease-in-out infinite;
  background-size: 100% 200%;
  background-position-y: 100%;
}

.green-glow {
  background-image: var(--gradient-green);
  animation: pulse 4s ease-in-out infinite;
  background-size: 100% 200%;
  background-position-y: 100%;
}

.green {
  /* color: var(--color-focus); */
  background-image: var(--gradient-green);

}

.blue {
  /* color: var(--color-aware); */
  background-image: var(--gradient-blue);

}

.orange {
  /* color: var(--color-alert); */
  background-image: var(--gradient-orange);

}

b {
  font-weight: 900;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 100% 200%;
  background-position-y: 100%;
  border-radius: 0.4rem;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    background-position-y: 0%;
  }
  50% {
    background-position-y: 50%;
  }
}

html {
  height: fill-available;
  height: -webkit-fill-available;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
  box-sizing: border-box;

  min-height: 100vh;
  min-height: fill-available;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 20px;

  /* center */
  align-items: center;
}
article {
  display: flex;
  flex-direction: column;
  padding: 20px 0 150px;
  max-width: 400px;
  width: 100%;
  min-height: 100vh;
  gap: 1em;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* center */
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 3em;
  padding-bottom: 50px;
}

/* on modile h1 1.5em */
@media (max-width: 600px) {
  h1 {
    font-size: 2em;
  }
}

h2 {
  font-size: 1.5em;
  text-align: center;
}

a {
  color: var(--color-aware);
  cursor: pointer;
}

p {
  color: var(--color-subtext);
  line-height: 1.4em;
  font-family: Calibri, "Trebuchet MS", sans-serif;
}

button {
  cursor: pointer;
  padding: 20px;
  background-color: var(--color-alert);
  border-radius: 15px;
  text-align: center;
  font-size: 1.3em;
  /* transition 1 sec */
  transition: all 1s;
}

button:hover {
  background-color: var(--color-focus);
  color: var(--color-background);
}

button:focus {
  background-color: var(--color-focus);
  color: var(--color-background);
  outline: 2px solid white;
}

textarea {
  padding: 15px;
  border: 1px solid var(--color-border);
}

textarea:focus {
  border: 1px solid var(--color-focus);
}

input {
  padding: 15px;
  border: 1px solid var(--color-border);
}

input:focus {
  border: 1px solid var(--color-focus);
}

form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.buy_button {
  border: none;
  font-weight: 900;
  border-radius: 35px;
  color: rgb(244, 244, 244);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}



li {
  /* font roboto */
  font-family: Roboto, sans-serif;
  font-size: 1.1em;
  line-height: 1.4em;
}