/* Where the CertPrep+ mascot sits and how big he is. The mascot itself (drawing,
 * reactions, motion) is the shared opnF.sh mascot in assets/mascot.js and
 * assets/mascot.css, kept identical to the Career Path Finder's copies, so don't
 * edit those two. assets/mascot.svg is the static stand-in that shows until
 * mascot.js swaps the animated one in. Loaded by the app and the cert pages. */

/* He takes the cert's category colour (--odr-cert), else the site accent. */
.odr-mascot { --opnf-m-accent: var(--odr-cert, var(--accent, #ff6b1a)); flex-shrink: 0; width: 112px; padding-top: 4px; }
.odr-mascot > svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 700px) {
	.odr-mascot { width: 86px; }
}

/* Beside the headline on the cert list and the cert pages: 120px (64px on phones). */
.odr-mascot.odr-mascot-hello { position: relative; width: 120px; padding-top: 0; }
@media (max-width: 700px) {
	.odr-mascot.odr-mascot-hello { width: 64px; }
}