styles.css

/*GENERAL STYLES*/
*{
	box-sizing: border-box;
	font-size: 16px;
}

/* google fonts */
.dynapuff-header { /* use this for headers -  add new class if changing weight/style */
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.truculenta-body { /* use this for body -  add new class if changing weight/style */
  font-family: "Truculenta", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* Modifying bootstrap component */
.container-fluid {
	padding-right: 0;
	padding-left: 0;
	margin-right: 0;
	margin-left: 0;
}
	
/* Navbar dropdown styling */
.dropdown-item {
	color: var(--clr-charcoal); /* text colour */
}

.dropdown-item:hover {
	background-color: var(--clr-air-force-blue); /* hover background colour */
	color: var(--clr-mint-cream); /* hover text colour */
}

/* Colour Scheme Darkest to Lightest */ 
:root {
    /* created variables of colours - use var(variablename) isntead of hexcode in classes - e.g. color: var(--clr-slate-gray) */
    --clr-charcoal: #243c4cff;
    --clr-charcoal-2: #2c444cff;
    --clr-air-force-blue: #5289adff;
    --clr-slate-gray: #698696ff;
    --clr-ash-gray: #acbcbfff;
    --clr-mint-cream: #f4fcfbff;
}

/*
style notes for team developers
all class names for your pages should be(to avoid overwritting others css code): pageNo_whateverElse  eg. p1_mainTitle
select element in css using id or classes (to avoid overwritting others css code)

use rem unit for any text size(good for responsiveness)

*/


/*SZYMON*/
/* use class names: p4 (both) p4-1 (page 1) or p4-2 (page 2) */

.sw *{
	box-sizing: border-box; /* includes padding and margins in width and height */
	font-size: 16px; /* sets default font size */
}

.SW_dropdown-menu {
	background-color: var(--clr-ash-gray); /* changes colour of dropdown menu */
}

.p4_title {
	margin-top: 2.5rem; /* adds space above */
	margin-bottom: 2.5rem; /* adds space below */
	padding: 0; /* no padding inside */
	font-size: 3rem; /* 3x size of root element (16px) = 48px */
	text-align: center; /* centers text horizontally */
	color: var(--clr-air-force-blue); /* changes color to variable (easier to remember/change than hex) */
	text-shadow: 2px 2px var(--clr-charcoal); /* adds shadow to text (x-offset y-offset colour) */
}

.p4_title2 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-top: 1rem;
	font-size: 1.5rem;
	text-align: center;
	color: var(--clr-air-force-blue);
	text-shadow: 2px 2px var(--clr-charcoal);
}

.p4_textBody {
	padding: 0 1rem 0 1rem; /* top / right / bottom / left */
	text-align: justify; /* aligns text evenly on both sides */
	font-size: 1.5rem;
	color: var(--clr-charcoal-2);
}

.p4_background {
	background-color: var(--clr-ash-gray); /* changes background colour */
}

.p4_container1 {
	display: flex; /* turns container into flexbox */
}

.p4_container2 {
	display: flex; /* turns into flexbox */
	gap: 2rem; /* space between flex items */
	padding: 0 1rem;
	margin-bottom: 3rem;
}

.p4_formContainer {
	width: min(600px, 80%); /* takes smaller value between 600px and 80% of screen */
	background-color: var(--clr-slate-gray); /* changes background colour */
	border-radius: 16px; /* rounds corners */
	margin: 0 auto 1rem; /* centers horizontally with auto left and right margins */
	padding: 0 1rem 0 1rem;
	box-shadow: 0 0 10px 1px var(--clr-charcoal-2); /* adds shadow (x y blur spread colour) */
	box-sizing: border-box; /* includes padding and margins in width */
}

.p4_form-group {
	padding: 1rem; /* 1rem (16px) padding on all sides */
}

.p4_form-group label {
	color: #000000; /* black text */
	font-size: 1.25rem;
	font-weight: bold; /* makes text bold */
}

.p4_form-group-donate label {
	color: #000000;
	font-size: 1.25rem;
	font-weight: bold;
	display: inline-block; /* mixes properties of inline and block (allows width/height)*/
	padding: 0.2rem 0.5rem;
	margin: 5px;
	border: 2px solid var(--clr-charcoal); /* 2px border */
	border-radius: 5px; /* rounds corners */
	cursor: pointer; /* changes to pointer cursor when hovering */
	transition: all 0.3s; /* transitions changes instead of being instant */
	background-color: var(--clr-ash-gray);
}

.p4_form-group-donate input[type="radio"] {
	display: none; /* hides radio buttons */
}

.p4_form-group-donate input[type="radio"]:checked + label {
	background-color: var(--clr-charcoal); /* darker background when selected */
	color: var(--clr-mint-cream); /* light text when selected */
	border-color: var(--clr-charcoal); /* border color when selected */
}

.p4_form-group-donate input[type="radio"]:checked:hover + label {
	border-color: var(--clr-mint-cream); /* changes border color on hover when checked */
}

.p4_form-group-donate label:hover {
	border-color: var(--clr-mint-cream); /* changes border color on hover */
}

#customAmountContainer {
	display: none; /* completely hides element */
	margin-top: 1rem; /* space above when shown */
}

