ABCDEFGHIJKLMNOPQRSTUVWXYZAA
1
CategoryUseCSS snippetAdditional information
2
GeneralTarget only the desktop version of a riddle.desktopUse this class to target only the desktop version. If the Riddle is opened on a mobile device, any css assigned to this class will be ignored
3
Custom logoIncrease the size of your custom logo.custom-logo, .riddle-logo img {
max-width: 200px!important;
max-height: 200px!important;
}
4
Custom logoCenter your custom logo.custom-logo {
position:relative;
left:-50%;
float:right!important;
}		This is a bit tricky as you need to force overwrite the float: left; in our CSS.
5
Custom logoBigger custom logo:
first upload custom logo as normal
then find image URL in source code
replace in this CSS snippet		.footer {
background-image: url(/imageservice/q_80,f_auto,c_fit,w_400,h_20/v4jqylyer0jjgcsavtle);
background-repeat: no-repeat;
background-position: center left;
}

.custom-logo {
display: none;
}		You can see in action in this Riddle: https://www.riddle.com/view/152082.

There are 2 parameters in the URL for the image (width and height). You can change those - but please not beyond the dimensions of the original image.
6
Design optionsCustomize start button ONLY on title page - not 'next' or 'play again' buttons that use same class..riddle-frame[data-currentpageindex="0"] .start-btn {
margin-top: -100px!important;
border: 4px black solid!important;
}
Whenever you want to apply a change to only one slide of the riddle, use the data-currentpageindex

The first page of any Riddle (title slide) is index 0.

When you target stuff like the results, and then add or remove a question, you need to alter the css
7
Design optionsChange height of Epic layout riddlesrid-riddle.template-background .riddle-page .riddle-page-content {

height: 1300px !important;

}
Only for Epic layout:

Change the 1300px to any height you like. You can see the effect here: https://borispfeiffer.com/riddle/expertzone.html Using the unaltered standard embed code
8
Design optionsMove CTA call to action button below reaction poll.ctaWrapper {
margin-top: 300px;
}
9
Design optionsChange animation loading color.animate-load [class*=animate-icon-] {
color: #333333;
}
10
Design optionsAdd border, round corners, add padding to Start buttonrid-riddle.template-background .riddle-page .start-btn {
border: 4px white solid;
border-radius: 5px;
padding: 10px 40px;
}
11
Design optionsAdvanced customization of Epic layoutbody {
font-family: "aktiv-grotesk", sans-serif;
}

.fb-overlay {
background-color: white;
border: solid 2px black;
}

.fb-overlay a {
color: black;
}

h1 {
font-weight: 700;
font-style: normal;
font-size: 120%;
text-align: justify !important;
}

h2 {
font-weight: 300;
font-style: normal;
text-align: justify !important;
margin-bottom: 0 !important;
}

p {
text-align: left !important;
}

.footer {
visibility: hidden;
}

@media (max-width:1200px) {
h1 {
text-align: left !important;
}
}

@media (max-width:396px) {
h1 {
font-size: 100% !important;
}

h2 {
font-size: 80% !important;
}
}

.content-div {
background-color: #FFF !important;
color: #000 !important;
}

.key-color-bg, .btn {
background-color: #FFF !important;
color: #000 !important;
border: solid 2px black !important;
box-shadow: 0 6px 30px 0 rgba(0,0,0,.18);
border-radius: 0 !important;
opacity: 1 !important;
}

.key-color-bg:hover, .btn:hover {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
color: #fff !important;
}

p {
font-weight: normal;
line-height: 1.6;
color: #6d6d6d;
}

