HTML cleanup

before new release

css/css.css

@@ -18,6 +18,7 @@ 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,5 +78,25 @@ div {
   font-size: 90%;
   color: #c7254e;
   background-color: #f9f2f4;
-  border-radius: 4px
+  border-radius: 4px;
+}
+
+.beware {
+  font-size: 150%;
+}
+
+.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%;
+  }
 }