/* Oefenen (sub/oefenen.php) wears the looks of Kennis (css/kennis.css, the page has both classes);
 here only what an exercise page has of its own: a few words above the exercise, the exercise over the width, and the way
 to its explanation in Kennis under it */
.oefenen .intro { max-width: 620px; margin: 0 0 18px; font-size: 1.05em; }
.oefenen taaltaal-exercise-clock { margin: 0; max-width: none; }
.oefenen a.read { display: inline-block; margin: 4px 0 0 4px; text-decoration: none; }
.oefenen a.read img { vertical-align: -1px; margin-right: 3px; }
.oefenen .cards .ico { width: 18px; height: 18px; vertical-align: -4px; margin-right: 7px; fill: transparent; stroke: currentColor;
                       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: #5b6f9a; }
/* the way to the explanation as a cheerful card of its own, an open book, a question and where to
 read ("link met uitleg wat vrolijker weergeven") */
.oefenen a.read { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 0; padding: 10px 16px 10px 12px; border-radius: 12px;
                  background: linear-gradient(120deg, #e8f6fd, #f3ecfb); border: 1px solid #cfe7f5; box-shadow: 0 2px 6px rgba(43, 63, 147, .1);
                  text-decoration: none; color: #2b3f93; }
.oefenen a.read:hover { box-shadow: 0 3px 9px rgba(43, 63, 147, .18); transform: translateY(-1px); }
.oefenen a.read .ico { flex: none; width: 34px; height: 34px; }
.oefenen a.read b { display: block; font-size: 1.05em; }
.oefenen a.read span { line-height: 1.35; color: #5b6f9a; }
/* more room between the way to the explanation and the teacher box, a colourful lightbulb instead of
 the blue book, Fleur a little lower and the words a little further from her ("marge tussen Hoe zat het ook alweer en blokje
 eronder groter; icoontje kleurrijker; Fleur 5-10 pixels naar beneden; marge Fleur naar Liever oefenen met 5-10px meer") */
.oefenen a.read + .teacher { margin-top: 44px; }
.oefenen a.read .ico { width: 36px; height: 36px; filter: drop-shadow(0 1px 1px rgba(150, 110, 0, .25)); }
.oefenen .teacher .fleur { top: 17px; }
.oefenen .teacher { padding-left: 124px; }
/* an exercise page. Top right in the row of the menu the same exercise in other languages, with
 flags; the way to all exercises with a grid instead of an arrow; Tijs, the clock of TaalTaal, telling the intro in a balloon
 with a button to hear it; and in the way to the explanation the name of Kennis in a colour of its own */
.oefenen { position: relative; }
.oefenen .elsewhere { position: absolute; right: 0; top: -38px; z-index: 2; display: flex; align-items: center; gap: 4px; font-size: 13px; color: #888; }
.oefenen .elsewhere span { margin-right: 2px; }
.oefenen .elsewhere a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid #dde3ee; border-radius: 12px;
                        background: #fff; color: #2b3f93; text-decoration: none; box-shadow: 0 1px 3px rgba(50, 50, 60, .15); }
.oefenen .elsewhere a:hover { background: #f3f6fb; }
.oefenen .navigation a.all .ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; fill: transparent; stroke: currentColor;
                                  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:is(.oefenen, .kennis) .tijs { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 20px; }
:is(.oefenen, .kennis) .tijs img { flex: none; width: 96px; height: auto; }
:is(.oefenen, .kennis) .tijs .balloon { position: relative; flex: 1; max-width: 560px; margin-bottom: 44px; padding: 12px 16px; border-radius: 16px;
                          background: #fff; border: 1px solid #dfe5f1; box-shadow: 0 3px 10px rgba(43, 63, 147, .12); }
:is(.oefenen, .kennis) .tijs .balloon::before { content: ""; position: absolute; left: -11px; bottom: 16px; width: 18px; height: 18px; background: #fff;
                                  border-left: 1px solid #dfe5f1; border-bottom: 1px solid #dfe5f1; transform: rotate(45deg); }
:is(.oefenen, .kennis) .tijs .balloon p { margin: 0; line-height: 1.45; }
:is(.oefenen, .kennis) .tijs .hear { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 13px 6px; border: 0; border-radius: 14px;
                       cursor: pointer; background: linear-gradient(#7189d8, #5068bd); color: #fff; font: inherit; font-size: 13px; font-weight: bold; }
:is(.oefenen, .kennis) .tijs .hear .ico { width: 16px; height: 16px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.oefenen a.read .kennis-name { font-style: normal; font-weight: bold; color: #c70765; }
.oefenen a.read u { text-decoration-color: rgba(43, 63, 147, .35); text-underline-offset: 2px; color: #2b3f93; }
@media (max-width: 600px) { .oefenen .elsewhere { position: static; flex-wrap: wrap; margin-bottom: 8px; } :is(.oefenen, .kennis) .tijs img { width: 70px; } }
/* the other languages in one pulldown, "Klok in andere talen", top right in the row of the menu; and
 Tijs higher, beside his balloon instead of under its tail ("zet hem alleen hoger naast de ballon") */
.oefenen .elsewhere { display: block; font-size: 13px; color: #2b3f93; }
.oefenen .elsewhere summary { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #dde3ee; border-radius: 12px; background: #fff;
                              cursor: pointer; list-style: none; box-shadow: 0 1px 3px rgba(50, 50, 60, .15); }
.oefenen .elsewhere summary::-webkit-details-marker { display: none; }
.oefenen .elsewhere summary::after { content: ""; margin-left: 2px; border-top: 5px solid #5b6f9a; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.oefenen .elsewhere[open] summary::after { transform: rotate(180deg); }
.oefenen .elsewhere summary .ico { width: 16px; height: 16px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oefenen .elsewhere .menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 100%; box-sizing: border-box; padding: 5px; border-radius: 10px;
                            background: #fff; box-shadow: 0 6px 18px rgba(43, 63, 147, .2); }
.oefenen .elsewhere .menu a { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; border-radius: 7px; box-shadow: none; white-space: nowrap; }
.oefenen .elsewhere .menu a:hover { background: #f3f6fb; }
:is(.oefenen, .kennis) .tijs { align-items: center; }
:is(.oefenen, .kennis) .tijs .balloon { margin-bottom: 0; }
:is(.oefenen, .kennis) .tijs .balloon::before { bottom: auto; top: 50%; margin-top: -9px; }
/* Mia's arm comes out of her side half way down: her balloon points higher, at her face */
:is(.oefenen, .kennis) .tijs:has(.mascot[aria-label="Mia"]) .balloon::before { top: 30%; }
/* (the mascot's balloon, .tijs, is also Bo's on /kennis, which loads this file for it: lib/helpers/MascotIntro.php)
   Tijs's balloon not quite white, a light gradient to the blue of TaalTaal; its point the colour of
 where it sits ("tekstballon van Tijs misschien lichte gradient geven of niet helemaal wit?") */
:is(.oefenen, .kennis) .tijs .balloon { background: linear-gradient(120deg, #ffffff 0%, #f4f7fd 55%, #e8eefb 100%); border-color: #d6dff0; }
:is(.oefenen, .kennis) .tijs .balloon::before { background: #f9fbfe; border-color: #d6dff0; }
/* the pulldown of the other languages at the end of the row of "Alle oefeningen", on the right ("Klok
 in andere talen moet op dezelfde lijn als Alle oefeningen") */
.oefenen .navigation { display: flex; align-items: center; flex-wrap: wrap; }
.oefenen .navigation .elsewhere { position: relative; top: auto; right: auto; margin: 0 0 8px auto; font-weight: normal; }
.oefenen .navigation .elsewhere .menu a { margin: 0; font-size: 13px; font-weight: normal; background: #fff; color: #2b3f93; }
.oefenen .navigation .elsewhere .menu a:hover { background: #f3f6fb; color: #2b3f93; }
/* the word Tijs is saying in magenta on a soft mark, the words he said in TaalTaal blue ("terwijl Tijs
 spreekt het uitgesproken woord van kleur verandert") */
:is(.oefenen, .kennis) .tijs .w { border-radius: 4px; transition: color .12s, background-color .12s; }
:is(.oefenen, .kennis) .tijs .w.now { color: #c70765; background: rgba(199, 7, 101, .09); box-shadow: 0 0 0 2px rgba(199, 7, 101, .09); }
:is(.oefenen, .kennis) .tijs .w.said { color: #2b3f93; }
@media (prefers-reduced-motion: reduce) { :is(.oefenen, .kennis) .tijs .w { transition: none; } }
/* Tijs talks: while he says a word his mouth opens and closes, by a CSS animation on the compositor;
 between the words and when he is done he smiles again */
:is(.oefenen, .kennis) .tijs .mascot { flex: none; width: 96px; height: auto; }
:is(.oefenen, .kennis) .tijs .mascot .mouth-open { transform-box: view-box; transform-origin: 60px 71px; }
:is(.oefenen, .kennis) .tijs .mascot.speaking .mouth-closed { display: none; }
:is(.oefenen, .kennis) .tijs .mascot.speaking .mouth-open { display: inline !important; }
@media (max-width: 600px) { :is(.oefenen, .kennis) .tijs .mascot { width: 70px; } }
/* the mouth calmer, about two times a second instead of three and a half ("de mond beweegt voor mijn
 gevoel te snel") */
/* and then not pulsing on a beat but following his voice: the page plays the loudness of the spoken
 text, measured beforehand every 50 ms (tijs-<language>.mouth.json), as one animation of the open mouth started with the sound
 ("het mondje pulseert de hele tijd, het beweegt niet mee met wat je bij een woord verwacht") */
/* the teacher box 3px closer to what is above it and 4px further from the grey footer ("marge tussen
 onderste fleur blokje en grijze footer 4 pixels groter; en marge boven 3px minder") */
.oefenen a.read + .teacher { margin-top: 41px; }
.oefenen .teacher { margin-bottom: 4px; }
/* the teacher box another 3px up and 3px more below ("marge boven fleur nog 3px minder, marge onder
 +3px") */
.oefenen a.read + .teacher { margin-top: 33px; }
.oefenen .teacher { margin-bottom: 7px; }
/* while Tijs talks his button stops him, magenta with a small square instead of the loudspeaker ("er
 moet een stop knop zijn bij Tijs") */
:is(.oefenen, .kennis) .tijs .hear.stop { background: linear-gradient(#ee3399, #cd1269); }
:is(.oefenen, .kennis) .tijs .hear.stop .ico { display: none; }
:is(.oefenen, .kennis) .tijs .hear.stop::before { content: ""; width: 10px; height: 10px; margin: 3px; border-radius: 2px; background: #fff; }     /* the room of the icon: the button keeps its height */
/* the top of an exercise of one piece with the rest ("het design in de h1 en All Exercises iets
 coherenter"): the heading with the coloured icon of the exercise, and the way to all exercises the same white pill as the
 other languages beside it, instead of the grey bold button of Kennis */
.oefenen h1.exercise { display: flex; align-items: center; gap: 12px; }
.oefenen h1.exercise .ico { flex: none; width: 34px; height: 34px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
                            stroke-linejoin: round; color: #5b6f9a; }
.oefenen .navigation { gap: 8px; margin-bottom: 14px; }
.oefenen .navigation a.all, .oefenen .navigation .elsewhere summary { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px;
        border: 1px solid #dde3ee; border-radius: 14px; background: #fff; color: #2b3f93; font-size: 13px; font-weight: bold; line-height: 18px;
        box-shadow: 0 1px 3px rgba(50, 50, 60, .15); text-decoration: none; }
.oefenen .navigation a.all:hover, .oefenen .navigation .elsewhere summary:hover { background: #f3f6fb; color: #2b3f93; }
.oefenen .navigation a.all .ico { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.oefenen .navigation .level { margin: 0; font-size: 12px; }
.oefenen .navigation .elsewhere { margin: 0 0 0 auto; }
/* a little more room between the parts at the top: heading, buttons, Tijs, the exercise ("iets meer
 marge tussen de blokken (h1 > All exercises > Tijs >...)") */
.oefenen h1.exercise { margin-bottom: 14px; }
.oefenen .navigation { margin-bottom: 22px; }
:is(.oefenen, .kennis) .tijs { margin-bottom: 23px; }
/* the heading under the floating menu buttons, not beside them: a flex box beside a float sits next
 to it (on a phone it was pushed to the right after LOCATIES: "de H1 helemaal tegen rechts gepropt, een float die niet goed
 is gegaan?"); the row of buttons the same */
.oefenen h1.exercise, .oefenen .navigation { clear: both; }
@media (max-width: 600px) { .oefenen h1.exercise { font-size: 26px; gap: 10px; } .oefenen h1.exercise .ico { width: 28px; height: 28px; } }
/* 6px more above the heading, 3px less between the clock and the first word ("6px meer marge boven tot
 de H1; 3px minder marge tussen het klok icoon en het woord Klok") */
.oefenen h1.exercise { margin-top: 6px; gap: 9px; }
@media (max-width: 600px) { .oefenen h1.exercise { gap: 7px; } }
/* the room above the heading as padding: a margin is eaten by the clearance under the floating menu
 buttons, so the 6px above did not show ("ik zie niet echt meer ruimte, doe nog 5 meer"): 11px in all */
.oefenen h1.exercise { margin-top: 0; padding-top: 11px; }
/* on a desktop 3px less above the heading than that, on a phone the 11px stay ("het gaat me om de
 mobiele versie, desktop stond al goed, daar moet nu 3px minder") */
@media (min-width: 601px) { .oefenen h1.exercise { padding-top: 8px; } }
/* on a desktop the heading 4px closer under the menu buttons, the room under it as it was ("de marge
 BOVEN de H1 tot HOME / CURSUSSEN, niet eronder; zet marge eronder terug") */
@media (min-width: 601px) { .oefenen h1.exercise { padding-top: 4px; } }
/* Delen and the other languages together at the end of the row of buttons */
.oefenen .navigation .row-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.oefenen .navigation .row-end .elsewhere { margin: 0; }
/* the flag in "Alle... oefeningen", with a hairline so white in a flag stays a flag */
.oefenen .navigation a.all .flag { display: block; width: 18px; height: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
/* the way to the explanation always 24px under its exercise, whatever the exercise ends with */
.oefenen taaltaal-exercise-clock, .oefenen taaltaal-exercise-prepositions { display: block; margin-bottom: 0; }
.oefenen a.read { margin-top: 24px; }
/* the level beside the buttons a little bigger: there is room for it */
.oefenen .navigation .level { font-size: 14px; padding: 3px 8px; border-radius: 6px; }
/* the top of the languages page close together: the title, the introduction and what comes under it, 1em at most */
.oefenen .head.root { margin-bottom: 1em; }
.oefenen .head.root p { margin: 4px 0 0; }
/* a language with only a few exercises: more are coming, and a wish is welcome; the whole box is the way to contact. It
   should not draw the eye away from the exercises: beige, small, and only as wide as what it says */
.oefenen a.soon { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; margin: 10px 0 0; padding: 6px 14px 6px 9px; border-radius: 9px;
                  background: #f6efe0; border: 1px solid #e4d9c2; box-shadow: 0 1px 2px rgba(90, 70, 30, .1);
                  text-decoration: none; color: #7c6f58; font-size: .9em; line-height: 1.35; }
.oefenen a.soon:hover { box-shadow: 0 2px 5px rgba(90, 70, 30, .18); transform: translateY(-1px); }
.oefenen a.soon .ico { flex: none; width: 24px; height: 24px; opacity: .75; }
.oefenen a.soon b { display: block; color: #62563f; }
.oefenen a.soon u { color: #62563f; text-decoration-color: rgba(98, 86, 63, .45); text-underline-offset: 2px; }
/* the teacher box on the page of a language: 20px to what is above, as nothing sticks out above it any more; 10px under it */
.oefenen .cards ~ .teacher { margin-top: 20px; margin-bottom: 10px; }
/* the page of all languages: no polaroid, the table over the whole width of its row */
.oefenen .row.wide { padding-left: 14px; }
.oefenen taaltaal-cast + .row.wide { margin-top: 44px; }     /* it falls together with the 34px under the panel */

/* a card: a simple picture left, its text right */
.oefenen .cards .body { display: flex; flex: 1; align-items: center; gap: 12px; padding: 10px 12px 12px; }
.oefenen .cards .body > span { padding: 0; }
.oefenen .cards .pic { flex: none; display: grid; place-items: center; width: 76px; height: 76px; }
.oefenen .cards .drawing { display: block; width: 76px; height: 76px; filter: drop-shadow(0 2px 2px rgba(40, 30, 10, .22)); }
/* the clock of the exercise, on the real time */
.oefenen .cards .face { display: block; width: 76px; height: 76px; filter: drop-shadow(0 2px 3px rgba(40, 30, 10, .28)); }
.oefenen .cards .face .tick { stroke: #9aa3b5; stroke-width: 1; }
.oefenen .cards .face .tick.big { stroke: #2b3f93; stroke-width: 2.5; stroke-linecap: round; }
.oefenen .cards .face text { font: bold 15px Arial, sans-serif; fill: #2b3f93; text-anchor: middle; }
.oefenen .cards .face .hand { stroke: #22304f; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; }
.oefenen .cards .face .hour { stroke-width: 7; }
.oefenen .cards .face .minute { stroke-width: 4.5; stroke: #2b3f93; }
.oefenen .cards .face .pin { fill: #c70765; stroke: #fff; stroke-width: 1.5; }
.oefenen .cards .face .grab { fill: transparent; }
/* what it practises: quiet, the gem carries the color */
.oefenen .recent td.topic { color: #5b6f9a; white-space: nowrap; }
.oefenen .gem { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.oefenen .g-verbs { --glig-tint: #3f7fdc; --glig-tint-edge: #1d3f86; }
.oefenen .g-sentence { --glig-tint: #e2a23a; --glig-tint-edge: #a8620f; }
.oefenen .g-words { --glig-tint: #1fa39b; --glig-tint-edge: #0b6f6b; }
.oefenen .g-use { --glig-tint: #d0639f; --glig-tint-edge: #8f2f6b; }
.oefenen .gems { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin: 0 0 6px; color: #5b6f9a; font-size: .85em; }
.oefenen .gems + .recent { margin-top: 0; }
/* on a phone the column of what it practises is not there (css/kennis.css), so neither is what its gems mean */
@media (max-width: 600px) { .oefenen .gems { display: none; } }

/* on top of the page of all languages: the exercises in a row to go through; the next card shows a little, so you see there is more */
.oefenen .strip { position: relative; margin: 0 0 44px; }
.oefenen .cards.quick { display: flex; gap: 10px; margin: -4px -4px 0; padding: 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 4px; scrollbar-width: none; }
.oefenen .cards.quick::-webkit-scrollbar { display: none; }
.oefenen .cards.quick li { flex: 0 0 31%; min-width: 0; scroll-snap-align: start; }
.oefenen .cards.quick .body { gap: 10px; padding: 8px 10px; }
.oefenen .cards.quick .pic, .oefenen .cards.quick .drawing, .oefenen .cards.quick .face { width: 56px; height: 56px; }
.oefenen .strip-go { position: absolute; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid #c8d3e6; border-radius: 50%; background: #fff; color: #2b3f93; box-shadow: 0 1px 4px rgba(40, 50, 90, .25); cursor: pointer; }
.oefenen .strip-go[hidden] { display: none; }
.oefenen .strip-go:hover { background: #e4f5fd; border-color: #73d2f7; }
.oefenen .strip-go.back { left: -10px; }
.oefenen .strip-go.on { right: -10px; }
.oefenen .strip-go .ico { width: 20px; height: 20px; fill: transparent; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .oefenen .cards.quick li { flex-basis: 72%; } .oefenen .strip-go { display: none; } }
.oefenen .to-panel { margin: 14px 0 0; }

/* the panel: the table, and under it the people, each with their face in a circle; no boxes, it is them you look at */
.oefenen .member { display: flex; gap: 20px; margin: 30px 0; scroll-margin-top: 12px; }
.oefenen .member .face { flex: none; width: 108px; height: 108px; box-sizing: border-box; border: 4px solid #fff; border-radius: 50%; overflow: hidden; background: #e4f5fd; box-shadow: 0 2px 7px rgba(40, 50, 90, .32); cursor: pointer; transition: box-shadow .15s; }
.oefenen .member .face:hover { box-shadow: 0 3px 11px rgba(40, 50, 90, .45); }
.oefenen .member .face svg { display: block; width: 100%; height: 100%; }
.oefenen .member .f-linda { background: #e5f3e5; }
.oefenen .member .f-carlos { background: #fdf3d0; }
.oefenen .member .f-mia { background: #fde7ef; }
.oefenen .member .f-tijs { background: #fdf3d0; }
.oefenen .member .f-ans { background: #e4e8f6; }
.oefenen .member .f-alex { background: #dff3f4; }
/* shut until the sound opens them (taaltaal-scene.js), as at the table */
.oefenen .member .mouth-open { display: inline !important; opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
.oefenen .member .story { flex: 1; min-width: 0; }
.oefenen .member .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.oefenen .member h2 { margin: 0; color: #2b3f93; font-size: 20px; }
.oefenen .member h2 small { margin-left: 6px; color: #5b6f9a; font-size: 14px; font-weight: normal; }
.oefenen .member p { margin: 0 0 8px; }
.oefenen .member .english { color: #5b6f9a; font-size: .92em; }
.oefenen .member .listen { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid #c8d3e6; border-radius: 999px; background: #fff; color: #2b3f93; font: inherit; font-size: 14px; cursor: pointer; }
.oefenen .member .listen:hover, .oefenen .member .listen.on { background: #e4f5fd; border-color: #73d2f7; }
.oefenen .member .ico { width: 16px; height: 16px; fill: transparent; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oefenen .member .does { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.oefenen .member .does span { color: #5b6f9a; font-size: 14px; }
.oefenen .member .go { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid #dde3ee; border-radius: 999px; background: #f3f6fb; color: #2b3f93; font-size: 14px; text-decoration: none; transition: box-shadow .15s, filter .15s; }
.oefenen .member .go:hover { box-shadow: 0 1px 5px rgba(40, 50, 90, .22); filter: saturate(1.5); }
.oefenen .member .go.a1 { background: #fdf3d0; border-color: rgba(239, 179, 31, .7); }
.oefenen .member .go.a2 { background: #e5f3e5; border-color: rgba(55, 150, 55, .6); }
.oefenen .member .go.b1 { background: #dff1fb; border-color: rgba(42, 154, 216, .6); }
.oefenen .member .go.b2 { background: #e4e8f6; border-color: rgba(27, 44, 122, .4); }
@media (max-width: 600px) { .oefenen .member { gap: 12px; } .oefenen .member .face { width: 64px; height: 64px; } .oefenen .member h2 small { display: block; margin: 0; } }