* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
  
     body{
         background-color: #222;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
     }
  
  /* Estilizacao de conteinar princiapla de dormulario*/
      .conteiner{
          background-color: #003300;
          width: 400px;
          height:550px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

  
      /*formilario de login*/
           form{
          display: flex;
          flex-direction: column;
           width: 320px;
           height: 500px;
          background-color: #008080;
         justify-content:  flex-start;
         align-items: center;
      }
  
  
    /* estilizacao de  conteinar de campos e icones */
      .input-container{
          display: flex;
          width:100%;
          padding: 5px;
      }
  
   /*Titulo princiapl de formilario*/
   .conteiner h2{
          color: #fff;
          text-align: center;
          padding: 10px;
      }
  
  
     /*Estilizacao de campoe de usuario e password*/
      input[type="text"],input[type="password"] {
          width: 90%;
          padding: 8px;
          font-size: 13px;
          font-weight: bold;
      }
  
  
        /*Estilizacao de icons de ususrio e password*/
        .icon {
            padding: 5px;
            margin-left:5px;
            margin-right:5px;
            background: #003300;
            color: #fff;
            min-width: 60px;
            text-align: center;
            width: 100%;
  }
  
  
    /*Estilizacao de botao entrar*/
      #btnLogin{
              color:#fff;
              font-weight: bold;
              width: 95%;
              padding: 10px;
              margin-bottom: 10px;
              cursor: pointer;
              border-top-right-radius:10px;
              border-bottom-left-radius:10px ;
              background-color: #003300;
              margin-top: 5px;
              border: 2px solid #fff;
              opacity: 0.9;
      }
  
  
      /*Houver de botao entrar*/
       #btnLogin:hover{opacity: 1;}
  
  
      /*Houver de botao entrar*/
   form  p{
          color: #fff;
          text-align: center;
          text-decoration: overline ;
          margin-top: 50px;
          display:relative;
          bottom: 20px;
          font-size: 15px;
          font-weight: bold;
      }
  
  
      /*Logotipo de Formulario*/
      #logo_PD{
          border-radius:50%;
          height: 70px;
          width: 70px;
      }
  
  
   /*estilizacao para o campo password deixar uma margem com botao*/
  #input-pass{margin-bottom:20px;}
  
  
  /*Estilizacao de botao x para feixar va janela login e chamar o formulario principal*/
  .closebtn {
  color:#fff;
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  text-decoration: none
  
  }
  
  
  
  /* estilizacao de botao X quando a tela estiver em telefones e tabletes*/
  @media screen and (max-width: 450px) {
     a {font-size: 20px}
    .closebtn {
    font-size: 40px;
    top: -5px;
    right: 15px;
    float: right;
    }
  }
  
  
  
  /*para vdespositivos de 600px para baixo o login deve se comportar de acordo com descrficao a baixo*/
  @media only screen and (max-width: 600px) {
      .conteiner{
          width:90%;
            height:500px;
       }
  
       form{
           width: 90%;
           height: 450px;
       }
  
       h2{
           font-size: 17px;
       }
       h4{
           font-size: 10px;
       }
  
  }
  
  /* Comportamento des despositivo quando quando a altura e de 400px para baixo */
  @media screen and (max-height: 400px) {
      .conteiner{
          width:70%;
          height:auto;
           background: #003300;
           padding-top: 90px;
            padding-bottom: 15px;
  
       }
  
       form{
           width: 75%;
           height: auto;
       }
  
    .closebtn {
    font-size: 30px;
    top: -7px;
    right: 25px;
    }
  
       h4{
       bottom: 10px;
       }
  
       .btn{
         bottom: 10px;
       }
       input{
           padding: 7px;
       }
  
  }
  
  b{
      color: red;
  }
  
  
  /* Para despositivos entre 700 e 1024px */
  @media (min-width: 700px) and (max-width: 800px)  {
       .conteiner{
          width: 500px;
           background: #003300;
           height: 700px;
       }
  
       form{
           width: 400px;
           height: 600px;
       }
  
        input[type="text"],input[type="password"] {
          width: 90%;
          padding: 10px;
          font-size: 15px;
          font-weight: bold;
      }
  
    .icon {
    padding: 10px;
    margin-left:5px;
    margin-right:5px;
    background: #003300;
    color: #fff;
    min-width: 50px;
    text-align: center;
    width: 100%;
    font-size: 25px;
     }
  
     #btnLogin{
         padding: 10px;
         font-size: 20px;
     }
  
     h2{
         font-size: 30px;
     }
  
     img{
         height: 70px;
         width: 70px;
     }
  
     h4{
         font-size: 18px;
         color:#ccc;
     }
  }