body {
    background: linear-gradient(180deg, #fff8e1 0%, #ffe0b2 100%);
}
.logo {
    margin-top: 1px;
    margin-left: 1px;
}

.logo img {
    width: clamp(2rem, 5vw, 8rem);
    height: auto;
    display: block;
}



.title{
    width: clamp(20rem, 80vw, 50rem); 
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.8rem, 3vw, 3rem); 
    font-weight: bold; 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}

.main{
    width: clamp(20rem, 80vw, 50rem); 
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.9rem, 2vw, 1.6rem); 
    margin-top: clamp(.8rem, 1vh, 0.5rem);
    z-index: 1;
}
.main.button{
    width: clamp(6rem, 10vw, 8rem); 
}

.info{
    width: clamp(20rem, 50vw, 45rem); 
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.2rem, 2vw, 1.5rem); 
    color: blue;
}

/*-----------------------------------*/
.input-bar {
    width: clamp(19rem, 80vw, 50rem); 
    margin-left:5px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.inputInfo {
  width: 220px;   /* label width for desktop */
  margin-right: 10px;
}

@media (max-width: 600px) {
  .input-bar {
    flex-direction: column;  /* stack on mobile */
    align-items: stretch;
  }
  .inputInfo {
    width: 90%;             /* take full width on mobile */
    margin-bottom: 5px;
  }
}
/*----------------------
.input-bar {
  
    width: clamp(20rem, 50vw, 45rem);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.inputInfo {
  width: 150px;   abel width for desktop 
  margin-right: 10px;
}
*/








/*
.input-bar{
    width: clamp(20rem, 50vw, 45rem);
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    display: flex;
    justify-content: 1px;
    margin-top: 5px; 
    align-items: left;
    padding: 5px;
}


.inputInfo{
    width: clamp(20rem, 50vw, 15rem);
    font-size: clamp(1.5rem, 2vw, 1.4rem);
}
*/
.inputType{
    width: clamp(20rem, 50vw, 30rem);
    font-size: clamp(1.5rem, 2vw, 1.5rem);
}


.obligatory{
    width: clamp(20rem, 50vw, 10rem);
    font-size: clamp(1.5rem, 2vw, 1.4rem);
    color: red;
}
.register-bar{
    width: clamp(20rem, 50vw, 45rem);
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    display: flex;
}
.register-button{
    margin-top: 10px; 
    margin-right: 15px;
    padding: 4px 6px;   
    font-size: clamp(0.85rem, 4vw, 1.7rem);
    height: 40px;
    width: 120px; 
    border-radius: 8px; 
    border: 2px solid #999;
    background-color: #0098e1;
    color: white;
}
button:hover {
  background-color: #ffcc00;
}