#title { margin-bottom: 1cm; } #ast { color: #abc; } #entries { display: flex; flex-direction: column; justify-content: space-between; align-content: center; margin: 0 auto; width: 700px; } .entry { background-color: #012; border-radius: 1cm; width: 100%; margin-bottom: 1cm; } .entry > img { border-radius: 0.6cm; margin: 0.4cm; width: 30%; float: left; aspect-ratio: 1; } .entry > h1 { float: right; text-align: end; font-size: 50pt; margin: 0.4cm 0.8cm 0.4cm 0; max-width: calc(70% - 1.6cm); word-break: break-word; } .entry > h2 { float: right; font-size: 25pt; margin-right: 0.8cm; margin-bottom: 1cm; clear: right; display: flex; justify-content: space-around; width: calc(70% - 1.6cm); } .entry > h2 > span { position: relative; cursor: default; } .entry > h2 > span:nth-child(1):before { content: "D: "; } .entry > h2 > span:nth-child(2):before { content: "E: "; } .entry > h2 > span:nth-child(3):before { content: "F: "; } .entry > h2 > span:nth-child(4):before { content: "T: "; } .entry > h2 > span:after { position: absolute; font-size: 15pt; left: 50%; top: 50%; transform: translate(-50%, -180%); opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .entry > h2 > span:hover:after { opacity: 1; } .entry > h2 > span:nth-child(1):after { content: "Defuser"; } .entry > h2 > span:nth-child(2):after { content: "Expert"; } .entry > h2 > span:nth-child(3):after { content: "EFM"; } .entry > h2 > span:nth-child(4):after { content: "Technical"; } .entry > p { clear: right; text-align: left; margin: 0.3cm 0.4cm 0.4cm; text-indent: 1cm; padding-top: 0.5cm; } @media (max-width: 800px) { #entries { width: 100%; } .entry > h1 { font-size: 36pt; } .entry > h2 { /* width: calc(85% - 1.6cm); */ font-size: 16pt; margin-bottom: 0.4cm; } } .entry.needy { background: linear-gradient(90deg, #212, #012, #012, #212); } code { background-color: #234; border: 2px solid #012; border-radius: 1ex; padding: 0 0.4ex; } kbd { border: 2px solid #abc; border-left-width: 0; border-right-width: 0; border-radius: 0.4ex; background-color: #abc; color: #012; } kbd > kbd { border-left-width: 2px; border-right-width: 2px; border-color: #678; background-color: #def; } kbd:hover:has(kbd):not(:has(kbd:hover)) { background-color: #789; border-color: #789; } kbd:hover:has(kbd):not(:has(kbd:hover)) > kbd, kbd > kbd:hover { background-color: #abc; border-color: #345; } .b-entry { background-color: #012; border-radius: 1cm; width: 100%; margin-bottom: 1cm; } .b-entry > h1 { float: right; text-align: end; font-size: 50pt; margin: 0.4cm 0.8cm 0.4cm 0; word-break: break-word; } .b-entry > h2 { text-align: right; font-size: 25pt; margin: 0.4cm 0.8cm 0.4cm 0; } .b-entry > p { clear: right; text-align: left; margin: 0.3cm 0.4cm 0.4cm; text-indent: 1cm; padding-top: 0.5cm; } li > p { clear: right; text-align: left; margin: 0.3cm 0.4cm 0.4cm; padding-top: 0.5cm; } li > p:not(:first-child) { text-indent: 1cm; } @media (max-width: 800px) { #entries { width: 100%; } .b-entry > h1 { font-size: 36pt; } } .squish > li > p { padding-top: 0; margin-top: 0; margin-bottom: 0; } .sig-leader, .sig { display: inline-block; text-indent: 0 !important; } .sig-leader { float: left; } .sig { float: right; } .discord-mirror { margin: 3px; padding: 6px; border-radius: 0.6cm; background-color: #234; text-align: start; } .discord-mirror > h2 { float: right; text-align: end; font-size: 25pt; margin: 0.4cm 0.8cm 0.4cm 0; word-break: break-word; } .discord-mirror > h3 { text-align: right; font-size: 20pt; margin: 0.4cm 0.8cm 0.4cm 0; } .discord-mirror > p { clear: right; text-align: left; margin: 0.3cm 0.4cm 0.4cm; text-indent: 1cm; padding-top: 0.5cm; } .discord-mirror > ol > li { font-size: 24px; } .three-img { max-width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; --padding: 0.2cm; } .three-img > a { border-radius: 0.3cm; padding: var(--padding); padding-bottom: 0; display: block; } .three-img > a:first-child { max-width: calc(100% - 2 * var(--padding)); } .three-img > a:not(:first-child) { max-width: calc(50% - 2 * var(--padding)); } .three-img > a > img { border-radius: 0.3cm; max-width: 100%; height: auto; } @media (max-width: 800px) { .discord-mirror > h2 { font-size: 36pt; } .discord-mirror > h3 { margin-bottom: 0.4cm; } .three-img { --padding: 0.05cm; } }