:root
{
    --primary-color: #fffea3;
    --secondary-color: #a3a3ff;
    --mint-color: #a3ffd0;
    --rosa-color: #ffa3d2;

    --contrast-color: #262626;
}
@font-face
{
  font-family: 'Alfa Slab One';
  src: url('../fonts/AlfaSlabOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face
{
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*
{ 
    color: var(--contrast-color);
    font-family: "Inter", system-ui, sans-serif;
}
body
{
    padding-top: 2rem;
    background-color: var(--primary-color);
}
main
{
    min-height: 100vh;
}
h1
{
    text-align: center;
}
.lg-container
{
    max-width: 1500px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}
.heading
{
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
}
.secondary-back
{
    position: relative;
    z-index: 1;
}
.secondary-back::after
{
    content: " ";
    background-color: var(--secondary-color);
    width: 80%;
    height: 4rem;
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    z-index: -1;
    transform: rotate(-5deg);
}
.mint-back
{
    position: relative;
    z-index: 1;
}
.mint-back::after
{
    content: " ";
    background-color: var(--mint-color);
    width: 100%;
    height: 2rem;
    position: absolute;
    top: 1.5rem;
    left: 1rem;
    z-index: -1;
    transform: rotate(5deg);
}
.flex-center
{
    display: flex;
    justify-content: center;
}
.arrow
{
    width: auto;
    height: 5rem;
    stroke-width: 6;
    stroke: var(--rosa-color);
}
.container
{
    padding: 2rem 0;
}
.l-container
{
    max-width: 1100px;
    margin: auto;
}
.lg-font
{
    font-weight: bold;
    font-size: 1.3rem;
}
.mt-1
{
    margin-top: 2rem;
}
.mt-2
{
    margin-top: 4rem;
}
.card-container
{
    display: flex;
    gap: 2rem;
}
.card
{
    background-color: var(--secondary-color);
    padding: 1rem;
    box-shadow: 1rem 1rem;
    text-transform: uppercase;
    transition: scale 1s;
}
.card:hover
{
    scale: 1.05;
}
*, *::before, *::after {
  box-sizing: border-box;
}
.box
{
    padding: 1rem;
    box-shadow: 1rem 1rem;
}
.flat-box-container
{
    padding: 0 2rem;
}
.flat-box
{
    position: relative;
    z-index: 1;
}
.flat-box-one::after
{
    content: " ";
    background-color: var(--secondary-color);
    width: 50%;
    height: 40px;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: -1;

}
.flat-box-two
{
    text-align: right;
}
.flat-box-two::after
{
    content: " ";
    background-color: var(--mint-color);
    width: 50%;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: -1;

}
.flat-box-three::after
{
    content: " ";
    background-color: var(--rosa-color);
    width: 50%;
    height: 40px;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: -1;

}
.bg-mint
{
    background-color: var(--mint-color);
}
.bg-rosa
{
    background-color: var(--rosa-color);
}
.fat-text
{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
}
.center-text
{
    text-align: center;
}
.deco-underline
{
    position: relative;
    z-index: 1;
}
.deco-underline::after
{
    content: " ";
    background-color: var(--rosa-color);
    position: absolute;
    width: 98px;
    height: 20px;
    top: 20px;
    left: 5px;
    z-index: -1;    
    transform: rotate(-3deg);
}
.call-bg, .mail-bg
{
    position: relative;
    z-index: 1;
}
.call-bg::after
{
    content: " ";
    background-color: var(--secondary-color);
    position: absolute;
    width: 80%;
    height: 2rem;
    bottom: 0px;
    left: 5px;
    z-index: -1;    
    transform: rotate(-3deg);
}
.mail-bg::after
{
    content: " ";
    background-color: var(--mint-color);
    position: absolute;
    width: 60%;
    height: 1.5rem;
    bottom: 0px;
    left: 5px;
    z-index: -1;    
    transform: rotate(2deg);
}
.footer-container
{
    background-color: var(--contrast-color);
    color: var(--primary-color);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    text-align: center;
}
.footer-container > a
{
    color: var(--primary-color);
    text-decoration: none;
}
.footer-container > a:hover
{
    color: var(--secondary-color);
    cursor: pointer;
}
@media (max-width: 480px)
{
    h1 
    {
        text-align: left;
    }
}
@media (max-width: 992px)
{
    .card-container
    {
        flex-direction: column;
    }
}