HTML cleanup

before new release

css/css.css

@@ -1,4 +1,4 @@
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
   font-family: 'Montserrat', sans-serif;
 }
 
@@ -11,13 +11,14 @@ dd {
 }
 
 dt {
-  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 img {
   display: block;
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
 .sample-image {
@@ -37,9 +38,6 @@ div {
 
 .btn {
   margin: 8px;
-}
-
-.btn {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
@@ -53,6 +51,7 @@ div {
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
+
 .btn:before {
   content: "💫";
   position: absolute;
@@ -67,6 +66,7 @@ div {
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
 }
+
 .btn:hover:before, .btn:focus:before, .btn:active:before {
   -webkit-transform: scale(1.3) translateZ(0);
   transform: scale(1.3) translateZ(0);
@@ -78,7 +78,7 @@ div {
   font-size: 90%;
   color: #c7254e;
   background-color: #f9f2f4;
-  border-radius: 4px
+  border-radius: 4px;
 }
 
 .beware {
@@ -88,3 +88,15 @@ div {
 .footnote {
   font-size: 90%;
 }
+
+@media only screen and (min-width: 576px) {
+  img {
+    max-width: 60%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  img {
+    width: 100%;
+  }
+}