/*@font-face {
    font-family: 'main';
    src: url('font/Mestika.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}*/
:root{
    /*--light:#c9fff7;
    --dark:#0f2a26;*/
    --light:#fff6e9;
    --dark:#472c12;
}
body {
    font-family: serif;
}
h1,h2,h3{
    font-family: serif;
}
.snake, .actor{
    display:inline-block;
    padding: 4pt;
}
.snake.active, .actor.active{
    border:1px solid black;
    border-radius:12pt;
    margin: 4pt;
    display: inline-block;
    position: relative;
}
.snake>span, .actor>span{
    display: block;
}
.snake .trait{
    /* display:none; */
}
.snake .name, .actor .name{
    font-weight:bold;
}
.snake .val>span, .actor .val>span{
    font-size:8pt;
    margin:0.4vmin;
}
.portrait{/*, .rtl .portrait.player*/
    /* height: 100%; */
    /* width:80pt; */
    display: block;
    /* background:red; */
    text-align:left;
    border-radius:50%;
    overflow:visible;
    vertical-align:top;
    background-size:contain;
    float: left;
    margin: 0 var(--font-size) var(--font-size) 0;
    /* line-height: 36pt; */
    position: relative;
}
.portrait.player{/*, .rtl .portrait*/
    float:right;
    margin: 0 0 var(--font-size) var(--font-size);
    /* text-align: right; */
}

.talk>b>u:first-child, .talk>u:first-child{
    margin:0 var(--font-size) var(--font-size);
    float: left;
}
.rtl .talk>b>u:first-child, .rtl .talk>u:first-child{
    float: right;
}
.talk>u, .talk>b, i>u, i>b, #buttons u{
    text-transform: capitalize;
}
.talk>u:first-child{
    float: right;
    font-weight: bold;
    text-decoration: initial;
}
.rtl .talk>u:first-child{
    float: left;
}
body.rtl{
    /* direction: rtl; */
    text-align: right;
}
body{
    position:absolute;
    inset-inline-start: 0;
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    box-sizing: border-box;
    font-size: var(--font-size);
}

#loading{
    display:none;
    color: #000000;
    font-size: var(--font-size);
    z-index: 100;
    position: fixed;
    /* right: 2vmin; */
    bottom: 3vmin;
    left: 50%;
    transform: translateX(-50%);
}

body.loading #loading, #loading.blocked{
    display:block;
}

#loading::after {
    content: "";
    animation: loadingAnimation 1s steps(9) infinite; /* 4 steps to match symbols */
    /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); */
    filter: drop-shadow(0 0 1pt white);
    background: white;
    padding: 2.5pt 5pt;
    border-radius: 10pt;
    /* display: inline-block; */
    /* line-height:20pt; */
    font-size:var(--font-size);
    box-shadow: 2pt 4pt 8pt rgba(0, 0, 0, 0.25);
}

@keyframes loadingAnimation {
    0%   { content: "◐︎◐︎◐︎"; }
    10%  { content: "◐︎◐︎◓︎"; }
    20%  { content: "◐︎◓︎◑︎"; }
    30%  { content: "◓︎◑︎◒︎"; }
    40%  { content: "◑︎◒︎◐︎"; }
    50%  { content: "◒︎◐︎◐︎"; }
    60%  { content: "◐︎◐︎◐︎"; }
    100% { content: "◐︎◐︎◐︎"; }
}

input, label, button{
    margin:0.5vmin 0.25vmin;
}
input.wait{
    border-color:#8b1a1a;
    color:#800b0b;
}
input.wait:focus{
    outline-color:#8b1a1a;
}
.success #counter, .failed #counter{
    display:none;
}
#counter {
    position: absolute;
    z-index: 20;
    background: black;
    color: white;
    font-size: var(--font-size);
    bottom: 1vmin;
    right: 1vmin;
    display: inline-block;
    padding: min(10pt, 2vmin);
    border-radius: 4vmin 0;
}

