:root {
    --white: hsl(0, 0%, 100%);
    --off-white: hsl(0, 0%, 94%);
    --off-black: hsl(0, 0%, 8%);
    --light-grey: hsl(0, 0%, 86%);
    --smokey-grey: hsl(0, 1%, 44%);
    --purple: hsl(259, 100%, 65%);
    --light-red: hsl(0, 100%, 67%);
  }

@font-face {
    font-family: poppins;
    src: url('./assets/fonts/Poppins-Regular.ttf');}
@font-face {
    font-family: poppins-bold;
    src: url('./assets/fonts/Poppins-Bold.ttf');}
@font-face {
    font-family: poppins-italic;
    src: url('./assets/fonts/Poppins-Italic.ttf');}
@font-face {
    font-family: poppins-extra-bold;
    src: url('./assets/fonts/Poppins-ExtraBold.ttf');}
@font-face {
    font-family: poppins-bold-italic;
    src: url('./assets/fonts/Poppins-BoldItalic.ttf');}
@font-face {
    font-family: poppins-extra-bold-italic;
    src: url('./assets/fonts/Poppins-ExtraBoldItalic.ttf');}



body {
    display:flex;
    flex-direction:column; 
    align-items: center;
  
    margin: 0;
    background-color: var(--off-white);
    min-width: 375px;
}

article {
    background-color: var(--white);
    margin-top: 70px;
    padding-inline: 26px;
    border-radius: 25px 25px 100px 25px;
}


.section-data-collect {
    margin-top: 50px;
}

.section-data-collect ul {
    display: flex;
    flex-direction: row;
    gap: 17px;

    list-style: none;
    margin: 0px;
    padding: 0px;
}

.section-data-collect li {
    text-align: left;
    flex-basis:   20%;
}

.section-data-collect label {
    font-family: poppins-bold;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--smokey-grey);
    display: block;
    padding-bottom: 4px;
}

.section-data-collect input {
    font-family: poppins-bold;
    font-size: 20px;
    border: solid 1px var(--light-grey);
    border-radius: 8px;

    color: var(--off-black);
    height: 50px;
    padding: 0px 15px;
    width: 55px;
}

input:focus {
    outline: none;
    border:1px solid var(--purple);/*here change the color*/
}


.section-button {
    display: flex;
    justify-content: center;
    position: relative;
    
    height: 48px;
    margin-block: 32px;
    text-align: center;
}

.section-button-line {
    position: absolute;
    top: 33px;
    width: 100%;
    border-bottom: solid 1px var(--light-grey);
}

.section-button-button {
    position: relative;
    cursor: pointer;
    height: 65px;
    width: 65px;
    background-color: var(--purple);
    border-radius: 50%;
}

.section-button-button .img1 {
    position: absolute;
    left:19px;
    top:19px;
    height: 25px;
}

.section-button-button .img2 {
    position: absolute;
    left:19px;
    top:20px;
    height: 25px;
}

.section-data-show {
    font-family: poppins-extra-bold-italic;
    color: var(--off-black);
    margin-block: 50px;
}

.section-data-show h1 {
    margin: 0px;
    font-size: 54px;
    line-height: 1.1em;
}

.section-data-show span {
    color: var(--purple);
}

.error-message {
    font-family: poppins-italic;
    color: var(--light-red);
    font-size: 8px;
    margin-block: 5px;
}

.color-gray {
    color: var(--smokey-grey) !important;
}

@media screen and (width > 900px) {
    article {
        margin-top: 70px;
        padding-inline: 60px;
        border-radius: 25px 25px 100px 25px;
        width: 725px;
        padding-bottom: 8px;
    }
    
    .section-data-collect ul {
        gap: 33px;
    }

    .section-data-collect label {
        /* font-family: poppins-bold; */
        font-size: 14px;
        letter-spacing: 4px;
        color: var(--smokey-grey);
        display: block;
        padding-bottom: 4px;
    }

    .section-data-collect input {
        font-size: 32px;
        height: 70px;
        padding: 0px 24px;
        color: var(--smokey-grey);
        width: 110px;
    }


    .section-button {
        margin-top: 0px;
        justify-content: end;
    }

    .section-button-line {
        top: 50px;
    }
    
    .section-button-button {
        height: 100px;
        width: 100px;
    }
    
    .section-button-button .img1 {
        left:25px;
        top:25px;
        height: 45px;
    }
    
    .section-button-button .img2 {
        left:25px;
        top:26px;
        height: 45px;
    }

    .section-data-show h1 {
        font-size: 102px;
    }
}