@import url("https://fonts.googleapis.com/css?family=Raleway");

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

:root
{
  /* Fill color for button. none ==> transparant */
  --neonBGcolor: #6c757d;
  --neonBGdefault: #6c757d;
  /* When video ready to be created */
  --neonCreate: #28a745;
  /* When video is being created */
  --neonCreating: #ec5a16; /* #f9ab00; */
  /* When video is ready for download */
  --neonDownload: #007bff; /* #0a7829; */
  /* Settings and colors for neon button */
  --neonShadowRangeOut: 0.1em;
  --neonShadowRangeIn: 0.0em;
  --neonColor: #a55; /* hsl(200 60% 9%); */
  --neonTextColor: #fff;
}

/* Hide default checkbox for animated glow */
#neonButtonIdCheckBoxId
{
  display: none;
}

.NeonContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.NeonButton {
  display:inline-block;
  /* width:20em; */
  width: max-content !important;
  height: max-content !important;
  position: absolute;
  color: var(--neonColor);
  cursor: default; /* default is arrow, pointer is hand */
  padding: 0.65em 0.1em;
  /* Border settings */
  border: 0.15em solid var(--neonColor);
  border-radius: 0.45em;
  background: var(--neonBGcolor);
  perspective: 2em;
  font-family: "Raleway", sans-serif;
  font-size: 1.8em;
  font-weight: 900;
  letter-spacing: 0.3em;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /*
  Shadow around button
  -webkit-box-shadow: inset 0px 0px var(--neonShadowRangeIn) 0px var(--neonColor),
    0px 0px var(--neonShadowRangeOut) 0px var(--neonColor);
  -moz-box-shadow: inset 0px 0px var(--neonShadowRangeIn) 0px var(--neonColor),
    0px 0px var(--neonShadowRangeOut) 0px var(--neonColor);
  box-shadow: inset 0px 0px var(--neonShadowRangeIn) 0px var(--neonColor),
    0px 0px var(--neonShadowRangeOut) 0px var(--neonColor);
  */
  /* animation: border_flicker0 2s linear infinite; */
}

.NeonText {
  float: left;
  color: var(--neonTextColor);
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--neonColor);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--neonColor);
  /*
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--neonColor);
  animation: text_flicker0 3s linear infinite;
  */
}

.NeonButton::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--neonColor);
  pointer-events: none;
}

.NeonButton::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--neonColor);
  box-shadow: 0 0 2em 0.2em var(--neonColor);
  transition: opacity 100ms linear;
}

input:checked + .NeonButton {
  /* Color and opacity of text in glow button */
  color: var(--neonColor); /*rgba(0, 0, 0, 0.8);*/
  text-shadow: none;
  animation: none;
  /* Darker color in checked state */
  border: 0.15em solid var(--neonColor1);
}

input:checked + .NeonButton .NeonText {
  animation: none;
}

input:checked + .NeonButton::before {
  /* Distance of light shadow below button */
  filter: blur(1.5em);
  /* No light below ==> opac 0 */
  opacity: 0;
}

input:checked + .NeonButton::after {
  /* Opacity of inner button */
  opacity: 0.0;
}

/* Set width to 100% for screens smaller than 600px */
@media screen and (max-width: 600px) {
    .NeonButton {
        max-width: 15em !important;
        min-height: 1em !important; 
        padding: 0.5em 1.2em; /* height width */
        font-size: 1.4em;
    }
}

/* Set width to 80% for screens between 601px and 950px */
@media screen and (min-width: 601px) and (max-width: 950px) {
    .NeonButton {
        max-width: 18em !important;
        min-height: 1em !important; 
        padding: 0.5em 1.4em; /* height width */
        font-size: 1.8em;
    }
}

/* Set width to 60% for screens larger than 950px */
@media screen and (min-width: 951px) {
    .NeonButton {
        /* width:15em; */
        max-width: 20em !important;
        min-height: 1em !important; 
        padding: 0.5em 1.5em; /* height width */
        font-size: 1.8em;
    }
}