.attempt-1 {
font-size: 1.5rem;
}
.attempt-1 em {
font-style: normal;
padding: 0.1em 0.3em;
border-radius: 0.2em;
position: relative;
background: white;
background: linear-gradient(to right, mediumturquoise, mediumpurple);
transform: skewX(-10deg);
display: inline-block;
}
.attempt-2 {
font-size: 1.5rem;
position: relative;
z-index: 0;
}
.attempt-2 em {
font-style: normal;
padding: 0.1em 0.3em;
position: relative;
display: inline-block;
}
.attempt-2 em::after {
content: "";
position: absolute;
background: white;
background: linear-gradient(to right, mediumturquoise, mediumpurple);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border-radius: 0.2em;
transform: skewX(-10deg);
}
.attempt-3 {
font-size: 1.5rem;
}
.attempt-3 em {
font-style: normal;
position: relative;
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0.1em 0.2em;
border-radius: 0.2em;
background: white;
background: linear-gradient(to right, mediumturquoise, mediumpurple);
transform: skewX(-10deg);
}
.attempt-4 {
font-size: 1.5rem;
}
.attempt-4 em {
display: inline-block;
font-style: normal;
padding: 0.1em 0.3em;
border-radius: 0.2em;
position: relative;
background: white;
background: linear-gradient(to right, mediumturquoise, mediumpurple);
transform: skewX(-10deg);
}
.attempt-4 em span {
display: inline-block;
transform: skewX(10deg);
}
.attempt-5 {
font-size: 1.5rem;
position: relative;
z-index: 0;
}
.attempt-5 em {
font-style: normal;
padding: 0.1em 0;
margin-left: 0.5em;
margin-right: 0.5em;
position: relative;
background: white;
background: linear-gradient(to right, mediumturquoise, mediumpurple);
display: inline-block;
}
.attempt-5 em::before, .attempt-5 em::after {
content: "";
border-radius: 0.2em;
background: white;
display: inline-block;
width: 1em;
transform: skewX(-10deg);
position: absolute;
z-index: -1;
}
.attempt-5 em::before {
top: 0;
bottom: 0;
left: -0.3em;
background: mediumturquoise;
}
.attempt-5 em::after {
top: 0;
bottom: 0;
right: -0.3em;
background: mediumpurple;
}
/* Setup CSS unrelated to core task. */
body {
background: #ccc;
background: linear-gradient(to right, #abd, #bce);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 300;
width: min(90vw, 600px);
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom: 5rem;
}
section {
background: rgba(255, 255, 255, 0.6);
padding: 2rem;
margin: 2rem auto;
border-radius: 0.3rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
h1,
h2 {
font-weight: 400;
}
.gray {
color: #666;
}
li {
margin-bottom: 0.5em;
}