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,main img{margin:auto;inline-size:max-content}main img{inline-size:100%;max-block-size:200px;max-inline-size:200px}.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{background-color:#39b54a;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(4,1fr);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:#39b54a;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}}@media screen and (min-width:768px){header,main{margin:auto;max-inline-size:768px}}