// ✨ Trying to implement a more dynamic effect on mode.com ✨.wrapper { h1.title(contentEditable=”true”) { span { span The EngineeringMix; br; span Blog; } } }@import url(‘https://fonts.googleapis.com/css2?family=Sawarabi+Mincho’);:root { –color-dark: #043F2E; –color-light: #C8F169; }$sm: 700px; $xsm: 400px;// 🌶 The hot sauce @mixin round-off { filter: url(“data:image/svg+xml;utf8,#round”);@media (max-width: $sm) { filter: url(“data:image/svg+xml;utf8,#round”); }@media (max-width: $xsm) { filter: url(“data:image/svg+xml;utf8,#round”); } }body { display: flex; min-height: 100vh; background: var(–color-dark); font-family: ‘Sawarabi Mincho’, serif; padding: 10vw; box-sizing: border-box; font-size: max(35px, 6.666vw); }.wrapper { max-width: 100%; margin: auto; display: flex; flex-direction: column; }.title { color: var(–color-dark); display: inline; margin: 0.15em 0; line-height: 1.15; text-align: center; outline: none; filter: drop-shadow(2em 0 var(–color-dark)) drop-shadow(-0.25em 0 var(–color-dark)) drop-shadow(0 .25em 0 var(–color-dark)) drop-shadow(0 -0.25em 0 var(–color-dark)); display: inline-block; margin-bottom: calc(-2em * 1.2); position: relative; z-index: 1;@media (max-width: $xsm) { text-align: left; margin-top: 0.45em; }> span { float: left; @include round-off();&:before, &:after { content: ”; display: table; clear: both; }> span { padding: 0.025em 0.25em; background: var(–color-light); box-decoration-break: clone; position: relative; z-index: 5;&:first-child { –float: left; } &:last-child { –float: right; }&:first-child, &:last-child { float: var(–float); padding: 0.15em 0.25em;&:after { content: ”; display: table; clear: both; }@media (max-width: $xsm) { –float: unset; padding: 0.025em 0.25em; &:after { content: none; } } }~ span { z-index: 4; ~ span { z-index: 3; ~ span { z-index: 2; } } } } } }.image { @include round-off(); max-width: 100%; width: min(8em, 100%); float: left; margin-left: 0;@media (max-width: $xsm) { order: -1; } }