Make images look better in iframes

Dynamically change width depending on viewport size

computer-science-blog/css/presentation-imports.css

@@ -3,11 +3,36 @@ html, body {
     background: transparent;
 }
 img {
-	width: 70%;
+	width: 50%;
 	box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
 	margin: 10px;
 	border-radius: 6px;
 }
+@media screen and (max-width: 1000px) {
+	img {
+		width: 60%;
+	}
+}
+@media screen and (max-width: 900px) {
+	img {
+		width: 70%;
+	}
+}
+@media screen and (max-width: 800px) {
+	img {
+		width: 80%;
+	}
+}
+@media screen and (max-width: 700px) {
+	img {
+		width: 90%;
+	}
+}
+@media screen and (max-width: 600px) {
+	img {
+		width: 100%;
+	}
+}
 
 /* revert changes made by Bootstrap */
 p {

computer-science-blog/css/presentation-imports.css~

@@ -0,0 +1,18 @@
+html, body {
+    font-family: 'Roboto';
+    background: transparent;
+}
+img {
+	width: 70%;
+	box-shadow: 3px 3px 6px 2px rgba(10,10,10,0.5);
+	margin: 10px;
+	border-radius: 6px;
+}
+
+/* revert changes made by Bootstrap */
+p {
+	margin: 0;
+}
+h1, h2, h3, .h1, .h2, .h3 {
+	margin-top: 0;
+}