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 {