:root {
        --primary:  hsl(220, 86%, 63%);
        --secondary: hsl(220, 86%, 43%);
        --color-light: hsl(0, 0%, 100%);
        --color-dark: hsl(0, 0%, 0%);
        --primary-font: 'Figtree', sans-serif;
        --h1: clamp(1.8rem, 1.0127rem + 3.499vw, 4rem);
        --h2: clamp(1.6rem, 1.099rem + 2.2266vw, 2.2rem);
        --h3: clamp(1.4rem, 1.0421rem + 1.5905vw, 2rem);
        --text-size-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
        --text-size-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
        --text-size-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
        --text-size-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
        --text-size-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
        --text-size-2xl: clamp(1.75rem, 1.239rem + 2.273vw, 3rem); 
        --text-size-3xl: clamp(1.75rem, 0.932rem + 3.636vw, 3.75rem);

}

/* latin */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(assets/fonts/Figtree.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	font-family: var(--primary-font);
	color: var(--color-light);
	font-weight: 400;
    background-color: #050505;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 600;
}


/* Native styling */
.card {
    transition: transform 0.2s;
    cursor: pointer;
    }
    .card:hover {
    transform: scale(1.02);
    }
    /* Crop images into a uniform portrait format with a fixed height */
    .card-img-top {
    width: 100%;
    height: 400px; /* Fixed height for all images */
    object-fit: cover;
    }
    .preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    /* Pastel button styles */
    .btn-soft-chat {
    margin: 0 4px;
    background-color: #a3c9f1;
    border: 1px solid #a3c9f1;
    color: #000;
    }
    .btn-soft-chat:hover {
    background-color: #90b9e8;
    border-color: #90b9e8;
    }
    .btn-soft-gen {
    margin: 0 4px;
    background-color: #a8d5ba;
    border: 1px solid #a8d5ba;
    color: #000;
    }
    .btn-soft-gen:hover {
    background-color: #95c7a8;
    border-color: #95c7a8;
    }
    .btn-soft-gallery {
    margin: 0 4px;
    background-color: #f2c6c6;
    border: 1px solid #f2c6c6;
    color: #000;
    }
    .btn-soft-gallery:hover {
    background-color: #e6a9a9;
    border-color: #e6a9a9;
    }