.modal__add-profile{
  margin:auto;
  padding: 30px 40px;
  position:relative;
  text-align: center;
  border:none;
  border-radius: 15px;
  box-shadow: 5px 5px 20px gray;
}
.guide-text{
  display: inline-block;
}
.btn__close{
  position:absolute;
  right:5%;
  padding:0px 5px;
  border:none;
  border-radius: 30%;
  font-weight: 700;
  cursor: pointer;
  transition:background-color 0.2s;
}
.btn__close:hover{
  background-color:rgb(173, 255, 80);
}
dialog .preview{
  width:12rem;
  object-fit: cover;
  border-radius: 10px;
  display:block;
  margin:1rem auto;
}
label {
  display: inline-block;
  padding:3px 10px;
  cursor: pointer;
  font-weight: 900;
  transition:background-color 0.3s;
  border-radius: 10px;
}
#avatar {
  display: none;
}
label:hover{
  background-color:rgb(173, 255, 80);
}
.input-profile{
  font-weight: 700;
  margin:1.5rem auto 0px;
  line-height: 2rem;
  text-align: left;
  border-radius: 15px;
  padding:20px 10px 10px 10px;
  box-shadow: 5px 5px 20px lightgray;
}

.input-profile span{
  display: block;
  margin-left:1rem;
}
.input-profile input{
  border:1px solid black;
  border-radius: 10px;
  padding: 0px 5px;
  display: block;
}
.input-profile-grid div:last-child input{
  width:100%
}
.btn__upload{
  display: block;
  padding:0.4rem;
  width:5rem;
  margin:1rem auto;
  background-color: rgb(173, 255, 80);
  border-radius: 10px;
  font-weight: 900;
  cursor:pointer;
  transition: background-color 0.5s, color 0.3s;
}
.btn__upload:hover{
  color: rgb(173, 255, 80);
  background-color: black;
}

@media (min-width:666px){
  .input-profile-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3px;
  }
  .input-profile-grid div:nth-child(5){
    grid-column:1/3;
  }
}