#customAmountContainer.show {
	display: inline-block; /* shows element as inline-block */
}

#customAmountInput {
	padding: 0.25rem;
	border: 2px solid var(--clr-charcoal); /* 2px border */
	background-color: var(--clr-ash-gray); /* background color */
	color: var(--clr-charcoal); /* text color */
	border-radius: 5px; /* rounded corners */
	width: 10rem; /* fixed width */
}

.p4_currency {
	padding-left: 0.5rem;
	font-size: 1.25rem;
	font-weight: bold;
}

.p4_center {
	text-align: center; /* centers text horizontally */
}

.p4_form-group input[type="text"], input[type="email"], textarea {
	width: 100%; /* makes the text inputs take up 100% of the container */
}

.p4_form-group input, textarea {
	background-color: var(--clr-ash-gray);
	border-radius: 5px;
	border-style: solid; /* solid border line */
	border-width: 0.15rem; /* border thickness */
	border-color: var(--clr-charcoal);
	color: var(--clr-charcoal);
	font-size: 1rem;
}

.p4_form-group button[type="submit"] {
	background-color: var(--clr-charcoal);
	color: var(--clr-mint-cream);
	border-radius: 5px;
	border-style: solid;
	border-color: var(--clr-charcoal);
	font-size: 1rem;
	cursor: pointer; /* hand cursor on hover */
	display: block; /* takes up full available width */
	margin: 0 auto; /* centers automatically */
	padding: 0.5rem 2rem;
	transition: all 0.3s; /* smooth animation (0.3s to change css instead of instant) */
}

.p4_form-group button[type="submit"]:hover {
	color: var(--clr-charcoal);
	background-color: var(--clr-ash-gray);
	border-color: var(--clr-mint-cream);
}

.p4_btn-donate {
	position: fixed; /* stays in the same place when you scroll down */
	top: 1rem; /* distance from top of screen */
	right: 1rem; /* distance from right of screen */
	z-index: 1000; /* keeps the button above everything else */
	display: inline-block;
	padding: 0.25rem 1rem;
	border-radius: 5px;
	border-style: solid;
	border-width: 0.15rem;
	border-color: var(--clr-charcoal);
	text-decoration: none; /* removes underline from link */
	color: var(--clr-charcoal);
	background-color: var(--clr-slate-gray);
	font-size: 1.25rem;
	transition: all 0.3s; /* makes hover smoother */
}

.p4_btn-donate:hover {
	background-color: var(--clr-charcoal);
	color: var(--clr-mint-cream);
}

.p4_alignRow {
	display: flex; /* flex layout */
	justify-content: space-between; /* spreads items with space between */
	flex: 1; /* allows items to grow/shrink */
	gap: 0.5rem; /* gap between items */
	flex-wrap: wrap; /* wraps items to next line if needed */
}

