:root{
    --seashell:#F9F3F1;
    --cmky-pink:#DF2A5D;
    --cmky-blue:#056FC2;
    --cmky-yellow:#EFC700;
}

/* --- Text Colors --- */
.text-seashell{color:var(--seashell);}
.text-cmky-pink{color:var(--cmky-pink);}
.text-cmky-blue{color:var(--cmky-blue);}
.text-cmky-yellow{color:var(--cmky-yellow);}

/* --- Background Colors --- */
.bg-seashell{background-color:var(--seashell);}
.bg-cmky-pink{background-color:var(--cmky-pink);}
.bg-cmky-blue{background-color:var(--cmky-blue);}
.bg-cmky-yellow{background-color:var(--cmky-yellow);}

/* --- Border Colors --- */
.border-seashell{border:3px solid var(--seashell);}
.border-cmky-pink{border:3px solid var(--cmky-pink);}
.border-cmky-blue{border:3px solid var(--cmky-blue);}
.border-cmky-yellow{border:3px solid var(--cmky-yellow);}

/* --- Border Top --- */
.top-seashell-border{border-top:3px solid var(--seashell);}
.top-cmky-pink-border{border-top:3px solid var(--cmky-pink);}
.top-cmky-blue-border{border-top:3px solid var(--cmky-blue);}
.top-cmky-yellow-border{border-top:3px solid var(--cmky-yellow);}

/* --- Border Bottom --- */
.bottom-seashell-border{border-bottom:3px solid var(--seashell);}
.bottom-cmky-pink-border{border-bottom:3px solid var(--cmky-pink);}
.bottom-cmky-blue-border{border-bottom:3px solid var(--cmky-blue);}
.bottom-cmky-yellow-border{border-bottom:3px solid var(--cmky-yellow);}

/* --- Border Left --- */
.left-seashell-border{border-left:3px solid var(--seashell);}
.left-cmky-pink-border{border-left:3px solid var(--cmky-pink);}
.left-cmky-blue-border{border-left:3px solid var(--cmky-blue);}
.left-cmky-yellow-border{border-left:3px solid var(--cmky-yellow);}

/* --- Border Right --- */
.right-seashell-border{border-right:3px solid var(--seashell);}
.right-cmky-pink-border{border-right:3px solid var(--cmky-pink);}
.right-cmky-blue-border{border-right:3px solid var(--cmky-blue);}
.right-cmky-yellow-border{border-right:3px solid var(--cmky-yellow);}


@media (max-width:770px){
    .main-sec{
        padding-left:4rem;
        padding-right:4rem;
    }
    #contact-main{
        padding:1.4rem;
    }
    .squareup{
        aspect-ratio:4/3;
    }
}

@media (max-width:600px){
    .main-sec{
        padding-left:2rem;
        padding-right:2rem;
    }
    #contact-main{
        padding:1rem;
    }
    #contact-form{
        padding:1.5rem;
    }
    .squareup{
        aspect-ratio:1/1;
    }
    main{
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

@media (max-width:500px){
    .main-sec{
        padding-left:1.5rem;
        padding-right:1.5rem;
    }
    #contact-margin{
        padding:0;
    }
    #msp-nav{
        gap:1.5rem;
    }
}

@media (max-width:400px){
    .main-sec{
        padding-left:1rem;
        padding-right:1rem;
    }
    #msp-nav{
        gap:1rem;
    }
}