#mailto {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:1000;

    display:flex;
    justify-content: center;
    align-items: center;

    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
}

#mailto.hidden {
    display:none;
}

#mailto .buttons {
    background:var(--white);
    padding:1rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap:0.5rem;
}

#mailto .buttons button {
    display:flex;
    align-items: center;
    gap:0.75rem;
    background:var(--grey);
    color:var(--white);
    border:none;
    border-radius: 0.5rem;
    padding:0.5rem;
    padding-right:0.75rem;
    box-shadow: var(--shadow);
    transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

#mailto .buttons button.cancel {
    border:1px solid var(--grey);
    background:var(--white);
    color:var(--grey);
    font-weight: 500;
}

#mailto .buttons button:hover {
    cursor: pointer;
    transform: translateY(-0.125rem);
    box-shadow: var(--gold-glow);
}

#mailto .buttons button svg {
    height:2rem;
    aspect-ratio: 1;
}