* {
    box-sizing: border-box;
}

p {
    font-weight: bold;
    color: #ff0000;
}

html {
    scroll-behavior: smooth;
    background-image: url(../assets/internal-min.svg), radial-gradient(at top right, #fff200 0%, #e4e4d2 60%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-attachment: fixed;
}

body {
    color: #FFFFFF;
    margin: 0;
    display: flex;
    min-height: 100vh;
    font-family: "Akshar", "Calibri";
    flex-direction: column;
    justify-content: space-between;
    /*background-size: cover;*/
    /*background-image: url(../assets/Background.svg);*/
    /*background-position: center;*/
}

header {
    text-align: center;
    background-color: #131E22;
}

#logo {
    width: 96px;
    height: 36px;
    margin: 1px 0 -3px 0;
}

.rainbow-line {
    width: 100%;
    height: 1.4px;
    background-image: linear-gradient(90deg, #00B010, #00B010, #0EC6E8, #0050C0, #0050C0, #8C58A3, #8C58A3, #F7421E, #FF0000, #F7421E, #8C58A3, #8C58A3, #0050C0, #0050C0, #0EC6E8, #00B010, #00B010);
    background-size: 50% 100%;
    animation: rainbow 5s linear infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

main {
    margin: 0 auto;
    text-align: center;
}

h1 {
    color: #FEF200;
    margin: 0 0 27px;
    font-size: 24.1px;
    font-family: Feather Bold;
    text-shadow: 2px 1.5px 0px rgb(0 0 0 / 93%);
    letter-spacing: 1.3px;
}

form#login {
    width: 496px;
    height: 381px;
    display: flex;
    padding: 10px;
    border-radius: 20px;
    flex-direction: column;
    background-color: #1E2C32;
}

label {
    display: flex;
    font-size: 16.7px;
    font-family: Feather Bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.77);
}

label#username {
    margin: 24px 25px 0;
}

label#password {
    margin: 21px 25px 0;
}

input {
    margin: 0 auto;
    border: 1px solid #E7E6E6;
    height: 36px;
    width: 448px;
    padding: 0 15px;
    font-size: Georgia;
    box-shadow: 3px 5px 9px 0 rgba(0, 0, 0, 0.55);
    border-radius: 18px;
}

#login-button {
    width: 290px;
    color: #FFFFFF;
    margin: 34px auto 1px;
    height: 45px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    background: linear-gradient(0deg, #FFFCB9 0%, #FFF658 20.31%, #FEF200 91.67%);
    box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.75);
    font-family: Feather Bold;
    text-shadow: 1.4px 1.7px 3.5px rgba(0, 0, 0, 0.67);
    border-radius: 12px;
}

#register-link {
    color: #FFFFFF;
    font-size: 12.9px;
    font-family: Feather Bold;
    letter-spacing: 0.5px;
    text-decoration: none;
}

#register-link span {
    color: #FEF200;
    font-size: 12.9px;
    font-family: Feather Bold;
    text-decoration: underline;
}

#or-container {
    margin: 23.5px 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#left-line, #right-line {
    width: 101.8px;
    height: 2px;
    background-color: #FFF;
}

#or {
    color: #FFF;
    margin: 0 18px;
    font-size: 15px;
    font-family: Feather Bold;
}

#google, #facebook, #linkedin {
    width: 133px;
    border: 2px solid #7F7F7F;
    height: 42px;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 15px;
    background: #FFF;
    background-position: center;
    background-repeat: no-repeat;
}

#google {
    background-image: url(../assets/Login&Register/Google-icon.svg);
}

#facebook {
    margin: 0 10px;
    background-image: url(../assets/Login&Register/Facebook-icon.svg);
}

#linkedin {
    background-image: url(../assets/Login&Register/LinkedIn-icon.svg);
}

footer {
    height: 22px;
    text-align: center;
    background-color: #131E22;
    background-image: url(../assets/footer.svg);
}

p#copyright {
    color: #FFFFFF;
    margin: 0;
    font-size: 15px;
    font-weight: normal;
}