@import url("variables.css");
@import url("components.css");
@import url("animations.css");
@import url("responsive.css");

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@600;700;800&display=swap');

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{

    font-family:var(--body);

    background:var(--dark);

    color:var(--white);

    line-height:1.7;

    overflow-x:hidden;

    padding-top:calc(90px + env(safe-area-inset-top));

}

::selection{
    background:var(--primary);
    color:white;
}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

.container{

    width:min(90%,1200px);

    margin:auto;

}

section{

    padding:var(--section-padding) 0;

}

h1,h2,h3,h4{

    font-family:var(--heading);

    line-height:1.2;

}

h1{

    font-size:4rem;

}

h2{

    font-size:2.7rem;

}

p{

    color:var(--gray);

    font-size:1.1rem;

}