@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root{
    --PrimaryColor: hsl(199, 100%, 33%);
    --SecondaryColor: hsl(187, 85%, 43%);
    --gradientColor: linear-gradient(to right, hsl(187,
    85%, 43%), hs1(199, 100%, 33%));
    --whiteColor: hsl(0, 0%, 100%);
    --blackColor: hsl(201, 33%, 16%);
    --textColor: hsl(240, 4%, 36%);
    --whiteColorDeam: hsl(0, 0%, 93%);
    --greyText: rgb(190, 190, 190);
    --inputColor: rgb(239, 239, 239);
    --bodyColor: rgb(240, 240, 246);
    --cardBG: rgb(225, 225, 235);
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

.section{
    padding: 4rem 0 2rem;
}

.container{
    padding-left: 1.5rem;
    padding-right: 1.5 rem;
}

.icon{
    font-size: 2rem;
    cursor: pointer;
}

.flex{
    display: flex;
    align-items: center;
}

.grid{
    display: grid;
    align-items: center;
}

.btn{
    padding: .6rem 1.5rem;
    background: var(--gradientColor);
    border-radius: 60 rem;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn a{
    color: var(--whiteColor);
    font-weight: 500;
}

.btn:hover{
    background: var(--SecondaryColor);
}

img, video{
    width: 100%;
    height: auto;
}

input{
    font-size: 100%;
}

body{
    background: var(--bodyColor);
}
