@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            min-height: 100vh;
            margin-top: 50px;
            min-width: 100vh;
            margin-top: 50px;
            font-family: 'Jost', sans-serif;
            background: linear-gradient(to bottom, #0f0c29, #3b3671, #24243e);
            background: url('./images/background1.jpg') no-repeat center center fixed;
            background-size: cover;
            animation: moveBackground 15s linear infinite; /
        }
        
         @keyframes moveBackground {
            0% {
              background-position: bottom top;
            }
            50% {
              background-position: top center;
            }
            100% {
              background-position: bottom center;
            }
          }
    
         /* @keyframes moveBackground {
            0% {
                background-position: left center; 
            }
            50% {
                background-position: right center; 
            }
            100% {
                background-position: left center;  
            }
        } */
        .main {
            width: 400px;
            height: 500px;
            background: red;
            overflow: hidden;
            background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
            border-radius: 15px;
            box-shadow: 2px 20px 50px #69a957;
            margin-top: 1px;
        }
    
        #chk {
            display: none;
            
        }
        .logo {
            width: 90px;
            height: 90px; 
            border-radius: 50%; 
            overflow: hidden; 
            margin-left:160px ;
        }
    
        .signup {
            position: relative;
            width: 100%;
            height: 122%;

        }
    
        label {
            color: #fff;
            font-size: 2.3em;
            justify-content: center;
            display: flex;
            margin: 0px;
            font-weight: bold;
            cursor: pointer;
            transition: .5s ease-in-out;
        }
    
        input {
            width: 70%;
            height: 40px;
            background: #e3e0e0d7;
            justify-content: center;
            display: flex;
            margin: 20px auto;
            padding: 10px;
            border: none;
            outline: none;
            border-radius:30px;
        }
    
        button {
            width: 30%;
            height: 40px;
            margin: 10px auto;
            justify-content: center;
            display: block;
            color: #fff;
            background: #8a3886;
            font-size: 1em;
            font-weight: bold;
            margin-top: 20px;
            outline: none;
            border: none;
            border-radius: 5px;
            transition: .2s ease-in;
            cursor: pointer;
        }
    
        button:hover {
            background: #6d44b8;
        }
    
        .login {
            height: 450px;
            background: #e4e8e2;
            border-radius: 60% / 20%;
            transform: translateY(-180px);
            transition: .8s ease-in-out;
            background: url('./images/background1.jpg') no-repeat center center fixed;
        }
    
        .login label {
            color: #f7f4f1;
            transform: scale(.7);
        }
    
        #chk:checked~.login {
            transform: translateY(-450px);
        }
    
        #chk:checked~.login label {
            transform: scale(1);
        }
    
        #chk:checked~.signup label {
            transform: scale(.2);
        }
    

        .fade-out {
            opacity: 0;
            transition: opacity 0.2s ease;
        }


 .mainmain{
    width: 400px;
    height: 250px;
    background: red;
    color: #e9ede8;
    overflow: hidden;
    background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
    border-radius: 15px;
    box-shadow: 2px 20px 50px #69a957;
    margin-top: 1px;
 }
 .mainmain h1{
   text-align: center;
 }
 .mainmain input{
     height: 20px;
     margin-top: 50px;
  }
  #forgotPasswordLink{
    color: rgb(225, 194, 55);
    margin-left: 70px;
 }
 #withoutlogin
 {
    color: rgb(17, 249, 25);

 }

/* 



     body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        min-height: 100vh;
        font-family: 'Jost', sans-serif;
        background: linear-gradient(to bottom, #0f0c29, #3b3671, #24243e);
        background: url('background1.jpg') no-repeat center center fixed;
        background-size: cover;
        animation: moveBackground 15s linear infinite;
    }
    
    @keyframes moveBackground {
        0% {
            background-position: bottom top;
        }
        50% {
            background-position: top center;
        }
        100% {
            background-position: bottom center;
        }
    }
    
    .main {
        width: 400px;
        height: 500px;
        background: #e4e8e2;
        border-radius: 15px;
        box-shadow: 2px 20px 50px #69a957;
        margin-top: 1px;
    }
    
    #chk {
        display: none;
    }
    
    .logo {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 160px;
    }
    
    .signup,
    .login {
        position: relative;
        width: 100%;
        height: 122%;
    }
    
    label {
        color: #fff;
        font-size: 2.3em;
        justify-content: center;
        display: flex;
        margin: 0px;
        font-weight: bold;
        cursor: pointer;
        transition: .5s ease-in-out;
    }
    
    input {
        width: 60%;
        height: 40px;
        background: #f4f0f0;
        justify-content: center;
        display: flex;
        margin: 20px auto;
        padding: 10px;
        border: none;
        outline: none;
        border-radius: 5px;
    }
    
    button {
        width: 30%;
        height: 40px;
        margin: 10px auto;
        justify-content: center;
        display: block;
        color: #fff;
        background: #8a3886;
        font-size: 1em;
        font-weight: bold;
        margin-top: 20px;
        outline: none;
        border: none;
        border-radius: 5px;
        transition: .2s ease-in;
        cursor: pointer;
    }
    
    button:hover {
        background: #6d44b8;
    }
    
    .fade-out {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
     */