.popup-frame
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 

    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    backdrop-filter: blur(5px);

    z-index: 5;
    transition: 0.5s opacity;
}

.no-frame
{
    opacity: 0;
    transition: 0.5s opacity;
}

.no-display
{
    display: none;
}

.popup
{
    position: fixed;
    width: min-content;
    height: min-content;

    padding: 1em;

    background-color: rgba(0, 0, 0, 0.719);
    border-style: solid;
    border-color: white;
    border-radius: 1em;
    border-width: 2px;

    transition: 0.5s opacity;
}

.no-popup
{
    opacity: 0;
    transition: 0.5s opacity;
}

.popup h1
{
    width: 100%;
    margin: 0;
    margin-bottom: 0.5em;

    text-align: center;
    font-family: 'Questrial';
    font-size: 2em;
    color: white;
}

.popup input
{
    width: 20em;
    margin-bottom: 0.3em;
    padding: 0.3em;

    font-size: 1.3em;
    font-family: 'Work Sans';
    text-align: center;

    border: none;
    border-radius: 0.25em;
    outline: none;

    background-color: rgb(255, 255, 255);
}

.popup button
{
    display: block;

    margin-top: 0.5em;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3em;

    font-size: 1em;
    font-family: 'Work Sans';
    text-align: center;

    border: none;
    border-radius: 0.25em;
    outline: none;

    color: white;
}

.popup a
{
    color: gray;
    font-family: 'Work Sans';
    font-size: 0.7em;
}

.popup .error
{
    width: calc(100% - 1em);
    padding: 0.5em;
    
    color: rgb(231, 106, 106);
    background-color: rgba(109, 21, 21, 0.521);
    border-radius: 0.25em;

    text-align: center;
    font-family: 'Work Sans';
}

.popup .info
{
    width: calc(100% - 1em);
    padding: 0.5em;
    
    color: rgb(143, 231, 106);
    background-color: rgb(49, 109, 21, 52%);
    border-radius: 0.25em;

    text-align: center;
    font-family: 'Work Sans';
}