@keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } * { outline: none; color: #ff9400; } body { font-size: 12px; background: #241c11 !important; } img { max-width: 100% !important; } /* header */ header { margin: 2rem 20% -2rem 20%; display: flex; } header * { color: #ff7e00 !important; font-size: 2rem !important; } /* nav */ nav { margin-left: 20%; margin-right: 20%; padding-top: 0.5rem; line-height: 2rem; } nav a { color: #705000 !important; padding-right: 12px; font-size: 1rem; font-weight: bold; } nav a:hover { color: #FFBE00 !important; } a.a-active { color: #FFBE00 !important; } /* main */ main { margin-top: 3rem; margin-left: 20%; margin-right: 20%; display: grid; grid-gap: 0.4rem; line-height: 1.5rem; } .title { color: #ff7e00; font-size: 18px; font-weight: bold; display: grid; } .content a { text-decoration: underline; } .post-list a { text-decoration: none; position: relative; color: #FFBE00 !important; padding-bottom: 10px; } .post-list a:after { content: ""; position: absolute; left: auto; transition: 0.4s; } .post-list a:hover:after { content: "_"; animation: blink 1s infinite; } /* .post-list a:before, .post-list a:before { content: "#"; color: #ff9400; position: absolute; left: -0.8em; font-weight: bold; } */ /* footer */ footer { font-weight: bold; color: #ffd300; font-size: 0.7rem; margin: 4rem 20% 4rem 20%; } @media screen and (max-width: 780px) { nav, header, footer, main { margin-left: 10%; margin-right: 10%; } }