*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}



@font-face {
    font-family: "Poppins Regular";
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: "Poppins Medium";
    src: url(../fonts/Poppins-Medium.ttf);
}

@font-face {
    font-family: "Poppins Semibold";
    src: url(../fonts/Poppins-SemiBold.ttf);
}


@font-face {
    font-family: "Poppins Bold";
    src: url(../fonts/Poppins-Bold.ttf);
}

:root{
    /* Colors */
    --accent: #404FD8;
    --dark: #1E2433;
    --bg-link: #343A47;
    --bg-color: #F2F5F9;
    --border-color: #D4DCE8;
    --link-color: #DFE4ED;
    --accent-hover-color: #9CBCFF;
    /* FONTSIZE */
    --labelSize: 1.4rem;
    --textSize: 1.6rem;
    --headingSize: 3.2rem;
    --subheadingSize: 2.4rem;
    --buttonFont: "Poppins Bold";
    --headingFont: "Poppins Semibold";
    --textFont: "Poppins Regular";
    /* Shadow */
    --shadow: 0px 4px 13px 0 rgba(0, 22, 135, 0.07);
    /* Border radius */
    --radius: 8px;
}

.form__field label{
    font-size: var(--labelSize);
    color: var(--dark);
}

body{
    background: var(--bg-color);
   
}

h1, h2, h3{
    font-family: var(--headingFont);
}

a{
    font-family: var(--headingFont);
    text-decoration: none;
}

h1{
    font-size: var(--headingSize);
}

p{
    font-family: var(--textFont);
    font-size: var( --textSize);
}

label{
    font-family: var(--headingFont);
}

textarea,
input{
    width: 100%;
    padding: 16px 10px;
    border-radius: var(--radius);
    border: none;
    border: 1px solid var(--border-color);
    outline: none;
    font-size: 1.6rem;
}

textarea{
    resize: none;
}

input:focus{
    border: 1px solid var(--accent);
}

.btn{
    padding: 16px 10px;
    border-radius: var(--radius);
    border: none;
    background: var(--accent);
    color: white;
    text-align: center;
    font-family: var(--buttonFont);
    cursor: pointer ;
    font-size: var(--textoSize);
}

.btn:active{
    transform: scale(.98);
}