@font-face {
    font-family: 'Vibur';
    src: url('./assets/fonts/vibur.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'Fabulous';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/Fabulous.ttf') format('truetype');
}
@font-face {
    font-family: 'Carry-You';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./assets/fonts/Carry-You.ttf') format('truetype');
}
/*-- Sign Styles --*/

.sign {
    font-family: "Carry-You", cursive;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span {
        font-size: 5.6rem;
        text-align: center;
        line-height: 1;
        color: #c6e2ff;
        animation: neon .08s ease-in-out infinite alternate;
    }
}

.sign-pink {
    font-family: "Carry-You", cursive;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span {
        font-size: 5.6rem;
        text-align: center;
        line-height: 1;
        color: #ffc5ec;
        animation: neon-pink .08s ease-in-out infinite alternate;
    }
}

/*-- Inline Sign Styles for Headers --*/
.sign-inline {
    font-family: "Carry-You", cursive;
    font-size: 3rem;
    line-height: 1;
    color: #c6e2ff;
    animation: neon .08s ease-in-out infinite alternate;
}

.sign-pink-inline {
    font-family: "Carry-You", cursive;
    font-size: 3rem;
    line-height: 1;
    color: #ffc5ec;
    animation: neon-pink .08s ease-in-out infinite alternate;
}


@keyframes neon {
    from {
        text-shadow:
                0 0 6px rgba(202,228,225,0.92),
                0 0 30px rgba(202,228,225,0.34),
                0 0 12px rgba(30,132,242,0.52),
                0 0 21px rgba(30,132,242,0.92),
                0 0 34px rgba(30,132,242,0.78),
                0 0 54px rgba(30,132,242,0.92);
    }
    to {
        text-shadow:
                0 0 6px rgba(202,228,225,0.98),
                0 0 30px rgba(202,228,225,0.42),
                0 0 12px rgba(30,132,242,0.58),
                0 0 22px rgba(30,132,242,0.84),
                0 0 38px rgba(30,132,242,0.88),
                0 0 60px rgba(30,132,242,1);
    }
}

@keyframes neon-pink {
    from {
        text-shadow:
                0 0 6px rgba(255,182,193,0.92),
                0 0 30px rgba(255,182,193,0.34),
                0 0 12px rgba(255,20,147,0.52),
                0 0 21px rgba(255,20,147,0.92),
                0 0 34px rgba(255,20,147,0.78),
                0 0 54px rgba(255,20,147,0.92);
    }
    to {
        text-shadow:
                0 0 6px rgba(255,182,193,0.98),
                0 0 30px rgba(255,182,193,0.42),
                0 0 12px rgba(255,20,147,0.58),
                0 0 22px rgba(255,20,147,0.84),
                0 0 38px rgba(255,20,147,0.88),
                0 0 60px rgba(255,20,147,1);
    }
}

.link {
   position: absolute;
   bottom: 10px; left: 10px;
   color: #828282;
   text-decoration: none;

   &:focus,
   &:hover {
       color: #c6e2ff;
       text-shadow:
               0 0 2px rgba(202,228,225,0.92),
               0 0 10px rgba(202,228,225,0.34),
               0 0 4px rgba(30,132,242,0.52),
               0 0 7px rgba(30,132,242,0.92),
               0 0 11px rgba(30,132,242,0.78),
               0 0 16px rgba(30,132,242,0.92);
   }
}