#wyvern-layer-main
    {
        top:0;
        position:absolute;
        width:100%;
        height:100%;
        z-index: 900;
        margin:auto;
        inset: 0;
        overflow: hidden;
        display:none;
    }
    #wyvern-layer-main .logon-box
    {
        background: #1c1c1c;
        inset: 0;
        margin: auto;
        position: absolute;
        min-width: 320px;
        max-width: 320px;

        min-height: 250px;
        max-height: 512px;

        background: rgba( 0,0,0,0.7);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        box-shadow: inset rgba(0, 0, 0, 0.9) 0 190px 380px, rgba(0, 0, 0, 0.9) 0 150px 300px;
        padding:10px;
        color: whitesmoke;
        text-align: center;
        border: solid 1px rgba(255,255,255,0.1);
        overflow: hidden;

        background-size: cover;
        background-image:url("../img/logon/box.jpg");
        justify-content: space-between; /* Adjusts spacing between the child containers */
        align-items: center; /* Aligns items vertically */
        gap: 10px; /* Adds space between the child containers */
        display: flex!important;

        font-weight: normal;

    }
    #wyvern-layer-main #logon-options
    {
        width:80%;
        left: 0;
        right: 0;
        bottom: 15px;
        position: absolute;
        text-align: center;
        margin:auto;
    }
    #wyvern-layer-main .logon-option
    {
        color: rgba(255,255,255,0.5);
        text-shadow: 0 4px 5px rgba(0,0,0,1.0);
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
        margin:10px;
        font-size: 14px;
    }
    #wyvern-layer-main .logon-option:hover
    {
        color: rgba(255,255,255,0.9);
    }