.pageProgressIndicator {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.pageProgressWrapper {
border-bottom: 1px solid black !important;
}

.choice {
background-color: #fff !important;
border: solid 2px black !important;
box-shadow: 0 6px 30px 0
rgba(0,0,0,.18) !important;
}

.choice:hover {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}


@media (max-width:481px) {
.riddle-page-header {
padding-left: 4px !important;
padding-right: 4px !important;
}

.riddle-page-content {
padding-left: 0 !important;
padding-right: 0 !important;
}

.riddle-page-content p, h1, h2 {
padding-left: 4px !important;
padding-right: 4px !important;
}
}

span.circle {
display: none !important;
}

div.choice-text {
margin-left: 4px !important;
}

.form-element-description {
display:none !important;
}

form input[type=text], form input[type=email], form input[type=search], form input[type=password] {
font-size: 1.1rem !important;
color: #000 !important;
border: none !important;
border-bottom: 1px solid #000 !important;
font-weight: 500 !important;
width: 100% !important;
display: block !important;
padding: 13.5px 8px !important;
background-color: #fff !important;
border-radius: 0 !important;
font-family: "aktiv-grotesk", sans-serif;
}

.btn-submit {
font-size: 1.2rem !important;
border: 0 !important;
width: auto !important;
min-width: 215px !important;
max-width: 100% !important;
font-weight: bold !important;
color: #fff !important;
background: #000 !important;
border: 2px solid #000 !important;
padding: 13px 28px 11px !important;
margin: 20px 0 20px !important;
text-decoration: none !important;
text-align: center !important;
box-sizing: border-box !important;
letter-spacing: .25px !important;
box-shadow: 0 6px 20px 0 rgba(0,0,0,.18) !important;
transition: border .2s ease-in-out,background .2s ease-in-out !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color:transparent !important;
}
::-moz-placeholder { /* Firefox 19+ */
color:transparent !important;
}
:-ms-input-placeholder { /* IE 10+ */
color:transparent !important;
}
:-moz-placeholder { /* Firefox 18- */
color:transparent !important;
}

.ql-size-large, .form-element-title {
font-size: 1rem !important;
color: black !important;
font-weight: bold !important;
}

.ql-size-large::after {
content: " *";
color: red;
}

input:focus, textarea:focus, .choice:focus, .choice.active:focus {
outline-color: black !important;
}

.result-score strong {
font-size: 100% !important;
}

.result-page .riddle-page-header {
background-color: #FFF !important;
}

.unrolled .riddle-page-header {
background-color: #f6f8f9 !important;
}

.chosen {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.correct {
background: #5AB87F !important;
background-color: #5AB87F !important;
}

.choices>.correct {
background: #FFF !important;
background-color: #FFF !important;
color: #000 !important;
font-weight: 400 !important;
}

.choices>.chosen {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.choice-text {
font-weight: 400 !important;
}

.explanation-content {
border: dashed 2px black !important;
}

.correct_circle_animation {
stroke: #838ac3 !important;
}

.icon-linkedin {
-webkit-filter: invert(100%);
filter: invert(100%);
}

.correct-icon, .wrong-icon {
color: white;
}

.correct-icon span, .wrong-icon span {
color: white;
font-weight: 900 !important;
text-transform: lowercase !important;
display: inline-block !important;
}

.correct-icon span:first-letter, .wrong-icon span:first-letter {
text-transform: uppercase !important;
}

rid-riddle.template-background .riddle-page.result-page>.btn-wrapper {
background-color: transparent !important;
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
color: black !important;
}
12
Design optionsEPIC layout: remove the overlay with custom CSS by adding this code to the custom CSS section:.content-div {

background-color: #FFF !important;

}
13
Design optionsGeneral demo CSS - square buttons, center, remove border, etc..riddle-frame {
border-radius: 0px;
border: 0px!important;
}


.riddle-frame .content-div .footer-content .start-btn {
width: 70%;
padding: 0px;
border-radius: 2px;
padding: 15px 0;
}

.riddle-frame .share-result .btn {
background-color: #07265D !important;
border-radius: 1px;
}
14
Design optionsMulti-poll - change text for individual poll question tabsbackground-color: #FFF !important;https://www.riddle.com/view/341340
15
Design optionsDemo CSS - add highlight to selected choices, remove border, etc. (works on Epic and all layouts)}
16
Design optionsReduce padding between footer and main text.footer {
height:150px;
padding-top: 0;
margin-top: -15px;
}		https://www.riddle.com/showcase/255882/personality
17
Design optionsIncrease size of the checkbox in lead forms.leadgen-new-form .form-group .checkbox .col-xs-1 {
width: 50px;
}
.leadgen-new-form .form-group .checkbox .col-xs-10 {
width: auto;
}
.leadgen-new-form .checkbox input[type="checkbox"] {
visibility: hidden;
width: 50px;
height: 50px;
}
.leadgen-new-form .checkbox input[type="checkbox"]::before {
width: 50px;
height: 50px;
border-radius: 15px;
border: 2px solid #000000;
background-color: #fff;
display: block;
visibility: visible;
content: "";
float: left;
margin-right: 5px;
}
.leadgen-new-form .checkbox input[type="checkbox"]:checked::before {
box-shadow: inset 0px 0px 0px 3px #fff;
background-color: #000000;
}
18
Design optionsChange vertical height of Epic layoutrid-riddle.template-background .riddle-page .riddle-page-content {
height: 90vh!important;
}
19
Design optionsResize custom in-quiz iFrame for mobile devices (they can adjust the break points at will). Use the .desktop class to style the Riddle for non mobile devices..iframe-view {
padding-top: 800px !important;
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {}
20
Design optionsMake polls 4 choices in a row.choice {
width: 23%;
float: left;
margin: 5px;
}

.text-choice:first-child {
margin-top: 5px;
}

but you have to play with width and margin to make it look good for that riddle
21
Design optionsMake lead form text (submit button) bigger.leadgen-new-form .btn {
font-size: 20px;}
22
Design optionsMake submit button bigger on lead form.form-builder .action-area .btn {
cursor: pointer;
width: 60%;
display: inline-block;
}
23
Design optionsAdd padding below Start button.start-btn {
margin-bottom: 20px;}
24
Design optionsCenter lead form fields - 60% width.leadgen-new-form .form-group {
padding-left: 20%;
padding-right: 20%;
}
body > rid-riddle > div.riddle-content.background > rid-embed-form > div > form > div.action-area.clearfix.text-center > div > div > button {
min-width: 250px;}
.leadgen-new-form .btn {
font-size: 20px;}
25
Design optionsChange color of correct color bar - in quiz.choice.correct .percentage-bar {
background: rgba(47, 58, 140,0.5)!important;}
.choice.correct {
color: #ffffff;
background: rgba(130, 47, 140,0.5)!important;
}
.choice.correct {
border-color: rgba(141, 87, 47,1);
26
Design optionsMove share buttons above play again button - and change sizerid-share-buttons { order: 1; }
rid-share-buttons .share-result { margin: -30px 0 30px 0 !important; }
.footer-content .start-btn { order: 2; }
.footer-content {
display: flex;
flex-direction: column;
}
27
Design optionsMove play again button below extended results in a personality testrid-personality {
display: flex;
flex-flow: column;
}

.result-page {
order: 2;
}
28
Design optionsChange color of description box (also color bar at top of Order It).description-wrapper {
background-color: #000000!important;}
29
Design optionsChange color of incorrect color bar - in quiz.choice.chosen:not(.correct) {
background-color: #555;
color: pink;
}		example: https://www.riddle.com/showcase/130064/quiz
30
Design optionschange the font color for answer explanation, if there are inline styles at work.description span,
.description em,
.description strong,
.description p {
color: #fff !important;
}		Very specifc for Sanoma who copied inline styles from Word https://www.riddle.com/view/130590
31
Design optionsChange opacity of audio clip progress bar.audio-player .rangewrap .progress
{
background-color: #171d20;
opacity: 0.9;
}
32
Design optionschange the font color for correct/wrong! text in quizzes.correct-icon span, .wrong-icon span {font-size: 45px;}
33
Design optionsChange color of 'wrong' icon.wrong-icon {

color: #ea9d9d;}

34
Design optionsChange background color of selected choices.choice {
background: #37474F!important;}
.choice-tint {
background: #c0c0c0;
}
35
Design optionsChange image answers to 100% across (1 column) instead of 2 across.image-choice {
width: 100%;
float: none;
}
36
Design optionsChange color of circle in modern layout - when selected.modern .choice.chosen .circle, .modern-compressed .choice.chosen .circle {
background-color: black;
}
37
Design optionsChange background color and also color of selected choice.choice {
background: red!important;}

.choice-tint {
background: blue;
}
38
Design optionsChange the color of the selected choice in a pollrid-riddle.template-background .riddle-page .choice .percentage-bar {
background-color: rgba(216,42,42,.5);
}
39
Design optionsReduce space between answers - and 'next' button.page-count {
padding: 0 0 10px 0;
margin-top: -40px;
width: 30px;
}
40
Design optionsChange the color of the share buttons.share-result a {
background-color: #fff !important;
color: #000!important
}		this creates a white circle and a black share icon
41
Design optionsChange color and opacity of timer barrid-timer > rid-timer-rect > div,
rid-timer > rid-timer-rect > div > div:nth-child(1) {
background-color: rgba(200,56,3,0.5) !important;
}		This number rgba(200,56,3,0.5) is the color of the timer bar - you can change to any RGBA color, and you can also change the .5 to any number from .01 to 1 (1% to 100% opacity), so the bar is more or less visible.
42
Design optionsChange color of timer circle#circle > g > circle {
fill: pink;
stroke: blue;
}
43
Design optionsChange background overlay of reaction poll. Please note - you won't see the reaction poll change color when mousing over (on hover state)..bg-tint {
background-color: rgba(0, 0, 0, 0) !important;
}
44
Design optionsMobile-friendly polls and quizzes@media only screen and (max-width: 480px) {

.image-choice {float: none; width: 100%; }
45
Design optionsReduce the vertical height of your quiz - reduces space between questions, answers, and buttons..footer-content.classic-quiz {
margin-top: -40px;
}
46
Design optionsMake logo bar white - and partially transparent (.5 = 50%).footer.theme-bg-strong.logo-custom {
background-color: rgba(255,255,255,0.5);
}

47
Design optionsOverlay title and question over image (semi-transparent background).title {
color: #ffffff;
text-align: center;
font-size: 150%;
line-height: 125%;
margin-bottom:0px;
margin-top: -80px;
background-color: rgba(50,50,50,0.5);
}		Useful if you want to overlay the title over your main quiz image.
48
Design optionsChange the 'continue' button in the 'In-quiz iFrame' - make it smaller and change the color.iframe-skip {
font-size: 0.5em!important;
padding: 1px!important;
margin: 1px!important;

}

.theme-light a, .theme-light a.btn-empty, .theme-light a.btn-empty:active, .theme-light a.btn-empty:focus, .theme-light a.btn-empty:hover, .theme-light a:active, .theme-light a:focus, .theme-light a:hover {
color: #f3f3f3!important;
}
49
Design optionsAwesome 'next' button animation.btn {
height: 48px;
width: 100% !important;
font-family: inherit;
font-weight: bold;
background-color: transparent !important;
cursor: pointer;
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 2em;
padding-right: 2em;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;

position: relative;
overflow: hidden;
outline: none;
z-index: 1;
font-size: rem(14px);
color: #0d3ffb !important;
border: 1px solid #0d3ffb !important;
border-radius: 0;
}

.btn:active,
.btn:focus,
.btn:hover {
transform: none !important;
color: #ffffff !important;
}

.btn:before {
content: '';
display: block;
position: absolute;
z-index: -1;

bottom: 0;
width: 20px;
height: 10px;
border-radius: 20px 20px 0 0;
left: 50%;
transform: translateX(-50%);
transition: transform 0.4s linear;
}

.btn:hover:before {
transform: scale(50);
background-color: #0d3ffb;
}
50
Design optionsClassic style only (quiz/personality test): move start button above title and descriptionrid-riddle[data-currentpageindex="0"] .content-div {
display: flex;
flex-flow: column;
}

rid-riddle[data-currentpageindex="0"] .title {
order: 2;
}

rid-riddle[data-currentpageindex="0"] .description {
order: 3;
}

rid-riddle[data-currentpageindex="0"] .footer-content {
order: 1;
margin-top: 0;
margin-bottom: 20px;
}
51
Design options(Pop quiz) Move headline and description above image on the first slide.riddle-frame[data-currentpageindex="0"] .content-div .title p { font-size: inherit; }

rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page {
display: flex;
flex-wrap: wrap;
}

rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div[class*=media] {
width: 100%;
order: 2;
}

rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div {
width: 100%;
}

rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div:last-child {
order: 3;
}
52
Design options(Personality test) Move headline and description above image on the first sliderid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page {
display: flex;
flex-wrap: wrap;
}

rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page .media-single {
width: 100%;
order: 2;
}
53
Design optionsChange color for hyperlinks.content-div a:link {
color: hotpink;
}
.content-div a:visited {
color: blue;
}
.content-div a:hover {
color: green;
}
.content-div a:active {
color: red;
}
54
Design optionsChange look/feel of answer buttons on only question 1 /*altering the selection button for the first question*/
.riddle-frame[data-currentpageindex="1"] .choice-overlay {
text-align: center;
background-color: #003174;
margin: 0 auto;
float: none;
width: 65%;
display: block;}
.riddle-frame[data-currentpageindex="1"] .choice {
background: none;
border: none;
}
.riddle-frame[data-currentpageindex="1"] .choice-overlay:hover {
background-color: #1486cd;
}
55
Design optionsMove play again and social share buttons below extended results in personality testrid-personality {
display: flex;
flex-flow: column;
}

.result-page {
order: 2;
}
56
Design optionsMove question explanation below "next" button.riddle-page.question-page {
display: flex;
flex-direction: column;
}

.content-div.modern-footer {
order: 2;
}

.content-div.modern-footer:last-child {
order: 1;
}		only works with the style "modern-compressed" in this form. Other styles need slightly altered CSS
57
Design optionsCenter question and title for multi-poll.poll2020-title, .poll2020-desc, .poll2020-selectText {
text-align: center;
}
58
Design optionsChange color of choice box when selected.choice.chosen{
color: #ffffff;
background: blue!important;
}		https://www.riddle.com/view/338537
59
Design optionsMove the start button up to a position below the lead image in our classic styles template
rid-riddle[data-currentpageindex="0"] .content-div {
display: flex;
flex-flow: column;
}

rid-riddle[data-currentpageindex="0"] .title {
order: 2;
}

rid-riddle[data-currentpageindex="0"] .description {
order: 3;
}

rid-riddle[data-currentpageindex="0"] .footer-content {
order: 1;
margin-top: 0;
margin-bottom: 10px;
}
60
Form customizationCenter and narrow lead generation fields.leadgen-new-form { max-width: 600px;
margin: 0 auto;}
61
Form customizationReduce vertical spacing between form fields.checkbox{
margin: -30px 0px 0px 0px!important;
}
62
Hide quiz elementsHide the 'play again' button.play-btn {
display:none!important;
}
63
Hide quiz elementsHide image attribution link.attribution {display:none!important;}
64
Hide quiz elementsHide the percentages / change colors - who selected each answer..percent-number {
display:none;
}

.choice.correct {
background: #E6E6E6;
color: black;

}

.choice.correct .percentage-bar {
background: #E6E6E6;
}
65
Hide quiz elementsHide quiz timer.media-flip .timer
{
display: none;
}
66
.audio-player .time {
display: none;}
67
Hide quiz elementsHide percentages in extended personality results (personality test)overviewTitlePercent {
display:none;}
68
Hide quiz elementsHide text and percentages in reaction polls.txt3.float-right.ng-binding {
display:none!important;
}
69
Hide quiz elementsHide %'s in extended results for personality tests.overviewTitlePercent {
display: none;}
70
Hide quiz elementsHide quiz score.result-score.txt2 {
display:none!important;
}
71
Hide quiz elementsHide the quiz score (e.g. "You got 1/5!")h1.result-score.txt2:first-of-type span{
display:none!important;
}
72
Hide quiz elementsHide total # of votes (reaction polls).result .txt3.float-right {
visibility: hidden;
}

.result .txt3.float-right .txt4 {
visibility: initial;
}
73
Hide quiz elementsHide description field in results.description {
display: none;
}
74
Hide page counter (1/X)Hide display of total questions in quiz.page-count {display:none!important};
75
Hide list item # (for particular item)Hide list item number (change index# to the particular item you want to hide).riddle-frame[data-currentpageindex="6"] .counter-item .page-number {
display: none;
}
76
Hide quiz elementsHide numbers in reaction poll slider (-3 to +3)0-
77
Hide quiz elementsHide the intermediate voting section for ranked polls.NEW RIDDLES post-Dec 15, 2019:

body > rid-riddle > div.riddle-content.ng-scope > rid-riddle-type > rid-rankedpoll > div:nth-child(3) { display: block; } .standard-image { margin-top: 25px; padding-top:25px; } .title { display:none; } .rankedpoll-text { display:none; } 		OLD RIDDLES that do not have the H2 tag applied automatically to the cards, use this:

body > rid-riddle > div.riddle-content.ng-scope > rid-riddle-type > rid-rankedpoll > div:nth-child(3) { display: block; } .standard-image { margin-top: 25px; padding-top:25px; } .title { display:none; } .rankedpoll-text { display:none; } .ridRankedPollVoter h2 { display: none; }
78
Hide quiz elementsHide the tile of your Riddle quiz result texth1.result-score.txt2.ng-scope {display:none!important;}
79
Hide quiz elementsHide the score text for your Riddle quiz.result-score {
display:none!important;}
80
Hide quiz elementsHide the % of people who voted.
Hide the left vertical color border - displayed by the user's choice.
Change color of the background for the correct answer option.
Hide the checkmark and oval for the correct answer.		.percent-number {
display: none;
}

.choice.chosen {
border: none;
}

.choice.correct,
.choice.chosen {
background-color: #00c3ff;
}

.choice-result h1 {
display: none;
}
81
Hide quiz elementsHide 'Correct' or 'Wrong' text - but keep icons visible.correct-icon span, .wrong-icon span {
display:none!important;
}
82
Text formattingUse custom font for different classesCustomer send .woff2 file to Riddle - we host.

We give a URL like this:
https://cdn.riddle.com/website/fonts/segui/segui.css

CSS needs to refer to the font family in the CSS in the above link:

.title {
font-family: "Segoe UI" !important;
text-align: center;
}

.body {
font-family: "Segoe UI";
}
83
Text formattingCustomize start button text message.riddle-frame[data-currentpageindex="0"] .start-btn .txt3 {
visibility:hidden;

}
.riddle-frame[data-currentpageindex="0"] .start-btn .txt3::after {
visibility: visible;
position: absolute;
top: 1;
left: 0;
width: 100%;
content: "custom message";
}
84
Text formattingMulti-poll: Customize submit button text message.poll2020-btn {

visibility: hidden;

position: relative;

}



.poll2020-btn:after {

visibility: visible;

position: absolute;

top: 0;

left: 0;

width: calc(100% - 30px);

padding: 10px 15px;

border-radius: 0;

border: none;

text-transform: uppercase;

background: rgba(0,76,84,1) !important;



content: "custom text here";

}
85
Text formattingMulti-poll: make list item text larger on desktop only@media screen and (min-width: 600px){
.list-text {
font-size: 14px!important;
color: blue!important;}
}		note: added color: blue to make the change more prominent, they can delete that. The Showcase on Riddle has a width of 666 px which is why a regular media query for 768px will not work
86
Text formattingTarget and change font in the first H1 in unrolled quizh1:first-of-type {
font-size:40px;
line-height: 120%;}		Similar CSS can be used to target the first of anything really :)
87
Text formattingTarget and change font in the descriptions in unrolled quizzes#questionDescription0 p{
font-size: 35px;
}		You can target any item's description: description0 is for the intro, description1 for the first question and so on.
88
Text formattingChange line spacing in the text..title {
line-height: 1.4em!important;
}

p {
line-height: 1.4em!important;
}
89
Text formattingChange color of selected hyperlinks in text.description a {
color: #FFDD00 !important;
font-weight:bold !important;
text-decoration: none !important;
}		Old version: a {
color: #FFDD00 !important;
font-weight:bold !important;
text-decoration: none !important;
}
90
Text formattingCenter result text - reaction polls.sentiment .result .txt3 {
width: 100%;
}
91
Text formattingChange all text in a Riddle*{
font-size: 50px;
}
92
Text formattingIncrease the size of text in 'description'..description {
font-size: 2em;
}
93
Text formattingChange the size of question text.txt2, h2 {
font-size: 20px;
}
94
Text formattingUse different text sizes for questions, answers, and titlesh1.title.txt2 { font-size: 50px; } .description *{ font-size: 12px; } .choice .txt2{ font-size: 16px; } .footer-content *{ font-size: 20px; }
95
Text formattingChange 'choose as many as you like' text for multiple choice quetsions.choice-cta {

visibility:hidden;}


.choice-cta::after {

visibility: visible;

position: absolute;

top: 1;

left: 0;

width: 100%;

padding-left:2.5%;

content: "You can pick as many as you like";

}
96
Text formattingChange font sizes on mobile devices only@media only screen and (max-width : 480px) {
h1.title.txt2 {
font-size: 50px;
}

.description *{
font-size: 16px;
}

.choice .txt2{
font-size: 16px;
}

.footer-content* {
font-size: 20px;
}
}
97
Text formattingChange the share text message.share-result h3 {
visibility: hidden;
position: relative;
}

.share-result h3::after{
text-align: center;
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
content:"new share message text here";}
.riddle-frame[data-currentpageindex="0"] .start-btn .txt3 { visibility:hidden; } .riddle-frame[data-currentpageindex="0"] .start-btn .txt3::after { visibility: visible;
98
Text formattingChange the text of an element (in this example it keeps the start button as 'start' but changes the others to 'continue' - for a survey - but might work on other types.).riddle-frame:not([data-currentpageindex='0']) .footer-content .start-btn span::after {
text-align: center;
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
content:'continue';
}

.riddle-frame:not([data-currentpageindex='0']) .footer-content .start-btn span {
visibility: hidden;
position: relative;
display: inline-block;
width: 100%;
}		content: "new start message";
99
Text formattingChange the headline above a question on a specific pagerid-riddle[data-currentpageindex="1"] .title {
color: red!important;}
100
Text formattingChange the text of an element (in this example it changes the text of the Poll Closed message.poll-closed .txt2 {
visibility: hidden;
position: relative;
}

.poll-closed .txt2::after {
text-align: center;
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Umfrage beendet.";
width: 100%;
}		}