@import "./avatar.css";

/* -----------main content fieldset input--------------- */

.input-container{
    border: 1px solid var(--primary-color);
    width: 60%;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.3rem;
}

.submit-btn{
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    padding: 0.5rem;
    margin-top: 0.5rem;
    cursor: pointer;
    border-radius: 0.3rem;
    color: var(--background-color);
}

.submit-btn:hover{
    background-color: var(--primary-color);
}

.input-field{
 width: 90%;
 outline: none;
border: transparent;
visibility: none;
}

legend{
    font-size: 16px;
}

.input-2{
    color: red;
}
/* ------------check box & radio box------------- */
.check-box{
    margin-top: 2rem;
    font-size: 20px;
    width: 90%;
 padding: 1rem;
 border: 1px solid var(--primary-color);

}

.radio-box{
    margin-top: 2rem;
    font-size: 20px;
    width: 90%;
 padding: 1rem;
 border: 1px solid var(--primary-color);

}

legend{
    font-size: 1.5rem;
}
/* ------------------------file & date input----------------------- */
.versions-of-input{
    margin-top: 2rem;
  border: 1px solid var(--primary-color);
width: 80%;
padding: 1rem;
}

input[type="checkbox"]:checked {
    box-shadow: 0 0 0 3px var(--primary-color);
  }

.outline-input{
    margin-left: 2rem;
    outline: none;
    width: 90%;
 outline: none;
border: transparent;
visibility: none;
padding: 1rem;
}

footer{
    position: relative;
    top: 70rem;
}