@keyframes pulse {
    0% {
        transform: scale(1);
        filter: saturate(1);
        opacity: 100%;
    }

    20% {
        transform: scale(.9);
        filter: saturate(.9);
        opacity: 95%;
    }

    50% {
        transform: scale(1);
        filter: saturate(1);
        opacity: 100%;
    }

    100% {
        transform: scale(1);
        filter: saturate(1);
        opacity: 100%;
    }
}

/**
 *
 */

#page1 {
    height: 100%;
}

#name {
    font-family: TrenchThin;
    font-size: min(20vh, 40vmax);
}

#logo-placeholder {
    max-width: 20vh;

    animation: pulse 4s ease infinite;
}

#logo-placeholder img {
    max-width: 100%;
    max-height: 100%;
}

#logo-placeholder :not(:last-child) {
    position: absolute;
}

/*#availability img {
    filter: contrast(1.7) grayscale(1);
}*/

#identity {
    scale: .9;
    flex-direction: row;
    gap: .5rem;

    /** aligns logo to center while shrinking, accounts for transparent borders of logo */
    left: -20px;
    top: 2vh;
}

#identity * {
    opacity: 0;
}

#footer {
    width: 100%;
    justify-content: space-around;
    gap: 2rem;
    opacity: 0;
    color: #cccccc;
    margin-bottom: 2rem;
    flex-direction: row;
    padding: 1rem;
}

#cartouche {
    gap: 7px;
}

#team-mail a {
    /*
    color: white;
    border: 1px solid #a16d11;
    background-image: linear-gradient(24deg, hsl(14deg 100% 29%) 25%, hsla(47, 94%, 63%, 1) 95%, #998a00 100%);
    padding: 5px 9px 9px 9px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 8px #311d0b;*/

    color: white;
    border: 1px solid #d59a32;
    padding: 5px 9px 9px 9px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 2px #413e10;
    background-color: #00000047;
}

#copyright {
    flex-direction: row;
    gap: .3rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#catchphrase {
    opacity: 0;
    margin: 0 1rem;
    text-align: center;
    font-size: max(2rem, 3vmax);
    gap: .5rem;
}

#catchphrase > div {
    display: inline-block;
}

.sublim, .vscroll b {
    background: linear-gradient(146deg, #ffed48 0%, hsla(47, 94%, 63%, 1) 20%, #fc6c29 100%); /*linear-gradient(304deg, #ad824f, #cb5aad);*/ 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#catchphrase > div span:last-child {
    left: -0.15em;
}

#stores {
    flex-direction: row;
}

#soon {
    gap: .25rem;
    text-align: center;
    font-size: .75em;
    font-weight: bold;
    text-decoration: none;
}

#intro {
    font-size: max(1.2rem, 3vmin);
    padding: 0 10%;
    color: #CCC;
    top: 45%;
    gap: .25em;
}

#intro b {
    font-size: 1.25em;
    margin: 0 .15em;
}

#intro p {
    margin: 0;
    opacity: 0;
}

#content {
    top: -1em;
}

#content .subcontent {
    gap: 6vh;
}

.shortcuts {
    opacity: 0;
}

.shortcuts button:hover {
    cursor: pointer;
}

.shortcuts button {
    padding: 0.5em 1em;
    font-size: min(1.5rem, 5vmax);
    border-radius: 10px;
    box-shadow: 0px 0px 16px 0px black;
    background-image: linear-gradient(146deg, #ffed48 0%, hsla(47, 94%, 63%, 1) 20%, #fcaa29 100%);
    color: #2b333e;
    text-shadow: 0px 0px 20px #d84949;
    transition: opacity .3s;
    border: 2px solid #efca00;
}

.shortcuts button i, .firey {
    background: linear-gradient(146deg, #294874 0%, #d70000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}