#submit{
    position:absolute;
    z-index:21;
    bottom: 100%;
    right: 1vmin;
    background: black;
    border-radius: 4vmin;
    color: white;
    /* font-weight: bold; */
    padding: 1vmin 4vmin;
    border: 0.5vmin solid white;
    display: none;
}
#submit:hover{
    background:var(--dark);
}
.waiting #submit{
    background:#87756c;
    border-style: dashed;
}
.rtl #counter{
    left: 1vmin;
    right:initial;
    border-radius: 0 4vmin;
}
#counter i{
    font-style:normal;
    margin-right: min(2.5pt, 0.5vmin);
}
#counter b{
    font-weight: normal;
    margin-left: min(2.5pt, 0.5vmin);
}
#best{
    font-size: 50%;
    display: inline-block;
    /* width: calc(var(--font-size) * 0.5); */
    line-break: anywhere;
    line-height: calc(var(--font-size) * 0.25);
    white-space: pre;
}

.rtl #playerInput{
    direction:rtl;
}
#footer .Aitem{
     background: #000000;
     color: white;
     filter: drop-shadow(2pt 4pt 8pt rgba(0, 0, 0, 0.5));
     left: 3vmin;
    transition: left 3s;
}
#footer.hide .Aitem{
    left:-25vmin;
}
#buttonRow .Aitem{
    position:relative;
    background:white;
    color:black;
    top: 2vmin;
    float: left;
    margin-right: 2vmin;
}
.Aitem{
     position: fixed;
     font-size: 4vmin;
     min-width: 8vmin;
     height: 8vmin;
     z-index: 50;
     line-height: 7vmin;
     text-align: center;
     border-radius: 4vmin;
     font-weight: bold;
     padding: 0.5vmin;
     box-sizing: border-box;
}
.button:hover, #buttonRow .Aitem:hover{
    filter: drop-shadow(0pt 0pt 4pt var(--light)) !important;
    background-color: var(--light) !important;
    background-blend-mode: multiply;
}
#scrollBottom:hover {
    mask-image: url(img/icon/scroll.png);
    mask-size: contain;
}
#footer .Aitem:hover, #langIcon:hover{
    filter: drop-shadow(0pt 0pt 4pt var(--light)) !important;
    background-color: var(--dark) !important;
    background-blend-mode: lighten;
}
#footer .Aplus{
    bottom: 23vmin;
}
#footer .Aminus{
     bottom: 13vmin;
}
#buttonRow #fontSize{
    position: absolute;
    left: 12vmin;
}
#playerInputWrap{
    width: min(100vw, 80vh);
    top: 80%;
    height: 20%;
    position: fixed;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    filter: drop-shadow(2pt 4pt 8pt rgba(0,0,0,0.5));
    /* z-index: 11; */
}
#playerInput{
    position: absolute;
    height: calc(100% - 2vmin);
    width: calc(100% - 2vmin);
    left:1vmin;
    top:1vmin;
    background: white;
    border: 2pt solid black;
    box-sizing: border-box;
    border-radius: 4vmin;
    font-size: var(--font-size);
    font-family: serif;
    padding: 12pt;
    /* filter: drop-shadow(2pt 4pt 8pt rgba(0, 0, 0, 0.15)); */
    resize: none;
    user-select: text;
}
#playerInput:focus-visible{
    outline-color: #615338;
}
.waiting #playerInput:focus-visible{
    outline-style: dashed !important;
}
.waiting #playerInput{
    border-style: dashed !important;
}
#newButton, #sendWrap{
    display:block;
}
#newButton{
    right: 0;
    bottom: 0;
    position: absolute;
    font-weight: bold;
    font-size: 14pt;
    border-radius: 12pt;
}
#sendWrap{
    left:50%;
}
#sent{
    display:inline-block;
}

#snakes{
    position: absolute;
    top: 70%;
    width:100%;
    height: 20%;
    display: none;
}
#actors{
    position: absolute;
    top: 50%;
    width: 25%;
    height: 50%;
    display: none;
}
#loginForm, #reconnectWrap{
    position:absolute;
    width:100%;
    height:100%;
    background:white;
    left:0;
    top:0;
    z-index:100;
    display: none;
    align-items: center;
}
#loginForm.show, #reconnectWrap.show{
    display: flex;
}
#reconnect{
    width:30vmin;
    height:30vmin;
    position:relative;
    text-align:center;
    font-size:20vmin;
    border-radius:50%;
    border:1pt solid #817447;
    background:#c6c691;
    left:50%;
    transform: translateX(-50%);
    animation: reconnectAnim 1s steps(5) infinite;
}
@keyframes reconnectAnim {
    0%   { border-width: 1pt; }
    100%  { border-width: 10pt; }
}
#buttons{
    position: absolute;
    top: 60%;
    width:100%;
    height: 10%;
    display: none;
}

