.logo {
    margin-bottom: 1rem;
    font-size: 1.6rem;
    text-align: center;
    color: #1877f2;
    font-weight: 700;
}

body {
    background-color: whitesmoke;
    /* overflow: hidden; */
}

form {
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 400px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
    margin: 2px auto;
    margin-top: 200px;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}

form input {
    outline: none;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    text-align: center;
}

.result {
    /* padding-left: 30px; */
    /* margin-top: px; */
    margin-bottom: 10px;
    font-size: large;
    text-align: center;
}

form input:focus {
    border: 1.8px solid #1877f2;
}

form .login {
    outline: none;
    border: none;
    background: #1877f2;
    padding: 10px;
    margin-top: 20;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    color: #fff;
}

form hr {
    background: #f7f7f7;
    margin: 0.5rem;
    margin-top: 30px;
}

form .create-account {
    outline: none;
    border: none;
    text-align: center;
    background: #06b909;
    padding: 20px;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    color: #fff;
    width: 50%;
    /* height: auto; */
    margin: 0 auto;
}


form .create-account:hover {
    background: #03ad06;
    cursor: pointer;
}

button{
    background-color: #43a6f7;
    padding: 10px;
    color: white;
    font-size: 0.9rem;
    border-radius: 5px;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
            70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
            105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
            110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .logo {
        font-size: 1.5rem;
        margin-bottom: 2.2rem;
    }

    form {
        width: 90%; 
        margin-top: 5rem;
        padding: 15px; 
    }

    form input {
        margin-top: 1rem;   
        padding: 10px; 
        font-size: 1rem;
        border: 1px solid #b1b1b1;
    }

    .result {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 5px; 
        color: #b1b1b1;
    }

    .button{
        color: white;
        border: 1px solid #b1b1b1;
    }

    form .login {
        font-size: 1rem; 
        padding: 14px; 
    }

    form a {
        font-size: 0.9rem;
        padding-top: 0.6rem; 
    }

    form hr {
        margin: 1rem 0; 
    }

    form .create-account {
        font-size: 1.2rem; 
        padding: 18px;
        width: 90%; 
    }
    form .button{
        font-size: 1.2rem;
    }

    .button {
        padding: 10px 18px; 
        font-size: 0.9rem;
    }

    body{
        overflow: hidden;
    }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .logo {
        font-size: 1.8rem;
    }

    form {
        width: 70%;
        margin-top: 100px;
        padding: 20px; 
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
    }

    form input {
        padding: 0.6rem 0.7rem; 
        font-size: 1rem; 
    }

    .result {
        font-size: 1.3rem;
        margin-bottom: 8px; 
    }

    form .login {
        font-size: 1.1rem; 
        padding: 16px; 
    }


    form hr {
        margin: 1.2rem 0; 
    }

    form .create-account {
        font-size: 1.3rem;
        padding: 16px; 
        width: 70%; 
    }

    .button {
        padding: 12px 20px;
        font-size: 1rem; 
    }
}