@keyframes glare {

    2%,
    100% {
        left   : 130%;
        bottom : -200%;
        width  : 120px;
        opacity: 1;
    }
}

section#authentication {
    z-index       : 1000;
    width         : 400px;
    position      : relative;
    margin        : 25vh auto;
    display       : flex;
    flex-direction: column;
}

section#authentication>section.header {
    z-index                  : 1000;
    height                   : 100px;
    margin-left              : -50px;
    padding                  : 30px 0;
    display                  : flex;
    clip-path                : url(#authentication-header-mask);
    border-radius            : 3px 3px 0 0;
    animation-duration       : 120s;
    animation-name           : background;
    animation-iteration-count: infinite;
    background-repeat        : no-repeat;
    animation-timing-function: ease-in-out;
}

section#authentication>section.header>img.avatar {
    z-index           : 1500;
    left              : 6px;
    top               : 36px;
    width             : 88px;
    height            : 88px;
    position          : absolute;
    margin            : auto;
    object-fit        : cover;
    border-radius     : 100%;
    cursor            : pointer;
    image-rendering   : smooth;
    box-shadow        : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow   : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}

section#authentication>section.header>img.avatar:hover {
    left              : 0;
    top               : 30px;
    width             : 100px;
    height            : 100px;
    box-shadow        : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
}

section#authentication>section.header>div.glare {
    z-index                  : 3000;
    left                     : -30px;
    top                      : -300px;
    width                    : 30px;
    height                   : 400%;
    position                 : absolute;
    rotate                   : 25deg;
    opacity                  : 0.2;
    filter                   : unset;
    pointer-events           : none;
    animation-name           : glare;
    animation-duration       : 32s;
    animation-delay          : 2s;
    animation-fill-mode      : forwards;
    animation-timing-function: linear;
    background-color         : #fff;
}

section#authentication>section.header>div {
    animation-duration: 80s;
}

section#authentication>section.header>h3 {
    margin        : auto;
    width         : 100%;
    margin-left   : 110px;
    padding-bottom: 0.5ex;
    white-space   : nowrap;
    overflow-x    : hidden;
    text-overflow : ellipsis;
    font-size     : 1.3em;
    color         : var(--text-inverse);
    text-shadow   : 0 0 8px #00000080;
}

section#authentication>section.body {
    margin-top        : -160px;
    padding           : 180px 30px 20px 30px;
    gap               : 3ex;
    display           : flex;
    flex-direction    : column;
    border-radius     : 3px;
    background-color  : var(--background-above);
    box-shadow        : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}

section#authentication>section.body>a {
    margin-left: 5%;
    font-size  : 1.2em;
    font-weight: bold;
}

section#authentication>section.body>ul {
    margin       : unset;
    margin-left  : 10%;
    margin-bottom: 1ex;
}

section#authentication>section.body ul ul {
    padding-top: 1ex;
}

section#authentication>section.body ul li:not(:last-child) {
    margin-bottom: 1ex;
}

section#authentication>section.body div.buttons {
    display: flex;
}

section#authentication>section.body div.buttons>button {
    padding         : 1ex 2ex;
    cursor          : pointer;
    border-radius   : 3px;
    font-size       : 0.9em;
    background-color: unset;
}

section#authentication>section.body div.buttons>button:hover {
    color: var(--text-hover);
}

section#authentication>section.body div.buttons>button:active {
    color     : var(--text-active);
    transition: unset;
}

section#authentication>section.body div.buttons>button:first-of-type {
    margin-left : auto;
    margin-right: 5%;
}

section#authentication>section.body div.buttons>button:last-of-type {
    margin-right: auto;
}

section#authentication>section.body div.buttons>button.accept {
    padding         : 1ex 5ex;
    color           : var(--text-inverse);
    background-color: #63954d;
}

section#authentication>section.body div.buttons>button.accept:hover {
    color           : var(--text-inverse-above);
    background-color: #6fa259;
}

section#authentication>section.body div.buttons>button.accept:active {
    background-color: #63954d;
}