@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');

:root{
    --font-ubuntu: 'Ubuntu', monospace;
    --color-border: #e5e5e5;
}

.font-ubuntu{
    font: normal 500 16px var(--font-ubuntu);
}

#register, #login-form {
    padding: 10% 0;
    background: url("https://localhost/skillupweek//images/background.png") no-repeat;
    background-size: cover;
}

#login-form{
    padding: 5% 0;
}

#register .upload-profile-image{
    position: relative;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    transition: filter .8s ease;
}

#register .upload-profile-image:hover{
    filter: drop-shadow(1px 1px 22px #7584bb);
}

#upload-profile{
    position: absolute;
    top: 0;
    z-index: 10;
    width: 200px;
    margin-top: 0px;
    opacity: 0;
}

#upload-profile::-webkit-file-upload-button{
    visibility: hidden;
}

#upload-profile::before{
    content: ' ';
    display: inline-block;
    width: 200px;
    height: 200px;
    cursor: pointer;
    border-radius: 50%;
}

#register .upload-profile-image .camera-icon{
    position: absolute;
    top: 70px;
    width: 60px !important;
    filter: invert(30%) !important;
}

#register .upload-profile-image:hover .camera-icon{
    filter: invert(100%) !important;
}

#reg-form input[type='text'],
#reg-form input[type='email'],
#reg-form input[type='password'],
#log-form input[type='text'],
#log-form input[type='email'],
#log-form input[type='password']{
    border: none;
    border-radius: unset;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-ubuntu);
}

#reg-form input[type='text'],
#reg-form input[type='email'],
#reg-form input[type='password'],
#log-form input[type='text'],
#log-form input[type='email'],
#log-form input[type='password']{
    outline: none;
    box-shadow: none;
}