.dark-mode-toggle { position: relative; display: inline-block; } .dark-mode-toggle input { opacity: 0; position: absolute; cursor: pointer; } .checkbox-label { background-color: #111; width: 53px; height: 9px; border-radius: 50px; position: relative; padding: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .checkbox-label .toggle-icon { z-index: 1; width: 35%; text-align: center; } .fa-moon { color: #f1c40f; position: absolute; right: 5px; } .fa-sun { color: #f39c12; position: absolute; left: 5px; } .checkbox-label .ball { background-color: #fff; width: 22px; height: 22px; position: absolute; left: 2px; top: 2px; border-radius: 50%; transition: transform 0.2s linear; z-index: 2; } .dark-mode-toggle input:checked + .checkbox-label .ball { transform: translateX(24px); } .dark-mode-toggle input:checked + .checkbox-label { background-color: #2c3e50; } @media(max-width:768px){ .checkbox-label { background-color: #111; width: 52px; height: 26px; border-radius: 50px; position: relative; padding: 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; overflow: hidden; } } .dark-mode { mix-blend-mode: difference; background-color: white; } .dark-mode media-item::part(media) { filter: invert(1) hue-rotate(357deg); } .dark-mode img { filter: blur(0px) invert(1) hue-rotate(357deg); } .dark-mode .dark-mode-toggle { filter: blur(0px) invert(1) hue-rotate(357deg); } .dark-mode img:hover { filter: blur(0px) invert(1) hue-rotate(357deg); } * { transition: 0.2s color ease-in-out, 0.2s background ease-in-out, 0.2s border ease-in-out; } [id="T0386292660"] a { text-decoration: none; } [id="T0386292660"] wrapper { width: 100%; margin: 0; position: relative; display: flex; justify-content: space-between; flex-wrap: nowrap; } body:not(.mobile) [id="T0386292660"] wrapper>* { max-height: calc(100vh - 7rem); overflow-y: scroll; } [id="T0386292660"] right { display: flex; flex-wrap: wrap; justify-content: space-evenly; width: 50%; border-left: 1px solid rgba(0, 0, 0, 0.47); } [id="T0386292660"] left { width: calc(50% - 1.5rem); } [id="T0386292660"] left .entry { position: relative; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.47); display: flex; justify-content: space-between; } [id="T0386292660"] .name, .year { margin: 0.5rem; } [id="T0386292660"] .page-layout { padding: 0rem; } [id="T0386292660"] .page-content { padding-right: 1.5rem; padding-left: 1.5rem; padding-bottom: 0rem; border-bottom-width: 1px; } [id="T0386292660"] col1, [id="T0386292660"] col2{ flex: 50%; max-width: 50%; padding: 0 0 1.5rem 1.5rem; } [id="T0386292660"] img { width: 100%; margin-top: 1.5rem; margin-bottom: 0; vertical-align: middle; } /* mobile */ body.mobile [id="T0386292660"] .page-content { padding: 0; border-width: 0; } body.mobile [id="T0386292660"] left { width: 100%; } body.mobile [id="T0386292660"] right { display: none; } body.mobile [id="T0386292660"] .entry { padding: 0 2.5rem; } .invert [id="T0386292660"] { background-color: black; color: white; } .invert [id="T0386292660"] .page-content, .invert [id="T0386292660"] right, .invert [id="T0386292660"] .entry { border-color: white; } .invert [id="T0386292660"] right img { opacity: 0.4; filter: blur(7px); } .invert > div.content.dark-mode [id="T0386292660"] right img { filter: invert(1) hue-rotate(357deg) !important; } [id="T0386292660"] right img.target{ opacity: 1; filter: blur(0px) ; } .invert [id="T0386292660"] .entry.target { color: black; background-color: white; } .invert [id="T0386292660"] .entry .name, .invert [id="T0386292660"] .entry .year { color: white; } .invert [id="T0386292660"] .entry.target .name, .invert [id="T0386292660"] .entry.target .year { color: black; } .invert .pinned-top.fixed, .invert .pinned-bottom.pinned, .invert .pages { background-color: black; color: white; } .invert nav a, .invert a.nav, .invert .footer, .invert a.header-text { color: white; } .invert .page-content { border-color: white; } .invert [id="I2935916074"] .page-content { border-bottom:1px solid #fff; }