*, *:before, *:after{
    box-sizing: border-box;
}
html, body, div, span, object, iframe, figure, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, em, img, small, strike, strong, sub, sup, tt, b, u, i, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, main, canvas, embed, footer, header, nav, section, video
{
     margin: 0;
    padding: 0;
    border: 0 ;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    text-decoration: none;
    scroll-behavior: smooth;
    font-family: "Jost",sans-serif;
}

footer, header, nav, section, main{
     display: block;
}
    
body{
     line-height: 1;
}

ol, ul{
     list-style: none;
}

blockquote, q{
     quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after{
     content: '';
     content: none;
}
    

table{
     border-collapse: collapse;
    border-spacing: 0;
}

input{
     -webkit-appearance: none;
    border-radius: 0;
    border: none;
}
button{
     border: none
}


 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Jost:wght@200;300;400;600;700&family=Quicksand:wght@300;400&family=Roboto:wght@200;300;400;600;700&display=optional');




.container{
     display: flex;
     flex-direction: column
}
@media (min-width:320px)
{
     .container{
          width:300px
     }
}


@media (min-width:375px)
{
     .container{
          width:355px
     }
}
@media (min-width:425px){
     .container{
          width:405px
     }
}
     
@media (min-width:576px)
{
     .container{
          width:540px
     }
}
@media (min-width:768px)
{
     .container{
          width:748px
     }
}
@media (min-width:992px)
{
     .container{
          width:982px
     }
}
@media (min-width:1200px)
{
     .container{
          width:1140px
     }
}
@media (min-width:1440px)
{
     .container{
          width:1380px
     }
}
@media (min-width:1856px)
{
     .container{
          width:1440px
     }
}
@media (min-width:2560px)
{
     .container{
          width:1440px
     }
}

input[type=text]{
     width:100%;
     border:2px solid #aaa;
     border-radius:4px;
     margin:8px 0;
     outline:none;
     padding:8px;
     box-sizing:border-box;
     transition:.3s;
}

input[type=text]:focus{
     border-color:rgb(120, 166, 212);
     box-shadow:0 0 8px 0 rgb(118, 162, 207);
}


main{
     display: flex;
     align-items: center;
     flex-direction: column;
}
.singup{
     display: flex;
     align-items: center;
     justify-content: center;
}
.singup-form{
     display: flex;
     flex-direction: column;
     max-width:500px;
     width: 500px;
     padding-top: 20px;
}
.singup-form h3{
     text-align: center;
     font-size: 25px;
}
.singup-form button
{
     padding: 10px;
     background: #422eb3;
     color: #fff;
     font-size: 18px;
     margin-top: 10px;
}

.success{
     background: #98ffa4;
     padding: 10px;
     margin: 10px 0px 10px 0px;
     text-align: center;
}
.success span{
     margin-bottom: 5px;
     display: block;
}
.error{
     background: #ff9898;
     padding: 10px;
     margin: 10px 0px 10px 0px;
     text-align: center;
} 

.form-help{
     background: #4f00cf;
     padding: 2px;
     color: #fff;
}