@font-face {
    font-family: 'Celestia Redux';
    src:
        local('Celestia Redux'),
        url('https://silky.horse/CelestiaMediumRedux1.55.ttf');
}

@font-face {
    font-family: 'Twemoji Mozilla';
    src: 
        local('Twemoji Mozilla'),
        url('https://silky.horse/Twemoji.Mozilla.ttf');
}

@keyframes rainbow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.myName {
    font-family: 'Celestia Redux';
    font-size: 32px;
}

.myTitleContainer {
    font-family: 'Celestia Redux';
    position: relative;
    height: 32px;
}

.myTitle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 26px;
    color: #eefeff;
    font-weight: bold;
    background: linear-gradient(90deg,
    #ff9a9e, #fbc8d9, #fef3bd, #c9e4de, #a1c4fd, #c9c9ff, #f9c2ff, #ff9a9e);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow 5s ease-in-out infinite;
    z-index: 1;
}

.myTitleShadow {
    position: absolute;
    top: 0;
    left: 50%;
    font-weight: bold;
    transform: translateX(-50%);
    font-size: 26px;
    text-shadow: 1px 1px 1px #000;
    color: transparent;
    pointer-events: none;
}

.myFlower {
    font-family: 'Twemoji Mozilla';
    text-shadow: 1px 1px 1px #000;
}

.mySparkle {
    font-family: 'Twemoji Mozilla';
    opacity: 0.8;
    text-shadow: 1px 1px 1px #000;
}

.myFirstName {
    color: #ece;
    text-shadow: 1px 1px 1px #000;
}

.myLastName {
    color: #f0ff6a;
}