*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Ubuntu;
}
 
body{
   min-height: 100%;
   color: #555;
   background-color: rgb(191, 191, 211);
   margin-bottom: 100px;
}
 
h1{
   text-align: center;
   margin-top: 30px;
   margin-bottom: 30px;
   color: #555;
   font-size: 40px;
}
 
form{
   border:  thin solid #e4e4e4;
   padding: 0 20px 20px 20px;
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
   width: clamp(300px, 95%, 500px);
   margin: 0 auto;
}
 
form label{
   display: block;
   margin-bottom: 10px;
   margin-top: 15px;
   color: #052131;
   font-size: 17px;
}
 
form input, form textarea{
   display: block;
   width:  100%;
   padding: 10px;
   font-size: 18px;
   border:  thin solid #e4e4e4;
   border-radius: .2rem;
}
 
form select{
   display: block;
   width:  100%;
   margin-bottom: 10px;
   padding: 10px;
   font-size: 18px;
   border:  thin solid #e4e4e4;
   background-color: white;
   color: #555;
}
 
form input:focus,
form select:focus,
form textarea
{
   outline: none;
}
 
form textarea{
   min-height: 80px;
}
 
form input::placeholder{
   font-size: 16px;
}
 
form button{
   background: #32749a;
   color: white;
   border: none;
   padding: 15px;
   width:  100%;
   font-size: 20px;
   margin-top: 40px;
   cursor: pointer;
   border-radius: .2rem;

}

form button:hover{
   background-color: #38627a;
}

form button:active{
   background-color: green;
}
 
.radio-buttons{
   margin-top: 40px;
}
 
.radio-buttons input{
   display: inline-block;
   width: auto;
}
 
.radio-buttons span{
   padding-left: 20px;
}
 
.radio-buttons span:nth-child(2){
   padding-left: 0;
}
 
.checkboxes{
   margin-top: 20px;
}
 
.checkboxes input{
   width: auto;
   display: inline-block;
}
 
.checkboxes span{
   padding-left: 20px;
}
 
.checkboxes span:nth-child(2){
   padding-left: 0;
}
 
.out{
   font-size: 17px;
   line-height: 28px;
}
 
.out span{
   font-weight: bold;
   color:  #32749a;
}
 
.error{
   margin-top: 10px;
   color: #af0c0c;
   background-color: #ffe7eb;
   padding: 10px;
/*	display: none;*/
   line-height: 24px;
}

.error-center{
   margin-top: 10px;
   color: #af0c0c;
   background-color: #ffe7eb;
   padding: 10px;
/*	display: none;*/
   line-height: 24px;
   text-align: center;
   width: clamp(300px, 85%, 456px);
}
 
.success{
   margin-top: 30px;
   background-color: #dbffdb;
   padding: 10px;
   color: green;
}
.success-center{
   margin-top: 30px;
   background-color: #dbffdb;
   padding: 10px;
   color: green;
   text-align: center;
}

.banner{
        grid-area: banner;
        border: 2px solid black;
        background-color: #4c82af;
        color: rgb(240, 239, 234);
        padding-right: 10px;
        text-align: center;
        font-family: tahoma;
        font-size: clamp(.7rem, 2rem, 2.5rem);
        font-weight: bold;
        text-shadow: .1rem .1rem .1rem #9c9b9b;
        height:auto;
 }
.halfBanner {
        background-color: #5a87ac;
        color: rgb(240, 239, 234);
        padding: 10px;
        text-align: center;
        font-family: tahoma;
        font-size: 1.5rem;
        font-weight: bold;
        text-shadow: .1rem .1rem .1rem #7a7a7a;
        height:auto;
        width: fit-content;
         margin-left: auto;
         margin-right: auto;
        margin-top: 1.2rem;
        margin-bottom: 1.5rem;
        border-radius: .25rem;
}
.startBanner {
        color: rgb(240, 239, 234);
        padding: 10px;
        text-align: center;
        font-family: tahoma;
        font-size: 30px;
        font-weight: bold;
        text-shadow: 3px 3px 3px #7a7a7a;
        height:auto;
        width: fit-content;
         margin-left: auto;
         margin-right: auto;
        margin-top: 1.2rem;
        border-radius: 10px;
}
.div_center {
        text-align: center;
        }
.button-resize {
         width: fit-content;
         height: auto;
         font-size: 18px;
         font-weight: bold;
         color: white;
         padding: 10px;
         margin-top: 15px; 
         margin-left: auto;
         margin-right: auto; 
         background-color: #5a87ac;
         border-radius: 10px;        
       }

.logout-button {
         float: right;
         background-color: #192b36;
         color: white;
         border: 2px;
         padding: 5px 7px 7px 7px;
         font-size: 17px;
         cursor: pointer;
         border-radius: 5px;
         margin: 10px 10px 10px 10px;
       }
.logout-button:hover {
         background-color: #858585;
       }
.home-button {
         float: left;
         background-color: #192b36;
         color: white;
         border: 2px;
         padding: 5px 7px 7px 7px;
         font-size: 17px;
         cursor: pointer;
         border-radius: 5px;
         margin: 10px 10px 10px 10px;
       }
.home-button:hover {
         background-color: #858585;
       }
.imgbox {
                text-align: center;
                width: 120px;
                max-height: 300px;
                border: 3px solid gray;
                margin: auto;
                padding: 6px;
            }
.footer {
            position: fixed;
            bottom: 10px;
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            background-color: #cccccccc;
            }