*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    background-color: #F1F5FF;
}
                               /* project recommender page1 */

                          /* custimize header & navbar */
header{
    position: relative;
    z-index: 1;
}
header .navbar-collapse{
    margin-right: -49px;
    margin-left: auto;

}
header .nav-link{
    margin-top:34px ;
    font-size: 20px;
}
header .nav-link:hover,
header .nav-link.active{
    color: #E63131 !important;
    font-size: x-large;
    transition:  0.2s ease-in-out;
}
         /* (2) custimize the logo */
header img{
    width: 356px;
    height: 324px;
    mix-blend-mode: multiply;
    position: absolute;
    left: -18px;
    top: -97px;
}
         /* (3) custimize btn signin */
header .btn{
  white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  background-color: #E63131;
  color: white;
  border: 2px black solid;
  height: 40px;
  margin-top: 29px;
}

header .btn:hover{
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
}
 

                                  /* custimize first section */
.first-section {
    margin-top: 190px;
    z-index: 2;
}
    /* (1) the title of the section  */
.first-section h1{
    font-size: 56px;
    font-weight: 550;
    color: rgb(0, 0, 0);
}    
                             /* custimize the button 1 and 2 */
.first-section #button1s1{
   white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
  margin-right: 100px;
}  
.first-section #button1s1:hover {
  background-color: #E63131;
  color: white;
  border: 2px black solid;
}
.first-section #button2s1{
   white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  background-color: #E63131;
  color: white;
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
}  
.first-section #button2s1:hover {
   color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
}                           

                                /* custimize the second section */

.About-section{
    margin-top: 450px;
    margin-bottom: 100px;
    z-index: 2;
} 
.About-section h1{
    font-size: 56px;
    font-weight: 550;
    color: white;
    -webkit-text-stroke: 1px black;

}
.About-section p mark{
  background-color: rgb(185, 207, 89);
}                               
                         /* some responsive  */
@media (max-width: 768px) {
  body {
    padding-top: 160px; 
  }
  header .navbar-collapse{
      margin-right: -13px;
      margin-left: auto;
      transition: all 0.2s ease;
      transform: translateY(-10px);
      opacity: 0;
      
    }
    header .navbar-toggler{
      margin-top: 35px;
    }
    .navbar-collapse.show {
      background-color: rgba(220, 53, 69, 0.9);
      border-radius:10px; 
      width: 30px;
      transform: translateY(0);
      opacity: 1;
    }
    header .nav-link{
    margin-top:34px ;
    font-size: 20px;
    }
header .nav-link:hover,
header .nav-link.active{
    color: #e7e7e7 !important;
    font-size: x-large;
    transition:  0.3s ease-in-out;
}
header .btn{
  white-space: nowrap;
  font-size: 20px; 
  border-radius: 30px;
  background-color: #E63131;
  color: white;
  border: 2px black solid;
  height: 48px;
  margin-top: 29px;
  margin-left: 10px;
  margin-bottom: 10px;
}
header .btn:hover{
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
}
.first-section{
  margin-top: 20px;
}
}
                          /* end project recommender page1 */

   
                          /* the start of the page interests */
.first-interests{
  margin-top: 157px;
}
.first-interests h1{
    font-size: 56px;
    font-weight: 550;
    color: rgb(0, 0, 0);
} 
.first-interests .small-search {
  width: 250px;
  height: 35px;
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid black;
  margin-left: 855px;
}
.first-interests form{
  gap: 1px;
}
.first-interests button {
  width: 45px;
  height: 35px;
  border: 1px solid black;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.first-interests button:hover {
  background-color: #E63131;
  color: white;
}

                                  /* checkbox */
#list{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  margin-bottom: 100px;
}
#list label{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  width: 100px;
  height: auto;
  margin-bottom: 10px;
  margin-left: 120px;
  font-weight: bold;
  font-size: 20px;
  margin-top: 10px;
}
#list input[type="checkbox"] {
 margin-left: 40px;
 transform: scale(1.8);
 cursor: pointer;
 accent-color: #E63131;
}

                             /* button */
