box model visualization? lol

1 files changed, 35 insertions, 10 deletions

diff --git a/style.css b/style.css
index d795a28..b51cde7 100644
--- a/style.css
+++ b/style.css
@@ -2,9 +2,23 @@ body {
 	background-color: black;
 	color: white;
 	font-family: sans-serif;
-	width: 95%;
-	margin: auto;
-	line-height: 1.3;
+	margin: 3%;
+	line-height: 1.4;
+}
+body, div, p, h1, h2, h3, h4, h5, h6, ul, ol{
+	padding: 2px;
+}
+body:hover, div:hover, p:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover {
+	border: solid yellow 1px;
+}
+p:hover, li:hover {
+	color: yellow;
+}
+body:active, div:active, p:active, h1:active, h2:active, h3:active, h4:active, h5:active, h6:active, li:active {
+	border: solid lime 1px;
+}
+p:active, li:active {
+	color: lime;
 }
 h1 {
 	text-align: center;
@@ -33,25 +47,25 @@ a:link {
 	color: cyan;
 	text-decoration: none;
 	border: solid cyan 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:visited {
 	color: violet;
 	text-decoration: none;
 	border: solid violet 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:hover {
 	color: yellow;
 	text-decoration: none;
 	border: solid yellow 1px;
-	padding: 2px;
+	padding: 1px;
 }
 a:active {
 	color: lime;
 	text-decoration: none;
 	border: solid lime 1px;
-	padding: 2px;
+	padding: 1px;
 }
 #nav ul {
 	list-style-type: none;
@@ -69,12 +83,23 @@ a:active {
 #nav ul li a {
 	font-weight: bold;
 }
+@keyframes borderBlinkRed {	
+	0% {	
+		border-color: transparent;
+	}
+	50% {	
+		border-color: red;
+	}
+}	
 #campaign {
 	color: red;
-	font-size: 200%;
-	border: solid red 1px;
 	display: block;
-	padding: 2px;
+	border: 1px solid red;
+	animation-name: borderBlinkRed;
+	animation-duration: .2s;
+	animation-timing-function: step-end;
+	animation-iteration-count: 20;
+	animation-direction: alternate;
 }
 .alarm {
 	color: red;