#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; }