.p4_alignRow input:first-of-type {
	flex: 1; /* grows/shrinks depending on space */
	min-width: 150px; /* minimum width allowed (won't go lower) */
}

.p4_alignRow input:nth-of-type(2) {
	width: 5rem; /* fixed width */
	min-width: 5rem; /* min width */
}

.p4_alignRow input:last-of-type {
	width: 3rem;
	min-width: 3rem;
}

.p4_img {
	align-self: start; /* aligns to start of flex container */
	padding-left: 1rem; /* moves image away from screen border */
	width: 400px; /* width of image */
	height: 400px; /* height of image */
	object-fit: cover; /* crops image to fill space while keeping aspect ratio */
}

.p4_tableWrapper {
	flex: 1; /* allows shrink/grow */
	overflow-x: auto; /* adds horizontal scrollbar if content overflows */
}

.p4_table {
	width: 100%; /* takes up full width of container */
	border-collapse: collapse; /* removes space/borders between table cells */
	background-color: var(--clr-mint-cream);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow effect */
	border-radius: 8px;
	overflow: hidden; /* hides overflown content */
}

.p4_table thead {
	background-color: var(--clr-air-force-blue); /* background colour of table head */
	color: var(--clr-mint-cream); /* text colour of table head */
}

.p4_table th {
	padding: 1rem; /* padding for header cells */
	text-align: left;
	font-size: 1.25rem;
	font-weight: bold;
	text-shadow: 1px 1px var(--clr-charcoal);
}

.p4_table td {
	padding: 0.75rem 1rem; /* padding for data cells / rows */
	border-bottom: 1px solid var(--clr-ash-gray); /* adds border on bottom of cell */
	color: #000000;
	font-size: 1.1rem;
}

.p4_table tbody tr:last-child td {
	border-bottom: none; /* removes the bottom border from the last row */
}

.p4_table tbody tr:hover {
	background-color: var(--clr-ash-gray);
	transition: background-color 0.3s; /* smooth colour transition */
}

.p4_bulletPoints {
	flex: 1; /* grows/shrinks to take equal space with siblings (elements with same parent container) */
	background-color: var(--clr-slate-gray);
	padding: 1.5rem;
	border-radius: 8px; /* rounds the corners of container */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /*  */
}

.p4_bulletPoints h2 {
	margin-top: 0; /* removes top margin */
	margin-bottom: 1.5rem;
	font-size: 2rem;
}

.p4_bulletPoints li {
	padding: 0.75rem 0;
	padding-left: 2rem; /* left spacing for custom bullet point */
	position: relative; /* allows absolute positioning of children */
	color: #000000;
	font-size: 1.1rem;
	line-height: 1.6; /* space between lines of text */
}

.p4_bulletPoints ul { /* targets only unordered lists wrapped in p4_bulletPoints class */
	list-style-type: none; /* removes the standard dot in ul */
	padding-left: 0;
	margin: 0;
}

.p4_bulletPoints li::before { /* ::before inserts content before the element */
	content: "💧"; /* changes the dot from unordered lists to a water drop */
	position: absolute; /* makes the position absolute */
	left: 0; /* positions it at the very edge on the left */
	font-size: 1.25rem; /* resizes the emoji */
}

@media (max-width: 1000px) { /* if the width is less than 1000px change things below */
	.p4_container1, .p4_container2, .p4_formContainer {
		display: flex; /* makes the container into a flexbox */
		flex-direction: column; /* stacks items veritcally */
		box-sizing: border-box;
		
	}
	.p4_img {
		align-self: center; /* centers image horizontally */
	}
	.p4_btn-donate {
		font-size: 1rem; /* smaller text on mobile */
		padding: 0.2rem 0.75rem; /* less padding on mobile | makes button smaller */
		top: 4rem; /* moved down from top | doesn't block hamburger menu */
		right: 0.5rem; /* closer to the right */
	}
}