@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');

button {
    font-family: 'Zilla Slab', serif;
    font-size: 14pt;
    padding-left: 2em;
    padding-right: 2em;
}

.flex {
    display: flex;
}

.align-center {
    justify-content: center;
}

.align-vert,
.align-vert.align-center {
    align-items: center;
}

.modal {
    display: none;
}

.modal--show,
.modal--hide {
    display: flex;
}

.modal--align {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10003;
}

.modal__container {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 800px;
    padding: 20px;
    margin: 12px;
    color: #141414;
    background: #fff;
}

.modal__container h2,
.modal__container h3 {
    color: #141414;
}

.modal__close--x {
    font-size: 30px;
    position: absolute;
    top: 3px;
    right: 10px;
    border-bottom: transparent;
}

.modal__close--x:hover {
    cursor: pointer;
}

.modal.modal--show {
    animation: modal-open 0.3s;
}

@keyframes modal-open {
    0%    { opacity: 0; }
    100%  { opacity: 1; }
}

.modal.modal--hide {
    animation: modal-close 0.3s;
}

@keyframes modal-close {
    0%    { opacity: 1; }
    100%  { opacity: 0; }
}