#input{
    position:absolute;
    inset-inline-start: 0;
    top: 10vmin;
    width:100%;
    height: 10%;
    z-index: 10;
    left: 0;
    background: #c58888;
}
#input.hide>div{
    /* display:none; */
}
#input.hide{
    /* right:0; */
    /* bottom:0; */
    /* width: 5vmin; */
    /* height:5vmin; */
    /* background: #ffffff; */
    /* border-radius:50%; */
    /* border: 1vmin solid black; */
    display: none;
}
#input>div{
    display:inline-block;
}
#footer{
    position: fixed;
    inset-inline-start: 0;
    bottom:0;
    width:100%;
    height: 14vmin;
    z-index:10;
    transition: 3s all;
    /* background: #ebe2cc; */
    pointer-events: none;
}
#footer.hide{
    bottom:-100%;
}
#login{
    position: absolute;
    width:8vmin;
    height:8vmin;
    margin: 3vmin;
    background-image:url(img/icon/key.png);
    background-size:7vmin 7vmin;
    background-repeat:no-repeat;
    filter: drop-shadow(2pt 4pt 8pt rgba(0, 0, 0, 0.15));
    z-index: 10;
    bottom: 0vmin;
    right:0;
    background-position: center;
    display: none;
}
#langIcon{
    position: absolute;
    width:8vmin;
    height:8vmin;
    margin: 3vmin;
    background-image:url(img/icon/language.png);
    background-size: 8vmin;
    background-repeat:no-repeat;
    filter: drop-shadow(2pt 4pt 8pt rgba(0, 0, 0, 0.5));
    z-index: 10;
    bottom: 0vmin;
    background-position: center;
    border-radius: 50%;
}
#footer div{
    pointer-events: all;
}
#langCur{
    position: absolute;
    margin:3vmin;
    line-height: 8vmin;
    font-size: min(30pt, 6vmin);
    font-weight:bold;
    bottom:0;
    left: 10vmin;
    display: none;
}
#language{
    position:absolute;
    inset-inline-start: 0;
    width: 100%;
    height:100%;
    /* left: 50%; */
    top:0;
    z-index: 2;
    /* font-size: 150%; */
    text-align: center;
    padding: 7vw;
    box-sizing: border-box;
    transition: 3s all, 0s font-size;
    /* transform: translateX(-50%); */
    /* display: none; */
    background: white;
    overflow-y: scroll;
    /* column-count: auto; */
    /* column-width: 100pt; */
}
#language .selected{
    font-weight:bold;
    text-decoration: underline;
    background: #fcf4d6;
    border-radius: 3vmin;
}
#language div:hover{
    font-weight:bold;
}
#langWrap{
    position:absolute;
    inset-inline-start: 0;
    z-index:10;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* pointer-events: none; */
    display: none;
}
#logo{
    position:absolute;
    inset-inline-start: 0;
    top: 0%;
    left:0;
    width:100%;
    z-index: 4;
    text-align:center;
    font-size: min(100pt, 16vmin);
    /* font-family: main; */
    background: linear-gradient(0deg, transparent, white, white, white);
    padding: 5% 0 5vmax;
    transition: 3s all;
    pointer-events: none;
    /* color: white; */
}
#header{
    z-index: 3;
    position: fixed;
    inset-inline-start: 0;
    top: 0%;
    left:0;
    width:100%;
    height: 35%;
    background: url(img/people.jpg);
    background-size: 40%;
    mask: linear-gradient(0deg, transparent, white);
    mix-blend-mode: exclusion;
    /* opacity: 1.5; */
    pointer-events:none;
    display: none;
}
#logo.hide{
    top: -50%;
}
#menu{
    position:absolute;
    inset-inline-start: 0;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    z-index: 3;
    /* font-size: 150%; */
    text-align: center;
    padding: 35vmin 0 30vmin;
    box-sizing: border-box;
    transition: all 3s, font-size 0s;
    overflow-y: scroll;
    /* background: #fff9eb; */
}
#menubg{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    z-index: 2;
    pointer-events:none;
    transition: all 3s, font-size 0s;
    background: #fff9eb;
}
#menubg::after{
    content:"";
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    top:0;
    background: url(img/people.jpg);
    background-size: 40vmax;
    opacity: 0.05;
    pointer-events:none;
}
body{
}
#menu.hide, #menubg.hide{
    left: -100%;
}
#menu .win{
    color:green;
    margin-left: 20pt;
    position: absolute;
    font-size: 10pt;
}
#menu .fail{
    color:#800000;
    margin-left: 20pt;
    position: absolute;
    font-size: 10pt;
    transform: translateY(80%)
}
#menu .game>span{
    display:inline-block;
}
#menu .game>span:hover{
    font-weight:bold;
}
.rtl #menu div{
    direction: rtl;
}
#menu div{
    padding:3pt 6pt;
}
.game b{
    font-weight:normal;
    font-size: 70%;
    margin-left: 4pt;
}
.game u{
    text-decoration:none;
}
/*#back, #retry, #query, #cam, #copy, #scrollTop, #scrollBottom*/
.button{
    height: 8vmin;
    width: 8vmin;
    background: white;
    vertical-align: middle;
    text-align: center;
    border-radius: 100%;
    font-size: 6vmin;
    line-height: 10vmin;
    background-size: contain;
}
#buttonRow{
    filter: drop-shadow(2pt 4pt 8pt rgba(0,0,0,0.5));  
}
#scrollBottom{
    position:fixed;
    left: 2vmin;
    top: 46vmin;
    background-color: transparent;
    background-image: url(img/icon/scroll.png);
    opacity: 0.0;
    transform: scaleY(-1);
    filter:none;
    transition: opacity 1s;
    z-index: 1000;
}
#scrollBottom.show{
    opacity: 1;
}
#scrollTop{
    position:fixed;
    left:2vmin;
    bottom: 22vmin;
    background-color: transparent;
    background-image: url(img/icon/scroll.png);
    opacity: 0.5;
    filter:none;
}
#back{
    position:absolute;
    /* inset-inline-start: 0; */
    top: 2vmin;
    left: 2vmin;
    background-image: url(img/icon/back.png);
}
#retry{
    position:absolute;
    /* inset-inline-start: 0; */
    top: 2vmin;
    right: 2vmin;
    background-image: url(img/icon/retry.png);
}
.waiting #retry, .waiting #query{
    opacity:0.5;
    pointer-events: none;
}
#copy{
    position:absolute;
    /* inset-inline-start: 0; */
    top: 2vmin;
    right: 12vmin;
    background-image: url(img/icon/copy.png);
}
#query{
    position:absolute;
    /* inset-inline-start: 0; */
    top: 2vmin;
    right: 22vmin;
    background-image: url(img/icon/query.png);
}
#cam{
    position:absolute;
    /* inset-inline-start: 0; */
    top: 2vmin;
    right: 32vmin;
    background-image: url(img/icon/cam.png);
}
#outputWrap{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    right: 0;
}
#outputWrap::-webkit-scrollbar {
    display:none;
}
#output{
    position:relative;
    /* font-size: min(20pt, 4vmin); */
    background: white;
    transition: 10s all, 0s font-size;
    max-width: 100vmin;
    left: 50%;
    transform: translateX(-50%);
}

