.popup-form {
  position: fixed;     
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  margin-top: 0;          
  border-radius: 5px;
  border: 3px #ffffff solid;
  padding: 20px 10px 10px 10px;   
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-columns: 1fr;
  z-index: 9998;     
  visibility: hidden;
}

.popup-form-login {
  position: fixed;     
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  margin-top: 0;          
  border-radius: 5px;
  border: 3px #ffffff solid;
  padding: 20px 10px 10px 10px;   
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
  grid-template-columns: 1fr;
  z-index: 9999; 
  visibility: hidden;  
}

.popup-form-login .popup-name-login {
  grid-row: 2; 
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 6px;
  padding: 5px 20px 5px 10px;
  margin-right: 2px;
  border: 2px solid black;
  justify-self: center;
}

.popup-form-login .popup-password-login {
  grid-row: 3; 
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 6px;
  padding: 5px 20px 5px 10px;
  margin-right: 2px;
  border: 2px solid black;
  justify-self: center;
}

.popup-form-login .popup-login-title {
  grid-row: 1; 
  font-size: 20px;
  font-weight: bold;
  margin: -20px -10px 20px -10px;
  padding: 10px 0px 10px 25px;
  justify-self: center;
  border-radius: 7px 7px 0px 0px;
}

.popup-form-login .login-btn{
  grid-row: 4; 
  border-radius: 7px;
  margin-bottom: 10px;
  font-size: 20px;
  color: #3c3d3f;
  background: #ffffff;
  border: 2px solid black;
  padding: 10px 20px 10px 20px;
  grid-column: 1;
  justify-self: center;
}

.login-btn:hover {
  background: #3c3d3f;
  color: #ffffff;
  cursor: pointer;
}

.popup-form-login .signup-btn{
  grid-row: 5; 
  margin-bottom: 10px;
  border-radius: 7px;
  font-size: 20px;
  color: #3c3d3f;
  background: #ffffff;
  border: 2px solid black;
  padding: 10px 20px 10px 20px;
  grid-column: 1;
  justify-self: center;
}

.signup-btn:hover {
  background: #3c3d3f;
  color: #ffffff;
  cursor: pointer;
}

.popup-form .popup-title {
  grid-row: 1; 
  font-size: 20px;
  font-weight: bold;
  margin: -20px -10px 20px -10px;
  padding: 10px 0px 10px 25px;
  justify-self: center;
  border-radius: 7px 7px 0px 0px;
}

.popup-form .popup-photo-title {
  grid-row: 2; 
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  margin-right: 10px;
  border: 2px solid black;
  justify-self: center;
}

.popup-form .popup_upload {
  grid-row: 3; 
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 6px;
  padding: 5px 10px 5px 10px;
  margin-left: 20px;
  justify-self: center;
  text-align: center;
}

.popup-form .btn {
  grid-row: 4; 
  border-radius: 7px;
  font-size: 20px;
  color: #3c3d3f;
  background: #ffffff;
  border: 2px solid black;
  padding: 10px 20px 10px 20px;
  grid-column: 1;
  justify-self: center;
}

.btn:hover {
  background: #3c3d3f;
  color: #ffffff;
  cursor: pointer;
}