@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --colorBG: #000b14;
            --colorSoft: rgba(0, 27, 48, 0.55);
            --colorText: #979a9b;
            --colorA: #FF1F8E;
            --colorB: #32edf2;
            --colorAltText: #f2f2f2;
            --colorButton: #1f8eff;
            --colorButtonHover: #FF1F8E;

            --colorC: #1f8eff;

        }

        body {
            font-family: "Josefin Sans", sans-serif;
            background-color: var(--colorBG);
            color: var(--colorText);
            margin: 0;
        }

        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1000px;
            margin: 6em auto 0;
            padding: 1em;
        }

        .header {
            display: flex;
            width: 100%;
            padding: 1em 2em .5em 2em;
            align-items: center;
            background-color: var(--colorSoft);
        }

        h1 {
            font-size: 2.5em;
            font-weight: 300;
            color: var(--colorAltText);
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5em;
            width: 100%;
        }
        
        .product-card {
            background-color: var(--colorSoft);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s ease;
            user-select: none;
        }
        
        .product-card:hover {
            transform: scale(1.05);
        }
        
        .product-image {
            position: relative;
            width: 100%;
            padding-top: 100%; /* 1:1 aspect ratio + 20px top and bottom */
            overflow: hidden;
        }
        
        .product-image img {
            position: absolute;
            top: 10px; /* 20px margin top */
            left: 10px; /* 20px margin left */
            width: calc(100% - 20px); /* Full width minus 20px on each side */
            height: calc(100% - 20px); /* Full height minus 20px on each side */
            border-radius: 6px;
            object-fit: contain;
            object-position: center;
        }
        
        .product-info {
            padding: 1em;
        }
        
        .product-title {
            color: var(--colorAltText);
            margin-bottom: 0.25em;
            font-size: 1.5em;
        }
        
        .product-price {
            color: var(--colorButton);
            font-size: 1.25em;
            font-weight: 700;
            margin-bottom: 0.5em;
        }

        .product-category {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            color: var(--colorText);
        }
        
        .get-now {
            text-decoration: none;
            color: var(--colorAltText); /* Assuming you want it to match the price color */
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .get-now:hover {
            color: var(--colorButtonHover);
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 1em;
            width: 100%;
            padding: 2em;
            font-size: 1.1em;
            line-height: 1.6;
            background-color: var(--colorSoft); 
        }

        h2 {
            color: var(--colorC);
            font-size: 1.8em;
            margin-bottom: 1em;
        }

        h3 {
            font-size: 1em;
            font-weight: 700;
            color: var(--colorAltText);
            text-align: left;
            text-transform: uppercase;
        }

        .links {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        }

        .link-button {
            padding: .5em 1em .25em 1em;
            background-color: var(--colorButton);
            border: none;
            color: var(--colorAltText);
            text-decoration: none;
            font-size: 1.1em;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
        }

        .link-button:hover {
            background: var(--colorButtonHover);
            text-shadow: 0 0 10px var(--colorE);
        }

        .link-button:active {
            transform: scale(0.98);
        }

        .social-container {
            display: flex;
            gap: 2em;
            width: 100%;
            padding: 1em 2em;
            align-items: center;
            background-color: var(--colorSoft);
        }

        .social-container svg {
            height: 2em;
            width: auto;
            fill: var(--colorAltText);
        }

        .social-container svg:hover {
            fill: var(--colorButtonHover);
        }

        .colorA {
            color: var(--colorA);
        }