#wrap, #loginForm form{
    position:absolute;
    inset-inline-start: 0;
    width: min(100vw, 80vh);
    height: 100%;
    left: 50%;
    top:0;
    transform: translateX(-50%);
    /* direction: ltr; */
    /* z-index: 10; */
}
.rtl #wrap{
    /* left: initial; */
    /* right:50%; */
    /* transform: translateX(50%); */
}
#story{
    position:relative;
    user-select: text; /* Disable text selection */
}
.rtl #story{
    direction: rtl;
}
.success #output{
    filter: hue-rotate(48deg);
    animation: blurSuccess 2s ease-out forwards;
}
/* Define the animation */
@keyframes blurSuccess {
    0% {
        filter: none; /* No blur and brightness at the start */
    }
    25% {
        filter: blur(0.5vmin) brightness(1.1) hue-rotate(0deg); /* Apply blur and increase brightness */
    }
    100% {
        filter: blur(0) brightness(1) hue-rotate(48deg) saturate(3.0); /* Return to normal */
    }
}
.failed:not(.success):not(.waiting) #output{
    filter: hue-rotate(-60deg);
    animation: blurFailed 2s ease-out forwards;
}
/* Define the animation */
@keyframes blurFailed {
    0% {
        filter: none; /* No blur and brightness at the start */
    }
    25% {
        filter: blur(0.5vmin) brightness(1.1) hue-rotate(0deg); /* Apply blur and increase brightness */
    }
    100% {
        filter: blur(0) brightness(1) hue-rotate(-60deg) saturate(3.0); /* Return to normal */
    }
}
#outputFooter{
    height: 20%;
    /* position:relative; */
    text-align: center;
    width: 100%;
    /* background: linear-gradient(90deg, black, #ff0000); */
    box-sizing: border-box;
    /* border: 2px solid red; */
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}
#outputFooter .checkmark{
    /* display: inline; */
    margin: 0;
    filter: drop-shadow(2pt 4pt 8pt rgba(0,0,0,0.25));
}

