*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
}

body
{
    color: white;
   
    color: white;
    font-family: 'Poppins', sans-serif;
    background-image: url(./img11.jfif);
    background-repeat: repeat-y;
    background-position: center;
}

nav
   {
     width: 100%;
     background-color: #264653;
     display: flex;
     align-items: center;
   }

nav h1
  {
    font-size: 3rem; 
    padding: 0.4% 0% 0.4% 1.5%;
  }

  
nav h1::before
{
    padding-right: 4%;
    font-family: FontAwesome;
    content: '\f0c2';
    font-size: 3rem; 

}

  main 
  {
      display: flex;
      justify-content: center;
      align-items:  center;
      width: 100%; 
  }

  section
  {
     
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column; 
  }

  section #div1
  {
       padding: 0.8%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1;
  }

  section #div1 input
  {
   
      color: white;
      font-size: 2.5rem;
      border: none;
      background: linear-gradient(to right, #bdc3c7, #2c3e50);
     
     
  }

  section #div1 h1
  {
   
      font-size: 3.8rem;
     
  }

  section #div1 h2
  {
      font-size: 3.2rem;
      cursor: pointer;
  }

  #container
  {
    
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      width: 100%;
     
  }

  #firstdiv,#seconddiv
  {
     
      width: 100%;
    
  }

  #firstdiv
  {
      margin-top: -7.5%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  #seconddiv
  {  

       margin-top: -5.8%;
      display: flex;
      justify-content: center;
      align-items: center;
  }

.circle
{
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 300px;
    background: linear-gradient(to right, #bdc3c7, #2c3e50);
    border-radius: 50%;
    border: 2px solid  linear-gradient(to right, #bdc3c7, #2c3e50);;
}

.circlecent
{
    text-align: center;
}

  
@media screen and (max-width:1000px )
{
    nav h1
    {
        padding: 3.2%;
        font-size: 3.5rem;
    }
    section #div1 {
        padding: 2.4%;
    }

    section #div1 h1 {
        font-size: 5rem;
        padding: 1%;
    }
    
    section #div1 h2 {
        font-size: 4.5rem;
        padding: 1%;
    }
    section #div1 input {
      
      padding: 1%;
      font-size: 3.5rem;
    }
   
    section #container .circle{
        font-size: 1.5rem;
        height :360px;
        width : 360px;
     } 

   section #cotainer #firstdiv
   {
    margin-top: 4.5%;
   } 
   section #container #seconddiv
  {
    margin-top: 2.2%;
  } 

}