::backdrop {
    background: #000C;
}

dialog {
    width: 450px;
    padding: 0;
    margin: auto;
    border: none;
    transform: translateY(-100vh);
    animation: dialog forwards .7s;
}
dialog * {
    font-family: arial;
}
dialog .dialogHeader {
    padding: 11px 25px 9px 25px;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFF;
    background: linear-gradient(#567, #345);
}
dialog .dialogContent {
    padding: 30px 25px;
    font-size: 15px;
    opacity: 70%;
}
dialog .dialogContent textarea {
    border: 1px solid #1234;
}
dialog .dialogFooter {
    text-align: right;
    padding: 0 30px 10px 0;
    font-size: 14px;
}
dialog .dialogFooter input {
    outline: none;
    border: none;
    padding: 8px 40px;
    border-radius: 3px;
    cursor: pointer;
    color: #FFF;
    background: linear-gradient(#567, #345);
    max-width: 120px;
}
dialog .dialogFooter input:hover {
    opacity: 80%;
}

@keyframes dialog {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(-5vh); }
}