@charset "UTF-8"; /* FONT: Add this in your : */ body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; background-color: #7dab7d; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.8); /* White transparent overlay */ z-index: -1; } .page-wrapper { padding: 1rem; display: flex; flex-direction: column; } header, nav, section, footer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 2.5vw 0; } h1, h2, p { text-align: center; max-width: 30rem; color: #143601; } h1 { font-size: 3.5rem; } h2 { font-size: 2.2rem; } nav a { margin: 0.3rem; padding: 0.5rem 0.7rem; background: #cce6cc; border-radius: 10px; text-decoration: none; color: #143601; font-weight: bold; transition: background 0.3s; } nav a:hover { background: #b3ddb3; } /* Download button image */ .download-image-button { width: 250px; transition: transform 0.3s ease; } .download-image-button:hover { transform: scale(1.1); } /* Layout container */ .extension-documentation { width: 60vw; max-width: 1000px; } /* Reviews */ .extension-review { width: 25vw; padding: 1rem; margin: 1rem; border: 1px solid #ccc; background: rgba(255, 255, 255, 0.85); border-radius: 1rem; } /* Smaller general images and videos */ img { width: 80%; max-width: 600px; height: auto; margin: 1rem auto; display: block; border-radius: 8px; } video { width: 100%; height: auto; margin: 1rem auto; display: block; border-radius: 8px; } section.extension-installation ol { text-align: left; max-width: 600px; } footer { border-top: 1px solid #333; color: #444; font-size: 0.9rem; } /* Mobile */ @media (max-width: 780px) { .extension-documentation { width: 90vw; } .extension-review { width: 90vw; margin: 1rem 0; } .download-image-button { width: 120px; } h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } }