* {
    padding: 0;
    margin: 0
}

html,
body {
    --primary-color: rgb(48, 48, 48);
    --secound-color: #F2EFE9;
    --hover-color: #233333;
    --text-color: #c7c7c7;
    --background-color: rgb(48, 48, 48);
    --textmain-color: black;
    --white-color: white;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

form {
    background: var(--primary-color);
    width: 400px;
    height: 500px;
    box-shadow: 0px 0px 35px 3px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

body {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--secound-color)
}

#logins {
    height: 200px;
}

input {
    height: 28px;
    width: 300px;
    border: 1px solid rgb(114, 114, 114);
    border-radius: 5px;
    padding: 2px 12px;
    color: var(--text-color) !important;
    background: transparent;
}

input:focus-visible {
    outline: none;
}

#emaillabel {
    width: 65px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px var(--background-color) inset;
    -webkit-text-fill-color: var(--text-color) !important;
}

label {
    color: var(--text-color);
    transition: all.1s;
    margin-left: -204px;
    position: relative;
    width: 51px;
    height: 21px;
    bottom: 27px;
    background: var(--primary-color);
}

form img {
    width: 50px;
    filter: invert(15%);
    margin-bottom: 50px;
}

#logins p {
    color: red;
    margin-bottom: 12px;
}

#email,
#senha {
    padding-left: 20px;
}

#email:hover~#emaillabel,
#senha:hover~#senhalabel,
#email:valid~#emaillabel,
#senha:valid~#senhalabel {
    bottom: 42px;
}

form button {
    color: var(--text-color);
    background: transparent;
    border: 1px solid rgb(135 135 135);
    /* width: 70px; */
    padding: 2px 20px;
    border-radius: 4px;
    transition: background .2s;
}

form button:hover {
    background: #ffffff09;
}

.gradient-border {
    --border-width: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-width);
}

.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(60deg, hsl(0, 0%, 77%), hsl(269, 85%, 66%), hsl(314, 85%, 66%), hsl(359, 85%, 66%), hsl(44, 85%, 66%), hsl(89, 85%, 66%), hsl(134, 85%, 66%), hsl(179, 85%, 66%));
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%;
    }
}

@media (max-width:700px) {
    * {
        overflow: hidden
    }

    form {
        border-radius: 0px !important;
        width: 100% !important;
        height: 100% !important;
    }
}