- .button {
- font-size: 2em;
- text-decoration: none;
- background-color: #eee;
- color: #333;
- padding: 3px 6px 3px 6px;
- border-top: 1px solid #ccc;
- border-right: 1px solid #333;
- border-bottom: 1px solid #333;
- border-left: 1px solid #ccc;
- margin: 0.5em;
+ #wearing a:hover {
+ text-decoration: underline;
+ }
+
+ #buttons {
+ position: absolute;
+ top: 85%;
+ right: 1em;
+ width: 12em;
+ border: 0.2em solid #4cc2d2;
+ padding: 0.25em 0;
+ border-radius: 1em;
+ background-color: #fff6c1;
+ box-shadow: 0 0 0 0.1em #fff6c1;
+ transition: transform 0.1s;
+ transform: scale(0);
+ -webkit-transition: -webkit-transform 0.1s;
+ -webkit-transform: scale(0);
+ }
+
+ #buttons.open {
+ transition: transform 0.3s;
+ transform: scale(1);
+ -webkit-transition: -webkit-transform 0.3s;
+ -webkit-transform: scale(1);
+ }
+
+ #buttons a {
+ display: inline-block;
+ font-size: 1.25em;
+ color: black;
+ margin: 0.25em 0.5em;
+ margin-left: 2em;
+ border-bottom: 0.075em solid #f45c0a;
+ white-space: nowrap;
+ }
+
+ #buttons a:hover {
+ color: #f45c0a;
+ }
+
+ #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; }