:root {
    /* color palette */
    --main-color: #48e;
    --sec-color: #eee;
    --text-color: #444;
}

html {
    overflow: hidden;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    color: inherit;
    font-family: inherit;
}

a:hover {
    opacity: .6;
}

body {
    background-color: #48e6;
    color: #fff;
    min-height: 100dvh;
    font-family: Montserrat, sans-serif;
    position: relative;
    overflow: hidden;
}
/*     background section   */
.bg-ball {
    position: absolute;
    width: clamp(260px,30vw,1000px);
    height: clamp(260px,30vw,1000px);
    background-color: #268;
    top: -10vw;
    left: 40%;
    border-radius: 50%;
    filter: blur(100px) saturate(2);
}


.bg-ball:nth-of-type(2) {
    top: initial;
    bottom: -10vh;
    left: -10vw;
    transform: scale(1.6);
    background-color: #451F55;
}

.bg-ball:last-of-type {
    top: initial;
    bottom: 6vh;
    left: initial;
    right: -6vw;
    background-color: #055864;
}

/*------------log in section--------------*/
.login {
    height: 100dvh;
    width: 100dvw;
    display: flex;
    align-items: center;
}

h1 {
    font-size: 1.6rem;;
}

.login__title {
    position: relative;
    padding: .6rem 0;
}

.login__title::before {
    content: '';
    position: absolute;
    width: 26%;
    height: 4px;
    background-color: var(--sec-color);
    left: 0;
    bottom: 0;
}

.login-wrapper {
    max-width: 100dvw;
    user-select: none;
    width: fit-content;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: auto;
    color: #fff;
    background-color: #4446;
    border: 1px solid #eee6;
    border-radius: .6rem;
    box-shadow: 0 0 1.6rem 0 #4444;
    font-weight: bold;
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px) saturate(1);
}


.login__form {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

input {
    display: block;
    width: 100%;
    border: none;
    padding: .6rem 0 .6rem 1rem;
    border-radius: 1.2rem;
    font-size: 1rem;
    background-color: #fff4;
    border: 3px solid #eee4;
    transition: all .4s;
}

input::placeholder {
    color: inherit;
    font-weight: bold;
    text-shadow: 0 0 1px #444;
}

input:where(:focus,:hover) {
    outline: none;
    background-color: #eee6;
}

input[type='submit'] {
    cursor: pointer;
    width: fit-content;
    padding: .6rem 2rem;
    background-color: #fff;
    color: var(--text-color);
    font-weight: bold;
}

input[type='submit']:hover {
    background-color: #eee;
}
/*-------- form decoration --------*/

.login-wrapper::before, .login-wrapper::after {
    content: '';
    padding: 2.6rem;
    background-color: #e849;
    position: absolute;
    z-index: -10;
    border: 1px solid #eee4;
    border-radius: .6rem;
    animation-name: flotar;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: 2.6s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
}

.login-wrapper::before {
    right: -4rem;
    bottom: 4rem;
}

.login-wrapper::after {
    padding: 1.2rem;
    bottom: -4rem;
    animation-delay: .2s;
}

.login__form::before, .login__form::after {
    content: '';
    padding: 2rem;
    background-color: #e849;
    position: absolute;
    z-index: 20;
    border: 1px solid #eee4;
    border-radius: .6rem;
    animation-name: flotar;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: 2.6s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    animation-delay: -.4s;
}
.login__form::before {
    top: -4rem;
    left: 40%;
}

.login__form::after {
    padding: 3.6rem;
    left: -6rem;
    animation-delay: .2s;
}

.login__form div:first-child::before {
    content: '';
    padding: 3.6rem;
    background-color: #e849;
    filter: saturate(.8);
    position: absolute;
    z-index: 20;
    top: -6rem;
    right: -3rem;
    border: 1px solid #eee4;
    border-radius: .6rem;
    animation-name: flotar;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: 2.6s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
}


@keyframes flotar {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(1.6rem);
    }
}