html{font-family:Calibri}@media screen and (max-width:320px){body{display:none}}@media screen and (min-width:320px){.login,body{background-color:#fff}body{display:block}body,header{margin:0}header figure{margin:auto;padding:20px;inline-size:80%}header img{inline-size:100%}form,main figure{margin:auto;inline-size:max-content}footer{color:#d3d3d3;text-align:center;position:relative;inset-block-start:10px}.login h1,figure img{background-color:var(--fs_primary)}figure a img,figure img{margin:auto;inline-size:100%;max-block-size:200px;max-inline-size:200px}figure a img{background-color:transparent}.login{margin:50px auto auto;padding-block-end:20px;inline-size:80%;border-radius:15px;box-shadow:0 3px 20px 0 rgba(0,0,0,.1)}.login h1{border-radius:15px 15px 0 0;padding:40px;color:#fff;font-size:30px;text-align:center}.login h2{text-align:center;font-size:12px;color:#3b6891;padding-block-end:10px}form{inline-size:90%;display:grid;grid-template-rows:repeat(5,0fr);text-align:left;color:#6f6f6f}form label{padding:10px 0}form input{color:#3b6891ff;padding:10px 5px;border-radius:5px;border:1px solid #3b6891;transition:.5s}::placeholder{color:#6f6f6f}.submit{margin:40px auto;padding:20px;inline-size:50%;background-color:var(--fs_primary);border:0;color:#fff;border-radius:15px}.submit:hover{background-color:#6f6f6f;color:#fff;cursor:pointer}.error{text-align:center;font-size:12px;color:red;font-style:italic}#validationBox{display:none;position:relative}#validationBox p{margin:0;padding-inline-start:35px;font-size:12px}.valid{color:#39b54a}.invalid:before,.valid:before{position:relative;left:-35px;content:"✔"}.invalid{color:red}.invalid:before{content:"✖"}.toggle-password{block-size:10px}.toggle-password img{block-size:15px;inline-size:15px;position:relative;inset-inline-start:525px;inset-block-start:-25px}}@media screen and (min-width:768px){header,main{margin:auto;max-inline-size:768px}}