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

/* Main container */
.body-content {
    width: 100%;
    height: 100%;
    position: fixed;
    background: 
    linear-gradient(to bottom, rgb(243, 225, 120) 2%, transparent 2%, transparent 98%, rgb(243, 225, 120) 98%), /* Top and bottom golden lines */
    linear-gradient(to top left, #6cc66c 49%, rgb(243, 225, 120) 2%,  rgb(243, 225, 120) 52%, #6696cc 50.5%); /* Diagonal split with golden line */
    background-position:center;
    overflow: hidden;
}


        
        .container {
            width: 370px;
            height: 560px;
            position:relative;
            margin:4% auto;
            background: white;
            padding:5px;
            border-radius: 15px;
             overflow:hidden;
            
        }
        ;;
        .logo {
            margin-bottom: 0px;
            margin-top: 0px;
            padding-top: 0px;
        }
        
        .logo img {
            width: 100px;
            margin: 0px;
            margin-top: 0px;
             margin-right: 130px;
             margin-bottom: 0px;
            margin-left: 130px;
            border-radius: 50px;
        }

        .button-box{
            width:220px;
            margin:20px auto;
            position:relative;
            box-shadow:0 0 20px 9px #6696;
            border-radius:30px;
         }
          
        .toggle-btn{
          padding:10px 30px;
          cursor:pointer;
          background: transparent;
          border:0;
          outline:none;
          position:relative;
          
          }

  
       #btn{
           top:0;
          left:0;
          position:absolute;
          width: 110px;
          height:100%;
          background: linear-gradient(to right, #6696cc, #6696);
          border-radius:30px;
          transition:  .5s;

          }

        
        
        .input-group {
         
         top:180px;
         position:absolute;
         margin-left:-30px;
         width:340px;
         transition:.5s;
         overflow: hidden;

        }
        
       
        .input-field {
            width: 100%;
            padding:10px 0;
             margin:5px 0;
            height: 30px;
            border-left:0;
            border-right:0;
            border-top:0;
            border-bottom: 1px solid #999;
            background:transparent;
            outline:none;

           }

        .check-box{
           margin:20px 10px 20px;
    }
     
        .submit-btn{

         width: 85%;
         padding:10px 30px;
         cursor:pointer;
         display: block;
         margin:20px auto auto 10px;
         background: linear-gradient(to right, #6696cc, #6696);
         border:0;
         outline:none;
         border-radius:30px;
       }
         .options {
            padding-top: 40px;
            
        }
        
        .options a {
            text-decoration: none;
            color: black;
            margin-left:10px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px;

        }
        .options a:hover {
            color: grey;
         position:center;
        }
        
        p {
            text-align: center;
            font-size: 15px;
            margin-left:5px;
            margin-right:30px;
            font-family: Arial, Helvetica, sans-serif;
        }

        #SignIn{

                left:50px;

               }

       #SignUp{

                left:450px;

               }