* {
    box-sizing:border-box;
}
body {
    margin:0;
    height:100vh;
    background-color:#F2F4F7;
}
.form-container {
    background-color:white;
    padding:1rem;
    height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    overflow:hidden;
}
.form-container form {
    padding:0;
    width:100%;
    height:auto;
    text-align:center;
}
.form-container form h1 {
    font-family:'Red Hat Display';
    font-weight:lighter;
    font-size:1rem;
    margin:1.5rem 0;
}
.form-container form #image-flex {
    position:relative;
    height:auto;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.form-container form #image-flex .image {
    position:relative;
    border-radius:50%;
    width:15%;
    height:50%;
    overflow:hidden;
    z-index:1;
}
.form-container form #image-flex .image:first-child {
    border:5px solid #e7e7e7;
    height:70px;
    width:20%;
}
.form-container form #image-flex .image + .image {
    margin-left: -1.1rem;
    z-index:0;
    transform: rotate(2deg);
}
.form-container form #image-flex .image img {
    width:100%;
    height:100%;
} 
.form-container form .progress-bar {
    margin:1.5rem 0;
    height:auto;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}
.form-container form .progress-bar .bar {
    transition:1s ease;
    background-color:#e7e7e7;
    width:calc(100% / 8);
    height:7px;
    border-radius:50px;
}
.form-container form .progress-bar .bar.active {
    background-color:#1877F2;
}
.form-container form input {
    width:100%;
    font-size:1.2rem;
    font-family:'Red Hat Display';
    padding:1rem;
    margin-top:0.8rem;
    border-radius:12px;
    border:1px solid #e9e9e9;
}
.form-container form input::-webkit-input-placeholder {
    font-size: 1rem;
}
.form-container form input:-ms-input-placeholder {
    font-size: 1rem;
}
.form-container form input:focus {
    outline-color:#8099b9;
}
.form-container form p {
    color:red;
    text-align:left;
    font-size:1rem;
    font-family:'Red Hat Display';
    margin:0;
}
.form-container form button {
    margin:0.8rem 0;
    width:100%;
    padding:0.7rem 1rem;
    background-color:#1877F2;
    border:none;
    border-radius:30px;
    color:white;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
}
.form-container form button:hover {
    background-color:#146ce0;
}
.form-container form button:active {
    transform:scale(0.98);
}
.form-container form a {
    display:block;
    margin-bottom:0.8rem;
    text-decoration:none;
    color:black;
    font-size:1rem;
    font-family:'Red Hat Display';
}
.form-container form a:hover {
    text-decoration:underline;
}
.form-container #bottom-container {
    width:100%;
    height:150px;
    padding:1rem;
    margin-top:3rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.form-container #bottom-container #btn {
    width:100%;
    color:#1877F2;
    border:1px solid #1877F2;
    border-radius:30px;
    padding:0.7rem 1rem;
    background-color:transparent;
    font-size:1rem;
    cursor:pointer;
    outline:none;
}
.form-container #bottom-container img {
    width:20%;
    height:10%;
    margin:0.8rem 0;
}
.form-container #bottom-container #url-container {
    display:flex;
    justify-content:center;
    gap:10px;
    margin:0.8rem 0;
}
.form-container #bottom-container #url-container a {
    text-decoration:none;
    font-family:'Red Hat Display';
    font-size:0.7rem;
    color:grey;
}
/* * {
    box-sizing:border-box;
}
body {
    margin:0;
    height:100vh;
    background-color:#F2F4F7;
    display:flex;
    justify-content:center;
    align-items:center;
}
.container1 {
    background-image:url('/icon/facebook-font-bg.png');
    background-size:contain;
    background-repeat:no-repeat;
    width:60%;
    height:60%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
}
.container2 {
    height:auto;
    width:50%;
    padding-left:10px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}
.container2 .box {
    width:66%;
    height:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.form-container {
    background-color:white;
    border-radius:10px;
    padding:15px;
    height:auto;
    width:100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    overflow:hidden;
}
.form-container .progress-bar {
    margin:30px 0;
    height:auto;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}
.form-container .progress-bar .bar {
    transition:1s ease;
    background-color:#e7e7e7;
    width:calc(100% / 8);
    height:7px;
    border-radius:50px;
}
.form-container .progress-bar .bar.active {
    background-color:#1877F2;
}
.form-container form {
    margin-top:-10px;
    padding:0;
    width:100%;
    text-align:center;
}
.form-container form input {
    width:100%;
    font-size:16px;
    padding:15px;
    margin:6px 0 0 0;
    border-radius:5px;
    border:1px solid lightgrey;
}
.form-container form input:focus {
    outline-color:#1877F2;
}
.form-container form p {
    color:red;
    text-align:left;
    font-size:1vw;
    font-family:'Red Hat Display';
    margin:0;
}
.form-container form button {
    width:100%;
    padding:14px 20px;
    background-color:#1877F2;
    border:none;
    border-radius:5px;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}
.form-container a {
    margin:13px;
    text-decoration:none;
    color:#1877F2;
    font-size:15px;
    font-family:'Red Hat Display';
}
.form-container a:hover {
    text-decoration:underline;
}
.form-container .line {
    width:100%;
    height:1px;
    background-color:lightgrey;
}
.form-container #btn {
    padding:15px 20px;
    margin:18px 0 10px 0;
    text-transform:capitalize;
    background-color:#1eaf1e;
    border:none;
    outline:none;
    border-radius:5px;
    color:white;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    transition:0.3s;
}
.form-container #btn:hover {
    background-color:#009200;
}
.container2 .box p {
    font-family:'Red Hat Display';
    font-size:14px;
    margin:15px 0;
}
.container2 .box > p a {
    color:black;
    font-weight:bold;
    text-decoration:none;
}
.container2 .box > p a:hover {
    text-decoration:underline;
} */