style.css

:root
{
    --bg: #222;
    --bg-1: #181818;
    --bg-2: #111;
    --bg-3: #050505;
    --clr: white;
}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body.bg-black
{
    background-color: var(--bg);
    color: var(--clr);
}
body
{
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
a
{
    color: var(--clr);
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
img
{
    transition: 0.2s;
    user-select: none;
    border-radius: 50%;
    box-shadow: 0 0 15px 2px black;
    margin: 10px 0;
    width: 250px;
}
img:hover
{
    scale: 1.05;
}
img:active
{
    scale: 0.9;
}
.form
{
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.inputBx
{
    display: flex;
    align-items: center;
    height: 40px;
}
.inputBx i.box
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.inputBx .box
{
    font-size: 16px;
    border: none;
    outline: none;
    padding: 7px;
    background-color: var(--bg-1);
    color: var(--clr);
    height: 100%;
    transition: 0.3s;
}
.inputBx .box:first-child
{
    border-radius: 15px 0 0 15px;
    padding-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.inputBx .box:last-child
{
    border-radius: 0 15px 15px 0;
    padding-right: 12px;
    background-color: var(--bg-2);
}
.inputBx .box:last-child:hover
{
    background-color: var(--bg-3);
    cursor: pointer;
}
.profileBox
{
    background-color: rgba(0,0,0,0.8);
    box-shadow: 0 0 15px 2px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 400px;
    padding: 20px;
    border-radius: 20px;
    gap: 30px;
}