:root{
    --primary-1:#ca6d10;

    --secondary-1:#0b92a4;
    --secondary-2:#116975;
    --secondary-3:#282a2c;

    --tertiary-1:rgb(62, 194, 166);
    --tertiary-2:rgb(15, 140, 138);
    --tertiary-3:rgb(195, 252, 251);
}

* {
    padding:0;
    margin:0;
}

html{
    height:100%;
    scroll-behavior: smooth;
}
body{
    min-height: 100%;
    font-family: 'Poppins', 'Helvetica';
}

.p-s{
    padding-left:2rem;
    padding-right:2rem;
    padding-top:0.75rem;
    padding-bottom:0.75rem;
}
.px-s{
    padding-left:2rem;
    padding-right:2rem;
}
.py-s{
    padding-top:1rem;
    padding-bottom:1rem;
}

.p-m{
    padding-left:3rem;
    padding-right:3rem;
    padding-top:1rem;
    padding-bottom:1rem;
}
.px-m{
    padding-left:3rem;
    padding-right:3rem;
}
.py-m{
    padding-top:2rem;
    padding-bottom:2rem;
}

.p-l{
    padding-left:5.75rem;
    padding-right:5.75rem;
    padding-top:3.75rem;
    padding-bottom:3.75rem;
}
.px-l{
    padding-left:5.75rem;
    padding-right:5.75rem;
}
.py-l{
    padding-top:3.75rem;
    padding-bottom:3.75rem;
}


.m-s{
    margin-left:2rem;
    margin-right:2rem;
    margin-top:0.75rem;
    margin-bottom:0.75rem;
}
.mx-s{
    margin-left:2rem;
    margin-right:2rem;
}
.my-s{
    margin-top:1rem;
    margin-bottom:1rem;
}

.m-m{
    margin-left:3rem;
    margin-right:3rem;
    margin-top:1rem;
    margin-bottom:1rem;
}
.mx-m{
    margin-left:3rem;
    margin-right:3rem;
}
.my-m{
    margin-top:2rem;
    margin-bottom:2rem;
}

.m-l{
    margin-left:5.75rem;
    margin-right:5.75rem;
    margin-top:3.75rem;
    margin-bottom:3.75rem;
}
.mx-l{
    margin-left:5.75rem;
    margin-right:5.75rem;
}
.my-l{
    margin-top:3.75rem;
    margin-bottom:3.75rem;
}

h1{
    color:var(--tertiary-3);
    font-size:3rem;
    text-align: center;
}
h1.primary{
    color:var(--primary-1);
}


@media only screen and (max-width: 650px) {
    h1{
        font-size:2.5rem;
    }
}

@media only screen and (max-width: 550px) {
    h1{
        font-size:2rem;
    }
}
@media only screen and (max-width: 500px) {
    h2{
        font-size:18px;
    }
    h3{
        font-size:16px;
    }
    p, a{
        font-size:14px;
    }
}

@media only screen and (max-width: 350px) {
    h1{
        font-size:1.75rem;
    }
}

@media only screen and (max-width: 300px) {
    h1{
        font-size:1.5rem;
    }
    h3{
        font-size:13px;
    }
    p, a{
        font-size:12px;
    }
}