diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c4c4ffc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.zip
diff --git a/css/fonts/Lobster/Lobster-Regular.ttf b/css/fonts/Lobster/Lobster-Regular.ttf
new file mode 100644
index 0000000..21c0073
Binary files /dev/null and b/css/fonts/Lobster/Lobster-Regular.ttf differ
diff --git a/css/fonts/LobsterTwo/LobsterTwo-Bold.ttf b/css/fonts/LobsterTwo/LobsterTwo-Bold.ttf
new file mode 100644
index 0000000..2e53bca
Binary files /dev/null and b/css/fonts/LobsterTwo/LobsterTwo-Bold.ttf differ
diff --git a/css/fonts/LobsterTwo/LobsterTwo-BoldItalic.ttf b/css/fonts/LobsterTwo/LobsterTwo-BoldItalic.ttf
new file mode 100644
index 0000000..3e1d45f
Binary files /dev/null and b/css/fonts/LobsterTwo/LobsterTwo-BoldItalic.ttf differ
diff --git a/css/fonts/LobsterTwo/LobsterTwo-Italic.ttf b/css/fonts/LobsterTwo/LobsterTwo-Italic.ttf
new file mode 100644
index 0000000..26c1df2
Binary files /dev/null and b/css/fonts/LobsterTwo/LobsterTwo-Italic.ttf differ
diff --git a/css/fonts/LobsterTwo/LobsterTwo-Regular.ttf b/css/fonts/LobsterTwo/LobsterTwo-Regular.ttf
new file mode 100644
index 0000000..9b092fa
Binary files /dev/null and b/css/fonts/LobsterTwo/LobsterTwo-Regular.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Black.ttf b/css/fonts/Roboto/Roboto-Black.ttf
new file mode 100644
index 0000000..0112e7d
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Black.ttf differ
diff --git a/css/fonts/Roboto/Roboto-BlackItalic.ttf b/css/fonts/Roboto/Roboto-BlackItalic.ttf
new file mode 100644
index 0000000..b2c6aca
Binary files /dev/null and b/css/fonts/Roboto/Roboto-BlackItalic.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Bold.ttf b/css/fonts/Roboto/Roboto-Bold.ttf
new file mode 100644
index 0000000..43da14d
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Bold.ttf differ
diff --git a/css/fonts/Roboto/Roboto-BoldItalic.ttf b/css/fonts/Roboto/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..bcfdab4
Binary files /dev/null and b/css/fonts/Roboto/Roboto-BoldItalic.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Italic.ttf b/css/fonts/Roboto/Roboto-Italic.ttf
new file mode 100644
index 0000000..1b5eaa3
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Italic.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Light.ttf b/css/fonts/Roboto/Roboto-Light.ttf
new file mode 100644
index 0000000..e7307e7
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Light.ttf differ
diff --git a/css/fonts/Roboto/Roboto-LightItalic.ttf b/css/fonts/Roboto/Roboto-LightItalic.ttf
new file mode 100644
index 0000000..2d277af
Binary files /dev/null and b/css/fonts/Roboto/Roboto-LightItalic.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Medium.ttf b/css/fonts/Roboto/Roboto-Medium.ttf
new file mode 100644
index 0000000..ac0f908
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Medium.ttf differ
diff --git a/css/fonts/Roboto/Roboto-MediumItalic.ttf b/css/fonts/Roboto/Roboto-MediumItalic.ttf
new file mode 100644
index 0000000..fc36a47
Binary files /dev/null and b/css/fonts/Roboto/Roboto-MediumItalic.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Regular.ttf b/css/fonts/Roboto/Roboto-Regular.ttf
new file mode 100644
index 0000000..ddf4bfa
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Regular.ttf differ
diff --git a/css/fonts/Roboto/Roboto-Thin.ttf b/css/fonts/Roboto/Roboto-Thin.ttf
new file mode 100644
index 0000000..2e0dee6
Binary files /dev/null and b/css/fonts/Roboto/Roboto-Thin.ttf differ
diff --git a/css/fonts/Roboto/Roboto-ThinItalic.ttf b/css/fonts/Roboto/Roboto-ThinItalic.ttf
new file mode 100644
index 0000000..084f9c0
Binary files /dev/null and b/css/fonts/Roboto/Roboto-ThinItalic.ttf differ
diff --git a/css/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf b/css/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf
new file mode 100644
index 0000000..c39aafb
Binary files /dev/null and b/css/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf differ
diff --git a/css/fonts/Roboto_Flex/static/RobotoFlex-Regular.ttf b/css/fonts/Roboto_Flex/static/RobotoFlex-Regular.ttf
new file mode 100644
index 0000000..f857ae9
Binary files /dev/null and b/css/fonts/Roboto_Flex/static/RobotoFlex-Regular.ttf differ
diff --git a/css/style.css b/css/style.css
index 7ed5ccb..b502d21 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1 +1,67 @@
 /* Style sheet */