#output u{
    text-decoration:none;
}

#output i{
    color:black;
    display: block;
    padding: 1vmax;
    clear: both;
    /* text-align: center; */
    background: #e6decf;
    white-space: pre-line;
}

#output span{
    display:block;
    margin:1vmin;
    clear: both;
    filter: drop-shadow(0pt 0pt 2pt white);
    /* background: linear-gradient(308deg, red, blue); */
}

#output .Ⓣ, #output .Ⓐ, #output .Ⓠ, #output .Ⓡ, #output .©, #output .Ⓧ, #output .⚙, #output .❔, #output .⧗{
    text-align: center;
    font-size:70%;
    background: #000000 !important;
    color:white;
    display: none;
}
#outputWrap #output .admin.✘, #outputWrap #output .admin.✔{
    text-align: center;
    /* border: 3pt solid #fbd666; */
    font-weight:bold;
    margin: 10vmin 0 0;
    width: 100%;
    display: none;
}
#output .Ⓣ:before, 
#output .Ⓐ:before, 
#output .Ⓠ:before, 
#output .Ⓡ:before, 
#output .©:before, 
#output .Ⓧ:before, 
#output .⚙:before, 
#output .❔:before, 
#output .⧗:before, 
#output .✔:before, 
#output .✘:before{
    display:none;
    border-color: #000000 transparent !important;
}
#output>u{
    display:none;
}
#output .Ⓧ u{
    float: initial !important;
}
#output .talk.player{
    text-align: right;
    float: right;
    background: white;
    /* padding-right: 10vw; */
    margin-right: 5%;
    /* position: relative; */
    margin-left: initial;
}
/*.rtl #output .talk.player{
    float:left;
}*/
#output .talk.player:before{
    content:"";
    /* background:red; */
    width: 3vmin;
    height: 3vmin;
    position: absolute;
    /* inset-inline-start: 0; */
    border-color: #ffffff rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 3vmin 5vmin 0;
    box-sizing: border-box;
    right: -4vmin;
    top: 1vmin;
    z-index: -1;
}
#story>u{
    display:none;
}
#output .talk:not(.player):before{
    content:"";
    width: 3vmin;
    height: 3vmin;
    position:absolute;
    /* inset-inline-start: 0; */
    border-color: #ffffe2 rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 3vmin 5vmin 0;
    box-sizing: border-box;
    left: -4vmin;
    top: 1vmin;
    z-index: -1;
}
#output .talk{
    padding: 6pt;
    border-radius: 12pt;
    background: white;
    filter: drop-shadow(2pt 4pt 8pt rgba(0,0,0,0.25));
    background: #ffffe2;
    box-sizing: border-box;
    width: 94%;
    margin-left: 5%;
    white-space: pre-line;
    position: relative;
}
#output .talk.☒{
    background:black;
    color:white;
}
#output .talk.☒:before{
    border-color: #000000 rgba(0, 0, 0, 0);
}
#output .Ⓠ{
    text-align: right;
}
#output .Ⓡ{
    text-align: right;
}

