* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui;
    text-decoration: none;
}
html, body{
    width: 100%;
    height: 100%;
    background-color: var(--body-color);
}
:root{
 --body-color:#f0f2f5;
 --color: #1d2129;
 --btn-color: #1877f2; 
 --border: #dddfe2;
 --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}
.text-wrapper{
 padding-block: 25px;
}
.text-wrapper h1, p {
text-align: center;
}
.text-wrapper h1 {
color: var(--btn-color);
font-size: 2.1rem;
}
.text-wrapper p {
font-weight: 500;
}
.text-wrapper a{
 color: var(--btn-color);
 font-size: 17px;
 font-weight: 700;
 transition: all ease .3s;
}
.text-wrapper a:hover{
 font-stretch: expanded;
}
.form-wrapper{
 width: 45%;
 margin: 0 auto;
 border-radius: 8px;
 background: #ffffff;
 box-shadow: var(--box-shadow);
 padding: 22px;
}
form{
 display: flex;
 align-items: flex-start;
 flex-direction: column;
}
label{
 font-size: 19px;
 font-weight: 500;
 color: var(--color);
 width: 96%;
 margin: auto;
}
input, textarea{
 font-size: 15px;
 font-weight: 500;
 padding: 11px 12px;
 border-radius: 4px;
 color: var(--color);
 border: 1px solid var(--border);
 margin: 12px auto;
 outline: none;
 width: 96%;
 transition: all .3s ease;
}
input[type="submit"]{
 font-weight: 600;
 text-transform: uppercase;
 background: var(--btn-color);
 border: none;
 color: white;
 outline: none;
 cursor: pointer;
}
input[type="submit"]:hover{
 background: var(--btn-color);
}
input[type="submit"]:active{
 scale: .96;
}
@media (width <= 950px) {
 .form-wrapper{
   width: 60%;
 }
}
@media (width <= 650px) {
 .form-wrapper{
   width: 80%;
 }
}