Scope 1
Congue adipiscing suscipit praesent nam elit netus a feugiat dictum venenatis
@scope (.scope #card_container1) {
div {
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);
background: rgb(243 0 0 / 14%);
}
h2,p { color: red; }
h2 { font-size: 2em;}
p.code {
color: #666;
margin-bottom: 20px;
line-height: 1;
font-size: 1em;
}
p.text {
text-align: center;
}
code {
color: red;
background-color: #f9f2f4;
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);
}
}
Scope 2
Turpis ullamcorper finibus metus si phasellus ut venenatis cursus nunc sapien
@scope (.scope #card_container2) {
div {
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);
background: rgb(0 117 243 / 14%);
}
h2,p { color: blue; }
h2 { font-size: 1.5em;}
p.code {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
p.text {
text-align: left;
}
code {
color: blue;
background-color: rgb(0 117 243 / 14%);
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);
}
}
Scope 3
Torquent ligula sociosqu sapien praesent odio pharetra fusce laoreet libero
@scope (.scope #card_container3) {
div {
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);
background: rgb(0 243 28 / 14%);
}
h2,p { color: green; }
h2 { font-size: 1em;}
p.code {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
p.text {
text-align: right;
}
code {
color: green;
background-color: rgb(0 243 28 / 14%);
box-shadow: 0 8px 20px rgb(243 0 0 / 40%);;
}
}