#cover{
    width: calc(100% - 24pt);
    box-sizing: border-box;
    position: relative;
    /* margin: 4pt 12pt 0pt; */
    margin-block-start: 4pt;
    margin-inline-start: 12pt;
    margin-inline-end: 12pt;
    inset-inline-start: 0;
}
.rtl #cover img{
    /* margin-inline-start: -24pt; */ /* Right in RTL, Left in LTR */
}
#cover center{
    width: 100%;
    position: absolute;
    bottom: 10%;
    display: table-row;
    inset-inline-start: 0;
}
.rtl #cover center{
    direction:rtl;
}
#cover h1{
    text-align:center;
    font-weight:normal;
    bottom: 15%;
    margin: 0;
    background: #ffffff;
    font-size: 10vmin;
    display: table-caption;
    border-radius: 5vmin;
    padding: 0 5vmin;
    box-shadow: 2pt 4pt 8pt rgba(0, 0, 0, 0.5);
    word-break: keep-all;
}
#cover img{
    width: min(100vw, calc(80vh - 6pt));
    position: relative;
    filter: contrast(0.9) sepia(0.5);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
}
#task{
    text-align:center;
    padding:12pt;
    user-select: text;
}
img {
    box-shadow: 2pt 4pt 8pt rgba(0, 0, 0, 0.25); /* Creates the fading effect */
    border-radius: 5vmin 5vmin; /* Optional for rounded corners */
}

/* Basic styling for container and checkmarks */

  .checkmark, .badmark {
    font-size: 14vmin;
    opacity: 0;
  }
  .failed:not(.success) .checkmark, .success .badmark{
    display:none;
  }

  .success .checkmark {
    transform: scale(0.5);
    animation: bounce 0.6s ease forwards;
  }

  .failed:not(.success):not(.waiting) .badmark{
    transform: scale(0.5);
    animation: bounce 2s ease forwards;
  }

  /* Animation for sequential appearance with scaling and bounce effect */
  @keyframes bounce {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

.clicked{
    animation: clicked 0.6s ease forwards;
}

@keyframes clicked {
    0% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  /* Sequential delays for each checkmark */
  .checkmark:nth-child(1) {
    animation-delay: 0.3s;
  }
  .checkmark:nth-child(2) {
    animation-delay: 0.6s;
  }
  .checkmark:nth-child(3) {
    animation-delay: 0.9s;
  }
  .checkmark:nth-child(4) {
    animation-delay: 1.2s;
  }

#outputFooter.star3 .checkmark:nth-child(4) {
    display:none;
  }

#outputFooter.star2 .checkmark:nth-child(3),
#outputFooter.star2 .checkmark:nth-child(4) {
    display:none;
  }

#outputFooter.star1 .checkmark:nth-child(2),
#outputFooter.star1 .checkmark:nth-child(3),
#outputFooter.star1 .checkmark:nth-child(4) {
    display:none;
  }

  html, body {
    touch-action: pan-y;
    user-select: none; /* Disable text selection */
}

.copied{
    position:fixed;
    /* top:10vh; */
    top: 11vmin;
    right: 16vmin;
    z-index: 1000;
    transform: translateX(50%);
    background: white;
    border-radius: 3vmin;
    padding: 1vmin 3vmin;
    font-size: 20pt;
    animation: fadeOut 3s ease forwards;
}

@keyframes fadeOut {
    0% {
      opacity: 0;
      transform: translateX(50%) scale(0.5);
    }
    10% {
      opacity: 1;
      transform: translateX(50%) scale(1.2);
    }
    20% {
      opacity: 1;
      transform: translateX(50%) scale(1);
    }
    100% {
        opacity:0;
    }
  }

#loginForm label, #loginForm input
{
    display:inline-block;
    width:100%;
    box-sizing: border-box;
}
#loginForm button{
    width:100%;
    margin-top: 15pt;
}