body {
    
    font-family: "Noto Sans", sans-serif;
    font-size:16px;
}
input 
{
    font-size: 16px;
    padding: 18px;
    border-radius: 18px;
    margin: 14px;
    width: 80%;
}
.label {
    display:block;
    font-size: 16px;
    color:black;
    padding-left:14px;
    padding-top:24px;
}
.title {
    padding-bottom:14px;
    font-size: 24px;
}
.loginpanel {
     width:100%;
     background-color:#eeeeee;
     opacity: 0.9;
     border-radius:24px;
     border:solid 2px darkgrey;
     padding:18px;
     max-width:500px;

}
.logonbutton 
{
    font-size:18px;
    padding: 18px;
    border-radius: 18px;
    margin-top: 18px;
    background-color:lch(59.96% 32.17 168.25);
    color: white;
}

/* Mobile Devices */
@media  (max-width: 800px) {
.infopanel{
    display:none;
}
.loginpanel {
     width:80%;
     background-color:#eeeeee;
     opacity: 0.9;
     border-radius:24px;
     border:solid 2px darkgrey;
     padding:24px;
     margin:auto;
    display:inline-block;

}
}       

    
/* Laptops and Desktops */
@media (min-width: 1025px) {
.infopanel{
    display:inline-block;
    width: calc(100% - 800px);
    height: -webkit-fill-available;
    margin: 14px;
    padding:14px;
    font-size:48px;
    color:white;
    padding-top:92px;
    vertical-align: top;
}

.loginpanel {
     width:340px;
     background-color:#eeeeee;
     opacity: 0.9;
     border-radius:24px;
     border:solid 2px darkgrey;
     padding:24px;
     margin:64px;
     display:inline-block;
}

}