/*gdy używasz Tailwind CSS i definiujesz bg-gray-800 bg-opacity-80, Tailwind CSS ustawia przezroczystość tylko tła.
Gdy używasz własnego CSS z background-color: #1f2937; opacity: 0.8;, przeglądarka ustawia przezroczystość całego elementu, w tym Twojego drugiego elementu, który znajduje się na nim.
Jeśli chcesz osiągnąć ten sam efekt w CSS, musisz zastosować rgba dla koloru tła, aby kontrolować przezroczystość tylko tła, a nie całego elementu.*/

.navbar {
	background-color: rgba(17, 24, 39, 0.9); /* bg-gray-900 bg-opacity-90 */
	color: rgb(255 255 255); /* text-white */
	text-align: center; /* text-center */
	padding: 1rem; /* p-4 */
}

.titlebar {
	/*background-color: #172554; bg-blue-950;
	opacity: 85%;*/
	background-color: rgba(23, 37, 84, 0.85);
	color: #d1d5db;/*text-gray-300*/
	text-align: center;
	padding: 2rem;
	width: 100%;
	max-width: 75%;
	/*border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;*/
}

.basic-setup {
    /*background-color: #60a5fa;*/
    background-color: rgba(59, 130, 246, 0.1);
    flex-grow: 1; /* flex-grow */
    display: flex; /* flex */
    flex-direction: column; /* flex-col */
    align-items: center; /* items-center */
}

.main-section {
	/*background-color: #1f2937;
	opacity: 0.8;*/
	background-color: rgba(31, 41, 55, 0.8);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 75%;
	padding: 2rem;
	flex-grow: 1;
}

.content-section {
	/*width: 100%;
	max-width: 75%;*/
	margin: 0 auto;
	/*background-color: #1e293b; /* bg-gray-900
	opacity: 0.5;*/
	background-color: rgba(17, 24, 39, 0.5);
	color: rgb(191 219 254); /* text-blue-200 */
	padding: 1rem; /* p-4 */
	border-radius: 0.5rem; /* rounded-lg */
	margin-bottom: 2rem; /* mb-8 */
}

.titlebar-button {
	display: inline-block; /*inline-block*/
	background-color: #d1d5db; /*bg-gray-300*/
	color: #172554; /*text-blue-950*/
	padding-left: 1.5rem; /*px-6*/
	padding-right: 1.5rem; /*px-6*/
	padding-top: 0.75rem; /*py-3*/
	padding-bottom: 0.75rem; /*py-3*/
	border-radius: 0.25rem; /*rounded*/
	transition: background-color 0.15s ease-in-out; /*transition*/
}

.titlebar-button:hover {
  background-color: #f3f4f6; /*hover:bg-gray-100*/
}