.first-interests .buttons-container{
  margin-right: -37px;
  margin-bottom: 30px;
}
.first-interests #button1p2{
     white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
  margin-right: 50px;
  width: 90px;
}
.first-interests #button1p2:hover{
   background-color: #E63131;
  color: white;
  border: 2px black solid;
}
.first-interests #button2p2{
     white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  background-color: #E63131;
  color: white;
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
  width: 90px;
}
.first-interests #button2p2:hover{
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
}

                              /* some responsive  */
@media (max-width: 768px){
  .first-interests{
  margin-top: 10px;
}
.first-interests .small-search {
  margin-top: 30px;
}
.first-interests button {
  width: 45px;
  height: 35px;
  border: 1px solid black;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  margin-top: 30px;
}
}  

                          /* end of the page interests */ 


                             /* the start skills  page */
                         
.second-skills{
  margin-top: 150px;
}
.second-skills h1{
      font-size: 56px;
    font-weight: 550;
    color: rgb(0, 0, 0);

}   
.second-skills #searchbox{
  border: 0.5px #E63131 solid;
  animation: fadein linear forwards;
  animation-name: fadein;
  opacity: 0;
  animation-duration: 2s;
}
.second-skills  button {
  width: 45px;
  height: 35px;
  border: 1px solid black;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  animation: fadein linear forwards;
  animation-name: fadein;
  opacity: 0;
  animation-duration: 2s;
}
.second-skills  button:hover {
  background-color: #E63131;
  color: white;
}  
@keyframes fadein{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}                   
                         
                              /* buttons */

.second-skills .buttons-container{
  margin-right: -37px;
  margin-bottom: 30px;
}
.second-skills #button1p3{
     white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
  margin-right: 50px;
  width: 90px;
}
.second-skills #button1p3:hover{
   background-color: #E63131;
  color: white;
  border: 2px black solid;
}
.second-skills #button2p3{
     white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  background-color: #E63131;
  color: white;
  border: 2px black solid;
  height: 40px;
  margin-top: 51px;
  width: 90px;
}
.second-skills #button2p3:hover{
  color: black;
  background-color: rgb(255, 255, 255);
  border: 2px black solid;
}
             

                            /* the end skills  page */


                            /* the start results page */

.results{
  margin-top: 140px;
}
.results h1{
     font-size: 56px;
    font-weight: 550;
    color: rgb(0, 0, 0);
}
.results .resultss{
  border: 1px black solid;
  width: 100%;
  max-width: 900px;
  height: 400px;
  border-radius: 40px;
  background-color: #D9D9D9;
  margin-top:40px ;
  overflow-y:auto ;
  
} 
.results #button1p4{
      white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: #D9D9D9;
  border: 2px black solid;
  height: 40px;
  margin-top: 20px;
  margin-right: 50px;
  width: 90px;
  margin-bottom: 30px;
}
.results #button1p4:hover{
  background-color: #E63131;
  color: white;
  border: 2px black solid;
}
                            /* the end results page */

                        /* the start of the sign&logoin page*/

.accounts{
  margin-top: 236px;
}
.accounts .acc{
  border:1px black solid;
  width: 90%;
  max-width: 670px;
  height: 400px;
  border-radius: 35px;
  margin-bottom: 100px;
  background-color:  white;
  margin-left: auto;
  margin-right: auto;
}
.accounts .acc form {
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  row-gap: 15px; 
}

.accounts .acc input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid black;
  padding-left: 10px;
}

.accounts .buttons{
  
  display: flex;
  justify-content: center; /* اليمين */
  gap: 15px;
  margin-top: 20px;
}
.accounts #buttonform1 {
  white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: #D9D9D9;
  border: 2px solid black;
  height: 40px;
  width: 160px;
  margin-top: 10px;
  cursor: pointer;
}

.accounts .acc #buttonform1:hover {
  background-color: #E63131;
  color: white;
}
.accounts #buttonform2{
    white-space: nowrap;
  font-size: 18px; 
  border-radius: 30px;
  color: black;
  background-color: #D9D9D9;
  border: 2px solid black;
  height: 40px;
  width: 160px;
  margin-top: 10px;
  cursor: pointer;
}
.accounts #buttonform2:hover{
  background-color: #E63131;
  color: white;
}
.accounts .acc input:hover{
  background-color: #D9D9D9;
}