*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    align-items: baseline;
    background: #efefef;
    display: flex;
    font-family: "Rajdhani", sans-serif;
    height: 100vh;
    justify-content: center;
}

.contact-wrapper {
    background: #fff;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.15);
    border-radius: 0.75em;
    padding: 2em;
    width: 25em;
}

.login-cta > h2 {
    color: #3e3f5e;
    font-size: 1.75rem;
    text-align: center;
}

.socials-wrapper > header > h2 {
    background: #fff;
    color: #3e3f5e;
    font-size: 1rem;
    position: relative;
    text-align: center;
    z-index: 10;
}
.socials-wrapper > header > h2:after, .socials-wrapper > header > h2:before {
    background: #d3d3e2;
    content: "";
    display: block;
    height: 0.1em;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    width: 17.5%;
}
.socials-wrapper > header > h2:after {
    right: 0;
}
.socials-wrapper > header > h2:before {
    left: 0;
}
.socials-wrapper > ul {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0;
}
.socials-wrapper > ul > li {
    margin: 0.5em;
}
.socials-wrapper > ul > li > a {
    align-items: center;
    border-radius: 0.5em;
    color: #fff;
    display: flex;
    height: 2em;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: all 300ms ease;
    width: 2em;
}
.socials-wrapper > ul > li > a.facebook {
    background-color: #3763d2;
}
.socials-wrapper > ul > li > a.twitter {
    background-color: #1abcff;
}
.socials-wrapper > ul > li > a.twitch {
    background-color: #7b5dfa;
}
.socials-wrapper > ul > li > a.youtube {
    background-color: #fd434f;
}
.socials-wrapper > ul > li > a:hover {
    transform: translatey(-0.25em);
}

form {
    margin: 2em 0;
}
form > .form-row {
    display: flex;
    margin: 0.75em 0;
    position: relative;
}
form > .form-row > span {
    background: #fff;
    color: #adafca;
    display: inline-block;
    font-weight: 400;
    left: 1em;
    padding: 0 0.5em;
    position: absolute;
    pointer-events: none;
    transform: translatey(-50%);
    top: 50%;
    transition: all 300ms ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
form > .form-row > input, form > .form-row > button {
    border-radius: 0.5em;
    font-family: inherit;
    padding: 1em 0.5em;
    width: 100%;
}
form > .form-row > input {
    font-weight: bold;
    transition: 100ms ease all;
    width: 100%;
}
form > .form-row > input[type=text], form > .form-row > input[type=password] {
    border: 0.075em solid #ddd;
}
form > .form-row > input:valid + span {
    top: 0;
    font-size: 0.9rem;
}
form > .form-row > input:invalid + span {
    top: 50%;
}
form > .form-row > input:focus + span {
    top: 0;
}
form > .form-row > input:required {
    box-shadow: none;
}
form > .form-row > input:focus {
    border-color: #7b5dfa;
    outline: none;
}
form > .form-row > input:focus:invalid {
    box-shadow: none;
    top: 50%;
}
form > .form-row > input:focus:valid {
    top: 0;
}
form > .form-row > button {
    background-color: #7b5dfa;
    border: 0.1em solid #7b5dfa;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    transition: all 300ms ease;
}
form > .form-row > button:focus {
    border: 0.1em solid #532cf8;
    outline: none;
}
form > .form-row > button:hover {
    background-color: #6744f9;
}