+
+@font-face {
+  font-family: "Lobster";
+  src: url('fonts/Lobster/Lobster-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: "Roboto";
+  src:
+  url('fonts/Roboto/Roboto-Regular.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-Black.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-Bold.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-Light.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-Medium.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype'),
+  url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+}
+
+body.style-1 {
+  font-family: "Roboto";
+  width: 80%;
+  margin: auto;
+}
+
+h1 { font-family: "Lobster"; }
+
+p { color: #444; }
+
+a { text-decoration: none; }
+
+button {
+  margin: 4px 0px;
+  padding: 8px;
+  background-color: #3BAD5F;
+  color: #fff;
+  border-radius: 10px;
+  border: 0;
+  font-family: "Roboto";
+  font-size: 120%;
+}
+
+button:hover { box-shadow: 6px 6px; }
+
+.name {
+  font-size: 200%;
+  padding: 12px;
+  background-color: #eee;
+  border: thin #ededed;
+  display: block;
+  clear: both;
+  margin-bottom: 20px;
+  font-family: "Lobster";
+}
+
+.blue { color: blue; }
+.red { color: red; }
+.green { color: green; }
+.black { color: black; }
+
+.bold { font-weight: bold; }
+.italic { font-style: italic; }
+.small-caps { font-variant: small-caps; }
diff --git a/index.html b/index.html
index 2ac541c..1dba1b1 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 	<link rel="stylesheet" href="css/style.css">
 
 </head>
-  <body>
+  <body class="style-1">
   	<h1>Digital Empowerment</h1>
     <p>The purpose of these sessions is to show Chch South Karamata learners that they don't
       have to be mere riders in their digital journey - they can become drivers.</p>
@@ -22,14 +22,15 @@
     <div class='app1'>
       <p class='name'>Take charge!</p>
 			<div class='colors'>
-				<button onclick="changeColor('blue')">Change to blue</button>
-				<button onclick="changeColor('red')">Change to red</button>
-				<button onclick="changeColor('green')">Change to green</button>
+				<button onclick="changeColor('blue')">Change to <span class="blue">blue</span></button>
+				<button onclick="changeColor('red')">Change to <span class="red">red</span></button>
+				<button onclick="changeColor('green')">Change to <span class="green">green</span></button>
+				<button onclick="changeColor('black')">Change to <span class="black">black</span></button>
 			</div>
 			<div class='fonts'>
-				<button onclick="changeWeight()">Change to bold</button>
-				<button onclick="changeStyle()">Change to italics</button>
-				<button onclick="changeVariant()">Change to small capital letters</button>
+				<button onclick="changeWeight()">Change to <span class="bold">bold</span></button>
+				<button onclick="changeStyle()">Change to <span class="italic">italics</span></button>
+				<button onclick="changeVariant()">Change to <span class="small-caps">small capital letters</span></button>
 		  </div>
 			<script src="js/script.js"></script>
     </div>