@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

h1{
   font-family: "Staatliches", sans-serif;
    color: var(---colorOnSecondary);
    font-size: 34px;
}

.section{
    background-color: var(---colorOnPrimary);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    
}

.buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

p{
    max-width: 630px;
    text-align: center;
    color: var(---textColor);
    font-size: 16px;
    margin-top: .5rem;
}

@media screen and (min-width:1024px) {

    .section{
        padding: 0 4rem;
    }
    h1{
        font-size: 90px;
    }
    p{
        font-size: 18px;
    }

}

@media screen and (min-width:1200px) {

    .section{
        padding: 0 6rem;
    }

    h1{
        font-size: 100px;
    }

    
}