+ #buttons a:hover:before {
+ position: absolute;
+ left: 0;
+ display: inline-block;
+ width: 1em;
+ margin-left: 0.6667em;
+ content: "▶";
+ color: #f45c0a;
+ }
+
+ #buttons a img {
+ vertical-align: middle;
+ width: 0.8em;
+ height: 0.65;
+ }
+
+ body {
+ background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+ min-height: 100%;
+ }
+
+ .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
+ .hour20, .hour21, .hour22, .hour23,
+ .spring .hour6, .autumn .hour6, .winter .hour6,
+ .spring .hour19, .autumn .hour19, .winter .hour19,
+ .winter .hour7, .winter .hour18 {
+ background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+ }
+
+ @media (max-width: 799px) {
+ html { font-size: 14px; }
+ }
+
+ @media (max-width: 639px) {
+ html { font-size: 12px; }
+ main { height: 12em; }
+ }
+
+ @media (max-width: 479px) {
+ main { height: 15em; }
+ }
+
+ dt {
+ border: #fafbe5 solid 0.1em;
+ border-radius: 1em;
+ padding-left: 2em;
+ background-color: #4ada48;
+ z-index: 1;
+ color: black;
+ padding: 0 1em;
+ display: inline-block;
+ }
+
+ dd {
+ border: 0.2em solid #ebd684;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 1em 3em 2em 2em;
+ color: white;
+ text-shadow: 1px 1px black;
+ padding: 1em;
+ margin-top: -0.75em;
+ margin-bottom: 1em;
+ }
+
+ dl {
+ width: 60%;
+ min-width: 250px;
+ max-width: 500px;
+ padding: 1em;
+ margin: auto;
+ }
+
+ .person {
+ color: #4ada48;
+ }
+
+ .nonperson {
+ color: #00b6cf;