diff --git a/Zadania/Z35 - proste prostopadłe/index.php b/Zadania/Z35 - proste prostopadłe/index.php
new file mode 100644
index 0000000..aa013e7
--- /dev/null
+++ b/Zadania/Z35 - proste prostopadłe/index.php
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ Z35 - Proste prostopadłe
+
+
+
+
+ Zadanie Z35
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla podanych dwóch równań prostych odpowie czy proste te są prostopadłe.
+
+
+
+
+";
+ echo "a1 = {$a1} b1 = {$b1} a2 = {$a2} b2 = {$b2}
";
+ echo "f(x) = a1 x + b1 = {$a1}x + {$b1}
";
+ echo "f(x) = a2 x + b2 = {$a2}x + {$b2}
";
+
+ if ($a1 * $a2 == -1) {
+ echo "Proste są prostopadłe.
";
+ } else {
+ echo "Proste NIE są prostopadłe.
";
+ }
+ echo "";
+}
+
+
+?>
+
+
diff --git a/Zadania/Z35 - proste prostopadłe/style.css b/Zadania/Z35 - proste prostopadłe/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z35 - proste prostopadłe/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z36 - podzielność liczb/index.php b/Zadania/Z36 - podzielność liczb/index.php
new file mode 100644
index 0000000..1401bc6
--- /dev/null
+++ b/Zadania/Z36 - podzielność liczb/index.php
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+ Z36 - Podzielność liczb
+
+
+
+
+ Zadanie Z36
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który: dla liczb całkowitych (program powinien sprawdzić, czy liczby są całkowite) A i B sprawdza czy A jest podzielne przez B (wykorzystaj funkcję zwracającą resztę z dzielenia).
+
+
+
+
+';
+ echo "a = $a ";
+ echo "b = $b ";
+ if ($a % $b == 0) {
+ echo "Liczba $a jest podzielna przez $b";
+ } else {
+ echo "Liczba $a nie jest podzielna przez $b";
+ }
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z36 - podzielność liczb/style.css b/Zadania/Z36 - podzielność liczb/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z36 - podzielność liczb/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z37 - wartość bezwzględna/index.php b/Zadania/Z37 - wartość bezwzględna/index.php
new file mode 100644
index 0000000..640acb9
--- /dev/null
+++ b/Zadania/Z37 - wartość bezwzględna/index.php
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+ Z37 - Wartość bezwzględna
+
+
+
+
+ Zadanie Z37
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla liczby A oblicza jej wartość bezwzględną (nie używaj wbudowanej funkcji matematycznej).
+
+
+
+
+";
+ echo "A = {$a} ";
+ if ($a < 0) {
+ $a = -$a;
+ }
+ echo "Wartość bezwzględna liczby A: {$a}";
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z37 - wartość bezwzględna/style.css b/Zadania/Z37 - wartość bezwzględna/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z37 - wartość bezwzględna/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z38 - Wieksza lub równa/index.php b/Zadania/Z38 - Wieksza lub równa/index.php
new file mode 100644
index 0000000..fe3fbb3
--- /dev/null
+++ b/Zadania/Z38 - Wieksza lub równa/index.php
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+ Z38 - Wieksze lub równe
+
+
+
+
+ Zadanie Z38
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który: dla liczby całkowitych (program sprawdza, czy podane liczny są całkowite) A i B wyświetla, która z nich jest większa lub czy są równe.
+
+
+
+
+";
+ echo "A: $a B: $b ";
+ if ($a > $b) {
+ echo "Liczba {$a} jest wieksza od {$b}";
+ } elseif ($a == $b) {
+ echo "Liczby są równe";
+ } else {
+ echo "Liczba {$b} jest wieksza od {$a}";
+ }
+ echo "";
+}
+?>
+
+
diff --git a/Zadania/Z38 - Wieksza lub równa/style.css b/Zadania/Z38 - Wieksza lub równa/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z38 - Wieksza lub równa/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z39 - tak nie/index.php b/Zadania/Z39 - tak nie/index.php
new file mode 100644
index 0000000..e73dfe5
--- /dev/null
+++ b/Zadania/Z39 - tak nie/index.php
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+ Z39 - Tak, Nie
+
+
+
+
+ Zadanie Z39
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który Czyta wprowadzony znak z klawiatury i na „t” lub „T” wyświetla „TAK” na „n” lub „N” wyświetla „NIE” - na pozostałe znaki nie reaguję.
+
+
+
+
+';
+ if ($x == 't' || $x == 'T') {
+ echo 'TAK';
+ } else if ($x == 'n' || $x == 'N') {
+ echo 'NIE';
+ }
+ echo '';
+ }
+}
+?>
+
+
+
+
diff --git a/Zadania/Z39 - tak nie/style.css b/Zadania/Z39 - tak nie/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z39 - tak nie/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z40 - zupa/index.php b/Zadania/Z40 - zupa/index.php
new file mode 100644
index 0000000..33f1a27
--- /dev/null
+++ b/Zadania/Z40 - zupa/index.php
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+ Z40 - Zupa
+
+
+
+
+ Zadanie Z40
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który pyta o nazwę zupy – jeśli zupa to „grzybowa” lub „grochowa” (niezależnie od wielkości użytych znaków) odpowiada, że lubi te zupę. W innym przypadku odpowiada, że nie lubi tej zupy wykorzystując w odpowiedzi jej nazwę np. Zupa pomidorowa – nie lubię tej zupy!!!
+
+
+
+
+';
+ if ($nazwaZupy == 'grzybowa' || $nazwaZupy == 'grochowa') {
+ echo "Lubię tę zupę";
+ } else {
+ echo "Zupa $nazwaZupy - nie lubię tej zupy!!!";
+ }
+ echo '';
+}
+?>
+
+
diff --git a/Zadania/Z40 - zupa/style.css b/Zadania/Z40 - zupa/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z40 - zupa/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z41 - jagoda/index.php b/Zadania/Z41 - jagoda/index.php
new file mode 100644
index 0000000..e272d77
--- /dev/null
+++ b/Zadania/Z41 - jagoda/index.php
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+ Z40 - Jagoda
+
+
+
+
+ Zadanie Z40
+ Autor: Jakub Grzegorczyk
+
+
+
Napisz program, który dla stałej haslo=’Jagoda’ sprawdza czy wprowadzony z klawiatury ciąg znaków jest zgodny z hasłem.
+
+
+
+
+';
+ if ($haslo == 'Jagoda') {
+ echo "Hasło jest prawidłowe";
+ } else {
+ echo "Hasło {$haslo} jest błędne";
+ }
+}
+?>
+
+
diff --git a/Zadania/Z41 - jagoda/style.css b/Zadania/Z41 - jagoda/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z41 - jagoda/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z42 - całkowite parzyste/index.php b/Zadania/Z42 - całkowite parzyste/index.php
new file mode 100644
index 0000000..dfb5e29
--- /dev/null
+++ b/Zadania/Z42 - całkowite parzyste/index.php
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+ Z42 - Całkowite parzyste
+
+
+
+
+ Zadanie Z42
+ Autor: Jakub Grzegorczyk
+
+
+
+ Dane są dwie różne liczby całkowite.
+ Napisz program który:
+ sprawdza czy podane dwie liczby całkowite są parzyste i tylko w tym przypadku wypisuje większą z nich. W przypadku podania liczby nieparzystej wypisuje która to liczba lub liczby.
+ Wejście
+ Na wejściu dwie różne liczby całkowite.
+ Wyjście
+ Na wyjściu większa z nich jeśli obie są parzyste lub ta liczba lub liczby jeśli są nieparzyste.
+ Przykład 1
+ 4 8
+ 8
+ Przykład 2
+ 3 4
+ 3
+ Przykład 3
+ 1 7
+ 1
+ 7
+
+
+
+
+
+";
+ echo "A = {$a} ";
+ echo "B = {$b} ";
+ if($a % 2 == 0 && $b % 2 == 0) {
+ if ($a > $b) {
+ echo "Większa jest liczba a = {$a} ";
+ } elseif ($a < $b) {
+ echo "Większa jest liczba b = {$b} ";
+ } else {
+ echo "Liczby są równe";
+ }
+ } else {
+ if ($a % 2 != 0 && $b % 2 != 0){
+ echo "Liczby a = {$a} i b = {$b} są nieparzyste";
+ } elseif ($a % 2 != 0) {
+ echo "Liczba a = {$a} jest nieparzysta";
+ } elseif ($b % 2 != 0) {
+ echo "Liczba b = {$b} jest nieparzysta";
+ }
+ }
+ echo "";
+}
+?>
+
+
diff --git a/Zadania/Z42 - całkowite parzyste/style.css b/Zadania/Z42 - całkowite parzyste/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z42 - całkowite parzyste/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}
diff --git a/Zadania/Z43 - liczba dwucyfrowa/index.php b/Zadania/Z43 - liczba dwucyfrowa/index.php
new file mode 100644
index 0000000..a5a4f00
--- /dev/null
+++ b/Zadania/Z43 - liczba dwucyfrowa/index.php
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+ Z43 - Liczba dwucyfrowa
+
+
+
+
+ Zadanie Z43
+ Autor: Jakub Grzegorczyk
+
+
+
+
diff --git a/Zadania/Z43 - liczba dwucyfrowa/style.css b/Zadania/Z43 - liczba dwucyfrowa/style.css
new file mode 100644
index 0000000..7e91ac8
--- /dev/null
+++ b/Zadania/Z43 - liczba dwucyfrowa/style.css
@@ -0,0 +1,299 @@
+/* === UNIVERSAL SCHOOL TEMPLATE CSS (BLACK & WHITE EDITION) === */
+/* clean, modern, and copy-paste friendly for all projects */
+
+/* === RESET === */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* === VARIABLES === */
+:root {
+ --accent: #000;
+ --border: #000;
+ --bg: #fff;
+ --bg-alt: #f7f7f7;
+ --text: #111;
+ --shadow: rgba(0, 0, 0, 0.15) 3px 3px 6px;
+ --radius: 1em;
+ --max-width: 1300px;
+}
+
+/* === PAGE === */
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
+ background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
+ color: var(--text);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ line-height: 1.6;
+}
+
+/* === HEADER === */
+header {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 20px 30px;
+ box-shadow: var(--shadow);
+ background: var(--bg);
+ width: 95%;
+ max-width: var(--max-width);
+ text-align: center;
+ margin-top: 25px;
+ transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+header:hover {
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+ transform: translateY(-2px);
+}
+
+header h1 {
+ font-size: 2.2rem;
+}
+
+header h2 {
+ margin-top: 0.5rem;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #444;
+}
+
+/* === BOX === */
+.box {
+ border: 2px solid var(--border);
+ border-radius: var(--radius);
+ padding: 25px 35px;
+ margin-top: 25px;
+ background: var(--bg);
+ box-shadow: var(--shadow);
+ width: 95%;
+ max-width: var(--max-width);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.box:hover {
+ transform: translateY(-2px);
+ box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
+}
+
+/* === TEXT ELEMENTS === */
+p {
+ margin-bottom: 1rem;
+}
+
+.box > p:last-child {
+ margin-bottom: 0;
+}
+
+h1, h2, h3, h4 {
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+}
+
+a {
+ color: #000;
+ text-decoration: underline;
+ font-weight: 500;
+}
+
+a:hover {
+ opacity: 0.7;
+}
+
+/* === LISTS === */
+ul, ol {
+ margin: 1rem 0 1rem 1.5rem;
+}
+
+li {
+ margin-bottom: 0.4rem;
+}
+
+/* === TABLES === */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+ background: var(--bg);
+ border: 2px solid var(--border);
+ border-radius: 0.6em;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+}
+
+th, td {
+ padding: 10px 12px;
+ border-bottom: 1px solid #ccc;
+}
+
+th {
+ background: var(--bg-alt);
+ font-weight: bold;
+ text-align: left;
+}
+
+tr:hover {
+ background: #f2f2f2;
+}
+
+/* === FORMS === */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.4rem;
+}
+
+.box:has(> form) {
+ padding: 35px 35px;
+}
+
+fieldset {
+ border: 2px solid var(--border);
+ border-radius: 0.8em;
+ padding: 1.2rem 1.5rem;
+ background: var(--bg-alt);
+}
+
+legend {
+ font-weight: bold;
+ color: #000;
+ padding: 0 0.4rem;
+ font-size: 1.05rem;
+}
+
+label {
+ font-weight: 500;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+ width: 100%;
+ font-size: 1rem;
+ margin-top: 6px;
+ margin-bottom: 8px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ padding: 0.4rem 0.5rem;
+ transition: all 0.2s ease;
+ background: var(--bg);
+}
+
+textarea {
+ resize: vertical;
+ min-height: 100px;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: #000;
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
+ background: #f9f9f9;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+ accent-color: #000;
+ transform: scale(1.2);
+ margin-right: 0.3rem;
+}
+
+/* === BUTTONS === */
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"] {
+ padding: 10px 20px;
+ border: 2px solid var(--border);
+ border-radius: 0.5em;
+ font-weight: bold;
+ font-size: 1rem;
+ background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ align-self: flex-start;
+}
+
+button {
+ width: 100%;
+}
+
+button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+ background: #eaeaea;
+ box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px;
+ transform: translateY(-2px);
+}
+
+button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="reset"]:active {
+ transform: translateY(0);
+ box-shadow: rgba(0, 0, 0, 0.15) 1px 1px 3px;
+ background: #f7f7f7;
+}
+
+/* === HR, CODE, ETC. === */
+hr {
+ border: 0;
+ border-top: 2px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 0.5em;
+}
+
+code, pre {
+ background: #f4f4f4;
+ border: 1px solid #ccc;
+ border-radius: 0.4em;
+ padding: 0.3em 0.5em;
+ font-family: "Courier New", monospace;
+}
+
+pre {
+ padding: 1em;
+ overflow-x: auto;
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ header, .box {
+ width: 95%;
+ padding: 20px;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ textarea {
+ width: 100%;
+ }
+}
+
+@media (max-width: 600px) {
+ header h1 {
+ font-size: 1.7rem;
+ }
+
+ header h2 {
+ font-size: 0.95rem;
+ }
+}