.body{
font-size: 18px;
color: black;
}

.form-container{
min-height: 30vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form-container form{
width: 60%;
text-align: center;
}
.form-container form h3{
font-size: 20px;
margin-bottom: 10px;
}
.form-container form .box{
width: 100%;
padding: 12px 14px;
margin-top: 10px;
}
.form-container form p{
margin-top: 20px;
color: black;
}
.form-container form p a{
color: orange;
}
.form-container form p a:hover{
color: blue;
}
.btnReg,
.delete-btn,
.option-btn{
display: inline-block;
padding: 10px 30px;
cursor: pointer;
color: white;

}
.btnReg:hover,
.delete-btn:hover,
.option-btn:hover{
background-color: black;
}
.btnReg{
text-align: center;
background-color: #0096FF;
margin-top: 20px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btnLog,
.delete-btn,
.option-btn{
display: inline-block;
padding: 10px 30px;
cursor: pointer;
color: white;

}
.btnLog:hover,
.delete-btn:hover,
.option-btn:hover{
background-color: black;
}
.btnLog{
text-align: center;
background-color: #04AA6D;
margin-top: 20px;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.delete-btn{
background-color: red;
}
.option-btn{
background-color: yellow;
}
@media screen and (min-width: 992px){
.form-container form{
width: 40%;
text-align: center;
}
.form-container form .box{
width: 80%;
padding: 12px 14px;
margin-top: 10px;
}
}
@media screen and (max-width: 992px){
.form-container form{
width: 40%;
text-align: center;
}
.form-container form .box{
width: 80%;
padding: 12px 14px;
margin-top: 10px;
}
}
@media screen and (max-width: 768px){
.form-container form{
width: 40%;
text-align: center;
}
.form-container form .box{
width: 80%;
padding: 12px 14px;
margin-top: 10px;
}
}
@media screen and (max-width: 600px){
.form-container form{
width: 70%;
text-align: center;
}
.form-container form .box{
width: 100%;
padding: 12px 14px;
margin-top: 10px;
}
}