diff --git a/index.html b/index.html
index 0db4a65..eb5f17c 100644
--- a/index.html
+++ b/index.html
@@ -4,121 +4,7 @@
Jak jsme na tom, PedF
-
-
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..621ea19
--- /dev/null
+++ b/style.css
@@ -0,0 +1,113 @@
+:root {
+ --wrap: 60rem;
+ --red: #b52637;
+}
+
+@font-face {
+ font-family: moderat;
+ src: url(moderat.otf);
+}
+
+html { scroll-behavior: smooth }
+body {
+ margin: 0;
+ font-family: moderat, sans-serif;
+ font-size: 15pt;
+}
+
+a {
+ color: var(--red);
+ text-decoration: none;
+}
+a:hover { text-decoration: underline }
+
+ul {
+ padding: 0;
+ list-style-type: none;
+}
+
+header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ text-align: center;
+ padding: 0 1em;
+}
+header .title {
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 5rem;
+ border-bottom: 3px solid var(--red);
+}
+header .title img {
+ max-height: 20rem;
+ margin: 2rem;
+}
+header h1 {
+ font-size: 4em;
+}
+header p { font-size: 1.5em }
+
+nav {
+ margin: 4rem auto;
+ font-size: 1.2rem;
+}
+nav ul {
+ display: flex;
+ flex-wrap: wrap;
+}
+nav ul li a {
+ display: block;
+ margin: .25em;
+ padding: .5em .8em;
+ background-color: #fff;
+ border: 1px solid #000;
+ border-radius: .5em;
+ text-decoration: none;
+ color: inherit;
+}
+nav ul li a:hover {
+ background-color: var(--red);
+ border-color: var(--red);
+ color: #fff;
+ text-decoration: none;
+}
+
+main {
+ max-width: var(--wrap);
+ margin: 0 auto;
+ margin-bottom: 10rem;
+ padding: 0 1em;
+ line-height: 1.5;
+}
+main h2, main h3 { color: var(--red) }
+main h2 {
+ margin-top: 5rem;
+ padding-top: 5rem;
+ font-size: 2em;
+}
+main h2:first-child { margin-top: 0 }
+main h3 { margin-top: 2em }
+main ul li {
+ display: flex;
+ align-items: center;
+}
+
+@media only screen and (max-width: 1000px) {
+ header .title {
+ flex-direction: column-reverse;
+ align-items: center;
+ }
+ header h1 { font-size: 2em }
+ nav {
+ max-width: 20em;
+ width: 90%;
+ }
+ nav ul {
+ flex-direction: column;
+ align-items: stretch;
+ }
+}
+