body{
        margin: 0;
        color: rgb(255, 255, 255);
        background: #007AFF;
        font-family:system-ui, Arial;
        
        
    }
    .webheader{
        background-color: #ffffff;
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.5rem;
        font-weight: bold;
        height: 3.125rem;
        
    }
    .lefthead{
        cursor: pointer;
        
    }
    .lefthead, .righthead{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: #007AFF;
    }
    .heading{
          font-size:2.5rem;
        font-weight: bolder; 
        
       
    }
.logo {

  height: 26px;

}

    .themebtn{
        width: 30px;
    }

        .menu{
            display: flex;
            flex-direction: row;
            position: static;
            gap: 1rem;
            font-size: 1.2rem;
           
            
        }

        .menu a{
            color: #FF9933;
        }

        .menubtn{
            display: none;
            
        }

    a{
        text-decoration: none;
        
    }

    .content{
    
        justify-content: space-between;
        align-items: center;
        
    }

    main{
        margin-left: 5px;
        margin-right: 5px;
    }

    .signupdiv{
        margin: auto;
        margin-top: 5%;
        background: #007AFF;
        border: solid 3px #FF9933;
        width: 80vw;
        height: 60vh;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        padding: 0;
       
    }

    .logindiv{
        margin: auto;
        margin-top: 5%;
        background: #007AFF;
        border: solid 3px #FF9933;
        width: 80vw;
        height: 60vh;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        padding: 0;
        gap: 10rem;
    }

    .signupfields, .loginfields{
        display: flex;
        flex-direction: row;
        gap: 1rem;
        margin-left: 0;
        align-items: start;
        justify-content: left;
        text-align: left;
    }


    .signuphead, .loginhead{
        margin-top: 0px;
        
        display: block;
        padding: 0;
        margin: 0;
       
                h1{
            color: #FF9933;
        padding: 0;
        margin: 0;
        }

    }
    .signupinput{
                    display: flex;
            flex-direction: column;
               gap: 1rem;
    }

        .logininput{
                    display: flex;
            flex-direction: column;
               gap: 1rem;
    }

         .inputfield{

            padding: 10px;
            width: 30vw;
            font-size: 1.5rem;
            background:none;
            outline:solid 1px #FF9933;
            border:solid 2px #FF9933;
            color: #ffffff;
            border-radius: 5px;
         
            
        }

        label{
            display: block;
            font-size: large;
            
        }

    .signupdiv input::placeholder {
      opacity: 0.4;
      color: #ffffff;
    }

        .logindiv input::placeholder {
      opacity: 0.4;
      color: #ffffff;
    }

    .signupfooter{
        display: flex;
        flex-direction: row;
        gap: 10%;
        margin-top: 5%;

        justify-content: right;
        align-items: center;
            a{
        text-decoration: none;
        color: #ffffff;
        font-size: large;
    }
    }

        .loginfooter{
        display: flex;
        flex-direction: row;
        gap: 10%;
        margin-top: 5%;

        justify-content: right;
        align-items: center;
            a{
        text-decoration: none;
        color: #ffffff;
        font-size: large;
    }
    }

    .signupfooter button{
        font-size:x-large;
        background:none;
        outline: #FF9933;
       height: max-content;
       padding: 5px;
       width: 100px;
        color: #ffffff;
        border: solid 2px #FF9933;
        border-radius: 8px;
    
    }
    
    .loginfooter button{
        font-size:x-large;
        background:none;
        outline: #FF9933;
       height: max-content;
       padding: 5px;
       width: 100px;
        color: #ffffff;
        border: solid 2px #FF9933;
        border-radius: 8px;
    
    }
    .otparea{
        display: flex;
        flex-direction: row;
        gap: 4%;
    }

    .inputfieldotp{
        width:14vw;
    }

    .sendotp{
        height: 5vh;
        width: 7vw;
        font-size: large;
        margin-top: 30px;
        background: none;
        color: #ffffff;
        border: solid 2px #FF9933;
        border-radius: 8px;
    }
.verifyotp{
        height: 5vh;
        width: 7vw;
        font-size: large;
        margin-top: 30px;
        background: none;
        color: #ffffff;
        border: solid 2px #FF9933;
        border-radius: 8px;        
    }

@media(max-width:768px) {
    .webheader{
        height: 3.125rem;
    }
    .menubtn{
        display: flex;
        width: 28px;
    }
    .menu{
        display: none;
        flex-direction: column;
        position: absolute;
        top:3.6rem;
        right: 0px;
        padding:0 1rem 0.5rem 1rem;
        background-color: #ffffff ;
        font-size: 1rem;
        
    }
    .heading{
        font-size: 1.5rem;
    }

    .signupdiv{
        flex-direction: column;
           gap: 1rem;
           width: 95%;
           height: 75vh;
           
    }

        .logindiv{
        flex-direction: column;
           gap: 1rem;
           width: 95%;
           height: 60vh;
           
    }
    .inputfield{
        width:75vw;
        font-size: 1.2rem;
    }

        .signupfooter{
        display: flex;
        flex-direction: row;

        button{
            width: 40%;
        }

    }

        .signupfields{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

        .signuphead , .loginhead{
        margin-top: 0px;
        width: 80vw;
        display: block;

    }

        .signupfooter{
            gap: 6%;
        }

            .inputfieldotp{
        width:38vw;
    }
    .sendotp , .verifyotp {
        width: 18vw;
        margin-top: 22px;
    }
}