@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');  
   :root{
        background-color: #f2f2f2;
    }
    .roboto-thin {
        font-family: "Roboto", sans-serif;
        font-style: normal;
    }
    h2{
        font-size: 20px;
        font-weight: 500;
    }
    .card{
        display: grid;
        background-color: #ffffff;

        box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
        border-radius: 10px;

        max-width: 375px;
        width: 100%;
        height: 100%;
        margin: 10% 0 0 0;
    }
    
    .title{
        margin: 0 0 5px 0;
        /* max-width: 375px; */
        width: 300px;
    }
    .center{
        align-items: center;
        justify-content: center;
    }
    .flex{
        display: flex;
    }
    input{
        border: 1px solid #c1c1c1;
        font-size: 12px;
    }
    input[type="email"], input[type="password"]{
        border-radius: 5px;
        margin: 5px 0;
        padding: 8px 0 8px 5px;
        width: 300px;
    }
    input[type="text"], input[type="password"]{
        border-radius: 5px;
        margin: 5px 0;
        padding: 8px 0 8px 5px;
        width: 300px;
    }
    input::placeholder{
        font-size: 12px;
        color: #a5a5a5;
        padding: 0 0 0 5px;
    }
   
    .space-between{
        display:flex;
        justify-content: space-between;
    }
    a{
        text-decoration: none;
    }
    .link{
        color: #f86d34;
    }
    .text-size-10{
        font-size: 10px;
        font-weight: 500;
    }
  
    .button{
        all:unset;
        border-radius: 5px;
        margin: 5px 0;
        padding: 8px 0 8px 5px;
        width: 100%;
        max-width: 96%;
        font-size: 10px;
        font-family: "Roboto", sans-serif;
        text-align: center;
    }
    .button-primary{
        color: #ffffff;
        background-color: #2a2c30;
        border: 1px solid #2a2c30;
    }
    .button-primary:hover{
        color: #ffffff; /* #2a2c30; */
        background-color: #f86d34; /* #ffffff; */
        border: 1px solid #2a2c30;
    }
    .button-secondary{
        color: #2a2c30;
        background-color: #ffffff;
        border: 1px solid #2a2c30;
    }
    .button-secondary:hover{
        color: #ffffff;
        background-color: #f86d34; /* #3179f2; */
    }
    .not-member{
        margin: 20px 0 40px 0;
    }
    svg{
        max-width: 10px;
        padding: 0 16px 0 0;
    }
     .font-100 {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.font-200 {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.font-300 {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.font-400 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-500 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.font-600 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.font-700 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-800 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.font-900 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}