h1 {
    text-align: left;
}

h1 .displayname {
    display: none;
}

@media (min-width: 768px) {
    h1 {
        margin-top: 32px;
    }
    h1 .displayname {
        display: inline;
    }
}

.topbar {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    border-radius: var(--radius);
    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(225, 255, 0, 0.5),
        color-mix(in srgb, var(--confirm-bg) 50%, transparent)
        
    ),
    radial-gradient(
        circle at 100% 75%,
        rgba(255, 0, 0, 0.5),
        var(--confirm-bg),
        color-mix(in srgb, var(--confirm-bg) 33%, transparent),
        color-mix(in srgb, var(--confirm-bg) 75%, transparent)
    );

    background-size: 300% 300%;
    animation: warpAnimation 32s ease infinite;
}

.topbar-text {
    color: var(--confirm-text);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    background-color: hsla(0, 0%, 0%, 0.1);
    border-radius: var(--radius);
    padding: 8px 16px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}   

.topbar-upgrade {
    color: inherit;
    text-decoration: underline;
    border-radius: var(--radius);
}

.topbar-close {
    border: none;
    border-radius: var(--radius);
    background-color: var(--bg-1);
}

.clear-recent {
    border: var(--border-card);
    background-color: var(--bg-2);
    border-radius: var(--radius);
    padding: 4px 8px;
    color: var(--text);
}

.clear-recent:hover {
    background-color: var(--bg-3);
}

.dash-header {
    
    margin: 10px 0;
    display: flex;
    flex-direction: row;
    gap: 8px;

    align-items: center;

    font-size: 1rem;
}

.dash-header a {
    color: var(--theme);
}

.get-started {
    width: 100%;
    height: calc(100vh - 16rem - 1px - clamp(1rem, 5vw + 1rem, 4rem));
    display: flex;
    align-items: center;
    justify-content: center;
}

.get-started-icon {
    cursor: pointer;
    border: 8px solid var(--border);
    border-radius: 500px;
    padding: 4px;
    display: inline-block;
}

.get-started-icon svg {
    height: 8rem;
    width: 8rem;
    fill: var(--border);
    display: block;
}