@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --n-100: white;
    --n-200: #c7f9cc;
    --n-300: #80ed99;
    --n-400: #57cc99;
    --n-500: #38a3a5;
    --n-600: #22577a;
}

body {
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe293 100%);
}

.font-poppins {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
}

.font-monti {
    font-family: "Montserrat", serif;
    font-weight: 400;
    font-style: normal;
}

.img-frame{
    border: 4px solid var(--n-400);
}

.ratio-4x1 {
    aspect-ratio: 4/1;
}


a {
    margin-bottom: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.fs-small {
    font-size: small;
}

.fs-smaller {
    font-size: smaller;
}

.fs-xsmall {
    font-size: x-small;
}

.text-n-100 {
    color: var(--n-100);
}

.text-n-200 {
    color: var(--n-200);
}

.text-n-300 {
    color: var(--n-300);
}

.text-n-400 {
    color: var(--n-400);
}

.text-n-500 {
    color: var(--n-500);
}

.text-n-600 {
    color: var(--n-600);
}


.bg-n-100 {
    background-color: var(--n-100);
}

.bg-n-200 {
    background-color: var(--n-200);
}

.bg-n-300 {
    background-color: var(--n-300);
}

.bg-n-400 {
    background-color: var(--n-400);
}

.bg-n-500 {
    background-color: var(--n-500);
}

.bg-n-600 {
    background-color: var(--n-600);
}

.bg-glass {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

.bg-hvr:hover {
    opacity: .8;
    transition: .3s;
}

.border-n-100 {
    border: 3px solid var(--n-100);
}

.border-n-200 {
    border: 3px solid var(--n-200);
}

.border-n-300 {
    border: 3px solid var(--n-300);
}

.border-n-400 {
    border: 3px solid var(--n-400);
}

.border-n-500 {
    border: 3px solid var(--n-500);
}

.border-n-600 {
    border: 3px solid var(--n-600);
}