style.css (2936B)
1 html { 2 overflow-y: scroll; 3 } 4 body { 5 background-color: #000084; 6 color: #bbb; 7 font-size: 1.0em; 8 line-height: 1.3; 9 font-family: monospace; 10 font-variant-ligatures: none; 11 margin: 0; 12 padding: 0; 13 } 14 /* HTML5 semantic tags: some (older) browsers display this inline by default */ 15 article, figcaption, figure, header, main, nav { 16 display: block; 17 } 18 article { 19 margin: 5px; 20 } 21 footer { 22 margin: 20px; 23 text-align: center; 24 } 25 table, img { 26 border: 0; 27 } 28 hr { 29 border: 0; 30 border-bottom: 3px solid #aaa; 31 height: 3px; 32 } 33 h1 { 34 text-align: center; 35 margin-top: 3em; 36 font-size: 100%; 37 font-weight: bold; 38 text-transform: uppercase; 39 color: #fff; 40 } 41 h2 { 42 text-transform: uppercase; 43 margin-top: 2em; 44 font-size: 100%; 45 font-weight: bold; 46 color: #fff; 47 } 48 h3 { 49 margin-top: 2em; 50 font-size: 100%; 51 font-weight: bold; 52 } 53 p { 54 /* text-align: justify; */ 55 /* text-justify: inter-word; */ 56 } 57 h1, 58 h1 a, 59 h1 a:visited, 60 h2, 61 h2 a, 62 h2 a:visited, 63 h3, 64 h3 a, 65 h3 a:visited, 66 h1 a:hover, 67 h2 a:hover, 68 h3 a:hover { 69 color: inherit; 70 text-decoration: none; 71 } 72 table tr td { 73 padding: 2px 10px 2px 0px; 74 } 75 pre { 76 margin: 0; 77 } 78 code { 79 color: #000; 80 background-color: #aaa; 81 border: 3px solid #aaa; 82 display: block; 83 overflow-x: auto; 84 padding: 5px; 85 word-wrap: normal; 86 } 87 li { 88 margin: 0.5em 0; 89 } 90 .welcome { 91 white-space: pre; 92 color: #5f5; 93 animation: color-change 5s infinite; 94 } 95 96 @keyframes color-change { 97 0% { color: #5f5; } 98 40% { color: #5f5; } 99 49% { color: #55f; } 100 50% { color: #f5f; } 101 90% { color: #f5f; } 102 100% { color: #55f; } 103 } 104 105 @media (prefers-reduced-motion: reduce) { 106 .welcome { 107 animation: none; 108 } 109 } 110 .btn { 111 display: incline-block; 112 text-align: center; 113 vertical-align: middle; 114 box-shadow: 5px 5px 0 #000; 115 border-radius: 4px; 116 background: #aaa; 117 color: #000; 118 padding: 2px 5px 2px 5px; 119 } 120 .btn:active, 121 .btn.active { 122 background-color: #aaa !important; 123 position: relative; 124 top: 2px; 125 left: 2px; 126 box-shadow: 3px 3px 0 #000; 127 } 128 .btn:hover, 129 .btn.hover { 130 /* background-color: #fff; */ 131 } 132 #title { 133 background-color: #707; 134 padding: 1ex 10px; 135 font-size: 1.0em; 136 line-height: 1.3; 137 font-family: monospace; 138 border-bottom: 0px solid #aaa; 139 width: 100%; 140 } 141 #menu { 142 background-color: #909; 143 width: 100%; 144 } 145 #menu td { 146 padding: 2px 10px 5px 5px; 147 line-height: 2.0; 148 /* padding: 1ex 10px 10px 1ex; */ 149 } 150 #menuwrap, 151 #menu, 152 #main { 153 margin: 0px auto; 154 max-width: 100ex; 155 } 156 #menu a { 157 font-weight: bold; 158 vertical-align: middle; 159 text-decoration: none; 160 } 161 #main { 162 border-top: 0px solid #aaa; 163 } 164 a { 165 color: #bbb; 166 } .hidden { 167 display: none; 168 } 169 .mediaframe { 170 max-width: 300px; 171 max-height: 200px; 172 border: 0; 173 } 174 video[poster] { 175 width: 100%; 176 height: 100%; 177 } 178 figure { 179 margin-top: 2em; 180 margin-bottom: 2em; 181 margin-left: 40px; 182 margin-right: 40px; 183 max-width: 80%; 184 } 185 .pagefigure { 186 text-align: center; 187 margin-left: auto; 188 margin-right: auto; 189 } 190 .pageimg { 191 border: 2px solid #aaa; 192 max-width: 100%; 193 } 194 .alignright { 195 text-align: right; 196 vertical-align: bottom; 197 }