.flex-container { display: flex;}.flex-item { border: 1px solid; border-radius: 0 .5em .5em; margin: .5em; padding: .5em; background: #ffebe6;}p.flex-item { font-weight: bold; text-align: center;}.flex-item:nth-of-type(2) { background: #fdfcf3;}.flex-item:nth-of-type(3) { background: #ebf5d7;}.flex-item:nth-of-type(4) { background: #e6f2f7;}.flex-item:nth-of-type(5) { background: hsla(277, 53%, 73%, 0.3);}/* Grundlayout für SELFHTML-Beispiele */body { margin: 1em auto; max-width: 60em; font-family: sans-serif; color: #333333;}h1 { font-size: 1.5rem; position: relative; padding-left: 3em;}h1:before { position: absolute; left: 0; content: ""; width: 2rem; border: thin solid transparent; aspect-ratio: 1/1; background: url("https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg") no-repeat; background-size: cover;}html { background: transparent!important; --blue: #337599; --green: #93b946; --red: #c82f04; --yellow: #dfac20; --lightblue: #d6e3eb; --lightgreen: #ebf5d7; --lightred: #ffebe6; --lightyellow: #f9eed2;}.hinweis { border-inline-start: thick solid var(--red); padding-inline-start: 1em;}kbd { background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0; border: thin solid #aaa; border-radius: 2px; box-shadow: 1px 2px 2px #ddd; font-family: inherit; font-size: 0.9em; padding: 0 0.5em;}