#curtain.hidden {
    pointer-events: none;
    opacity       : 0.0;
}

#curtain.visible {
    pointer-events: all;
    opacity       : 1.0;
}

#curtain {
    transition      : ease-in-out 400ms;
    background-color: #0004;
    z-index         : 1;
    position        : fixed;
    bottom          : 0px;
    top             : 0px;
    left            : 0px;
    right           : 0px;
    height          : auto;
    width           : auto;
}

#curtain > * {
    position: fixed;
}

#curtain > *:not(#modal) {
    display        : flex;
    justify-content: space-around;
    align-items    : center;
}

#modal {
    top          : 10vh;
    bottom       : 10vh;
    left         : 10vw;
    right        : 10vw;
    box-shadow   : 20px 40px 60px 0 rgba(1,23,54, 0.1);
    display      : flex;
    align-content: stretch;
}

#modal-bottom, #modal-top {
    height        : 10vh;
    left          : 0px;
    right         : 0px;
    flex-direction: row;
}

#modal-bottom {
    bottom: 0px;
}

#modal-left, #modal-right {
    top           : 10vh;
    bottom        : 10vh;
    width         : 10vw;
    flex-direction: column;
}

#modal-right {
    right: 0px;
}

#modal-top *:first-child, #modal-bottom *:first-child {
    margin-right: auto;
}

#modal-top *:last-child, #modal-bottom *:last-child {
    margin-left: auto;
}

#modal div.internal-modal-textbox {
    display         : flex;
    flex-direction  : column;
    flex-wrap       : nowrap;
    align-content   : center;
    justify-content : center;
    align-items     : center;
    height          : 100%;
    width           : 100%;
    background-color: #FFFE;
    font-family     : 'Neue Haas Grotesk Disp W05_55R';
    font-size       : 2.3rem;
}

#modal div.internal-modal-textbox span:not(:first-child) {
    font-size       : 1.3rem;
}