body {
  background-color: black;  
}

h2 {
  text-align: center;   /* לעמיד טקסט בעמצא של העמוד  */
  color: brown;       /* צבע טקסט   */
}

a {
  text-decoration: none;   /* הסתר קו תחתון */
  color: brown;
}

a:hover {
  color: goldenrod;
}
/* בלוק ראשי  */
.conteiner {                              
  width: 100%;               /* רוחב               */
  margin: 25px 0;            /* הזחה למטה ולמלא   */
  display: flex;             /* גמישות             */
  flex-direction: row;       /* גמישות לפי שורות  */
  position: relative;        /* רלטיבי             */
  align-items: center;       /* הגדרת הגמישות     */
  justify-content: center;   /* הגדרת הגמישות     */
}

.conteiner div {             /* הגדרת בלוקים של קונטיינר   */
  width: 25%;                /* רוחב                */
  text-align: center;        /* לעמיד טסקת במרכז   */
  font-size: large;          /* גודל הטקסט         */
  font-weight: bold;         /* עובי הטקסט         */
}

.conteiner div:hover {           /* שינוי צורה לבלוק   */
  transform: scale(1.15);
  transition: all 0.5s ease;
  font-weight: bolder;
  color: goldenrod;
}

/*   form   טופס לרגיסטרציה  */
form {                       
  width: 70%;                   
  margin: 10px 15%;
  position: relative;
}

form input {                        /*     שדה של טופס    */
  position: relative;               /* רלטיבי             */
  width: 70%;                       /* רוחב               */
  height: 25px;                     /* גובה               */
  margin: 10px 15%;                 /* הזחה               */ 
  border-radius: 25px;              /* גילגול פינות של המסגרת */
  text-align: center;               /* טקסט לפי מרכז     */
  font-weight: 600;                 /* עובי הטקסט        */
  color: bisque;                  /* צבע                */
  background: transparent;          /* שקיפות בקגראונד 0 */
  border: none;                     /*  חיצונית הסתר מסגרת      */
  outline: none;                    /* הסתר מסגרת פנימית        */
  border-bottom: 3.5px solid rgb(249, 253, 0);      /* צבע לתחנון לש השדה  */
  transition: 0.05s linear;                           /* הגדרת זמן לשינוי צבע */
}
input:hover {
  border-color: brown;           /*שינוי צבע בזמן ריחוף  */
}
::placeholder {
  color: aqua;                   /* צבע להודעה מהשדה  */
}
::placeholder :focus {             /* צבע בזמן שימוש מהמשתמש */
  color: bisque;
}
/* הגדרת כפתורים של הטופס */
form button {
  height: 35px;                     
  width: 30%;
  margin: 20px 35% 5px 35%;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  color: brown;
  font-weight: 300;
  box-shadow: 0.3px 0.3px,
    0 0 1em rgb(246, 246, 64),
    0 0 1em rgb(209, 0, 0);
  background: transparent;
  border: none;
  border-radius: 15px;
  outline: none;
  border-bottom: 3.5px solid rgb(249, 253, 0);
  border-top: 3.5px solid rgb(249, 253, 0);
  transition: 0.5s linear;
}
/* שינוי בזמן ריחוף  */
form button:hover,
.showPopup:hover{
  background-color: cyan;
  border-bottom-color: rgb(218, 165, 32);
  border-top-color: goldenrod;
  transform: scale(1.15);
  transition: all 0.5s ease;
  color: brown;
}
/* שינוי בזמן לחיצה על כפתור  */ 
form button:active {
  transform: translateY(4px);
}
/* forgot Password */
.showPopup {
  height: 35px;
  width: 30%;
  margin: 20px 35% 5px 35%;
  cursor: pointer;
  font-size: 20px;
  text-align: center;
  color: brown;
  font-weight: 300;
  background: transparent;
  border: none;
}
.showPopup:hover{
  color: aqua;
  font-weight: 300;
  background: transparent;
  border: none;
}

/*****  popUP sytle *****/
.container-popUp {
  display: none;          /* defualt   */
  position: absolute;     /* אבסולוטי */
  top: 0;                 /* הגדר לפי היליון */
  left: 0;                /* הגדר לפי שמאול  */
  z-index: 1;             /* להגדיר LAYOUT    */
  padding-top: 50px;     /* צד מלמאלאה       */
  width: 100%;            /* רוחב              */ 
}

/* כפתור X סגירת POPUP  */
#popUp-close {    
  display: flex;
  align-items: center;
  justify-content: center;        
  height: 42px;               
  width: 42px;                  
  position: absolute;         
  top: -42px;                   
  right: 42px;                    
  text-align: center;           
  color: bisque;                      
  font-weight: bold;
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 3.5px solid rgb(249, 253, 0);
  border-top: 3.5px solid rgb(249, 253, 0);
  transition: 0.5s linear;
  border-radius: 15px;
  outline: none;
}
/* בזמן הריחוף על כפתור   */
#popUp-close:hover {
  box-shadow: 0.3px 0.3px,
    0 0 1em rgb(246, 246, 64),
    0 0 1em rgb(209, 0, 0);
  transform: scale(1.02);
  transition: all 0.3s ease;
}
/* הודעה משרת  */
.error, .popUp-message{ 
  text-align: center;
  font-size: large;
  font-weight: bold;
  color: red;
}