:root {
    --btn-size: 4rem;
    --clr-neon: hsl(318 99% 50%);
    --clr-bg: hsl(323 21% 16%);
    --clr-teal: hsl(162 51% 69%);
    --clr-gold: hsl(51 100% 50%);
}

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

body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-auto-flow: column;
    place-items: center;
    align-items: center;
    background: var(--clr-bg);
    font-family: "Balsamiq Sans", cursive;
    /* color: var(--clr-neon); */
    overflow: hidden;
}

.neon-button,
.teal-button,
.gold-button {
    outline: none;
}

/* Neon Button */

.neon-button {
    font-size: var(--btn-size);

    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;

    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;

    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);

    position: relative;
}

.neon-button::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-neon);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
}

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

.neon-button:hover,
.neon-button:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.neon-button:hover::before,
.neon-button:focus::before {
    opacity: 1;
}

.neon-button:hover::after,
.neon-button:focus::after {
    opacity: 1;
}

/* Teal Button */

.teal-button {
    font-size: var(--btn-size);

    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-teal);
    border: var(--clr-teal) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;

    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;

    box-shadow: inset 0 0 0.5em 0 var(--clr-teal), 0 0 0.5em 0 var(--clr-teal);

    position: relative;
}

.teal-button::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-teal);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
}

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

.teal-button:hover,
.teal-button:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.teal-button:hover::before,
.teal-button:focus::before {
    opacity: 1;
}

.teal-button:hover::after,
.teal-button:focus::after {
    opacity: 1;
}


/* Gold Button */

.gold-button {
    font-size: var(--btn-size);

    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-gold);
    border: var(--clr-gold) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;

    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;

    box-shadow: inset 0 0 0.5em 0 var(--clr-gold), 0 0 0.5em 0 var(--clr-gold);

    position: relative;
}

.gold-button::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-gold);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
}

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

.gold-button:hover,
.gold-button:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.gold-button:hover::before,
.gold-button:focus::before {
    opacity: 1;
}

.gold-button:hover::after,
.gold-button:focus::after {
    opacity: 1;
}



/* media queries */

@media (max-width: 1000px) {
    body {
        grid-auto-flow: row;
    }

    :root {
        --btn-size: 3.5rem;
    }
}

@media (max-width: 400px) {
    :root {
        --btn-size: 2rem;
    }
}