/*********** Start Reset ********************
*********************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/************** End Reset ********************
*********************************************/

/* *********Border Box Reset**************** */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}


/* *********End Border Box Reset**************** */


body {
	font-family: arial, sans-serif;
	color: #333;
	background-image: url('../images/felt_blue_01.jpg');
}

.clear {
	clear: both;
}

.clearfix {
  overflow: auto;
}

a {
	cursor: pointer;
}

#container {
	padding:0;
	margin:0;
	overflow: hidden;
	background-image: url('../images/felt_blue_01.jpg');
}

/*  HEADER STYLES  */
.headerContainer {
	width:100%;
	border-bottom:dashed 3px #fee6ba;
	background-image: url('../images/yarn01.png');
	margin-bottom: 5px;
	box-shadow: 0px 0px 0px 5px #613671, 2px 1px 6px 4px rgba(10, 10, 0, 1.0);
	position: relative;  /* 2026-07: with z-index, keeps the rex badge + hanging scarf */
	z-index: 20;         /* painting above the teal content area below */
}


.searchAndResults {
	width:100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: row;
	    -ms-flex-wrap: row;
	        flex-wrap: row;
	transition: -webkit-transform 10s ease-in-out;
	transition: transform 10s ease-in-out;
	transition: transform 10s ease-in-out, -webkit-transform 10s ease-in-out;
	margin: 0 auto;
	background-image: url('../images/felt_blue_01.jpg');

}

header, .searchContainer, .resultsContainer {
	margin: 0 auto;
	width:90%;
	max-width:1000px;
}


.outerSearchContainer, .outerResultsContainer {
	width: 100%;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	padding: 1em 3em;
	margin: 0 auto;
	background-image: url('../images/felt_blue_01.jpg');
}



.searchContainer {
	padding-top: 1em;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-wrap: nowrap;
	    -ms-flex-wrap: nowrap;
	        flex-wrap: nowrap;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	position: relative;
}

header {
	max-width: 800px;
	position: relative;
	padding-top: 1em;
}

.headerText {
	float:left;
	width:70%;
}

.headerImage {
	float: right;
	padding-top: 6px;
	height: auto;
	width: 9em;
	position: absolute;
	right:3%;
	top:4%;
	z-index: 10;

}



header h1{
	font-family: "click-clack", serif;
	font-style: normal;
	font-weight: 500;
	font-size: 3.5em;
	color: #fff;
	margin-bottom:0;
	margin-top: .2em;
}

header h2 {
	font-size: 2em;
	margin-top:.5em;
	margin-bottom: 1em;
	color: rgb(227,199,219);
}

.page-subheader{
	text-align: center;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.25;
	padding: 0 3% 0 3%;
	color: white;
  text-shadow: 0px 0px 3px rgba(99,59,139,1);
}

/*  SEARCH CONTAINER STYLES  */


.searchContainer h2 {
	font-size: 1.75em;
	line-height: 1.25;
	padding: .75em .5em .5em .5em;
}

.searchElements, .dinoImage {
	background-color: green;
	background-repeat: repeat-x;
	text-align: center;
	box-shadow: 1px 1px 1px #000;
	background-image: url('../images/felt_green_box_01.jpg');
	background-repeat: repeat;
	position:relative;
	background: url(../images/stitches_left_side.jpg) left top repeat-y,
		url(../images/stitches_right_side.jpg) right top repeat-y,
		url(../images/felt_green_box_01.jpg);
}



div.header-row {
	position: relative;
	background:
	url(../images/stitch_corner_purple.jpg) left top no-repeat,
	url(../images/stitch_corner_purple.jpg) right top no-repeat,
	url(../images/stitch_left_purple_02.jpg) left top repeat-y,
		url(../images/stitch_right_purple_02.jpg) right top repeat-y,
		url(../images/stich_purple_top_02.jpg) left top repeat-x,
		url(../images/purple_texture_banner.jpg) repeat;
		-webkit-box-shadow: inset 0px -2px 0px rgba(4, 52, 107, .5),
					inset 0 1.5px 1px rgba(255, 255, 255, .5);
		  box-shadow: inset 0px -2px 0px rgba(64, 52, 107, .5),
		      inset 0px 1.5px 1px rgba(255, 255, 255, .5);

	/*height: 56px;*/
}

.footer_row {
	background-image: url('../images/felt_stitch_green.jpg');
	background: url(../images/stitches_l_b_corner.jpg) left bottom no-repeat,
		url(../images/stitches_r_b_corner.jpg) right bottom no-repeat,
		url(../images/felt_stitch_green.jpg) left bottom repeat-x;
	height: 30px;
	position: absolute;
	bottom:0;
	width:100%;
}

.dino-image-holder {
	height: 100%;
}

.dinoImage {
	float:left;
	width:50%;
	max-width:361px;
	height: 543px;
	position: relative;
}


.feltDinoBox {
	width:85%;
	position: absolute;
	left:8%;
	bottom:27%;

}

.crafty_dino_group {
	z-index:500;
	position: absolute;
	width: 105%;
	left:-11px;
	bottom: calc(23% - 2px); /* 2026-07: nudged down 2px — purple sliver showed between dino bodies and the box border */

}

.searchWindow {
	color: #efdcc4;
	font-size: 2em;
	line-height: 2em;
}

.plus {
	width: 13%;
	padding: 8em .75em;
	float: left;
	margin-top:3em;
}

.plus img{
	height: auto;
	max-width: 100%;
}

.searchElements {
	float: left;
	width:45%;
	margin-bottom:2em;
}

.searchbuttons {
	width: 90%;
	margin: auto;
	padding-top:.5em;
}

li.searchButton {
	position:relative;
	z-index: 1;

}

li.searchButton a {
	display: inline-block;
	padding: .75em .25em;
	background-color:#0082b9;
	margin: 0.5em .25em .5em .85em; /* why do I need the .85em on left */
	width: 45%;
	border: solid 3px rgba(0,0,0, .1);
	border-radius: 5px;
	font-weight:500;
	font-size: 1em;
	text-decoration: none;
	color: white;
	letter-spacing:1.5px;
	float: left;
	box-sizing: border-box;
}



li.searchButton a {
	position: relative;
}

li.searchButton a:before, li.searchButton a:after {
	position: absolute;
	width: 52%;
	height: 32px;
	content: ' ';
	left: 5px;
	bottom: 1px;
	background: transparent;
	-webkit-transform: skew(-5deg) rotate(-5deg);
	transform: skew(-5deg) rotate(-5deg);
	box-shadow: 0px 6px 6px rgba(67, 114, 65, 1);
	z-index: -1;
}

li.searchButton a:after {
  -webkit-transform: rotate(3deg);
          transform: rotate(3deg);
  right: 2px;
  left: auto;
}


li.searchButton a:hover {
	cursor: pointer;
	background-color: #64368b;
}

.searchElements > form {
	clear: both;
	padding-bottom: 1.5em;
}

.searchElements > form > label {
	display: block;
	margin-bottom: .5em;
	font-size: 140%;
	color: #80598c;
	font-weight: 700;

}

#seachSubmitButton, #customSearch {
	font-size:1.3em;
	border-radius:7px;
	margin-bottom: 1em;
	padding: 6px;
}


#customSearch {
	width: 60%;
}

#seachSubmitButton {
	background: #64368b;
	color: white;
	padding: 6px 10px;
	margin-left:15px;
	cursor: pointer;
	border: none;
	-webkit-appearance: none;

}

#seachSubmitButton:hover {
	background: #0082b9;
	}

.random-search-word {
	font-size: 1.3em;
	display: inline-block;
	margin-top: 0;
	border-radius: 7px;
	margin-top: .75em;
	margin-bottom:1em;
	font-weight: 300;
	background: #fded92;
	color: #80598c;
	border: none;
	padding: .5em .1em;
	border: solid 2px #72af52;
	width: 90%;
	position: relative;
	z-index: 5;
}

.random-search-word:hover {
	cursor: pointer;
	background-color: #80598c;
	color: white;
}

.random-search-word em {
	font-weight: 700;
}


/*  RESULTS CONTAINER STYLES  */


.carousel {
	overflow-x: hidden;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

.results-header{
	padding-bottom: 1em;
}

h1.resultsHeader {
	font-size: 1.75em;
	color: darkblue;
	float: left;
	margin-right: .5em;
	display: inline-block;
}


h2.resultsSubHeaders {
	margin: 1.5em;
	float: right;
	display: inline-block;
	font-size: 1.15em;
	color: rgba(255,255,255, 0.7);
}

/*h2.resultsSubHeader em{
	font-weight: 700;
}*/


.post-it-header {
	display: inline-block;
	font-family: "chantal", san-serif;
	font-weight:500;
	color: black;
	background-color: #fbea87;
	padding: 10px;
	margin-right: 20px;
	margin-left: 20PX;
	padding-top:13px;
	margin-top:10px;
	/* position: absolute; */
	-webkit-transform: rotate(-3deg);
			transform: rotate(-3deg);
	box-shadow: 0px 1px 9px #333333;
}


.post-it-header::before {
	content: ' ';
	display: block;
	position: absolute;
	left: 100px;
	top: -13px;
	width: 61px;
	height: 22px;
	z-index: 2;
	background-color: rgba(243,245,228,0.4);
	border: 2px solid rgba(255,255,255,0.1);
	box-shadow: 0px 0px 1px #333;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(6deg);
	-o-transform: rotate(6deg);
}

.post-it-subheader{
	display: inline-block;
	color: white;
	margin-top: -5px;
}


.resultsContainer {
	width:90%;
	background-color: linen;
	position:relative;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;

	background-color: green;
	background-repeat: repeat-x;
	  box-shadow: 1px 1px 1px #000;
	  background-image: url('../images/felt_green_box_01.jpg');
	  background-repeat: repeat;
	  position:relative;
	  background: url(../images/stitches_left_side.jpg) left top repeat-y,
		url(../images/stitches_right_side.jpg) right top repeat-y,
		url(../images/felt_green_box_01.jpg);
transition: left 2s ease-in-out;
}



.resultsArea {
	margin:1%;
	margin-top:0;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-flow: row;
		-ms-flex-flow: row;
			flex-flow: row;
}

.output {
	padding: 1.5em 0 1.25em 0;/* this keeps container at 100% */
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	width: 100%;
	-webkit-justify-content: flex-start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;/* this keeps container at 100% */

}


.itemCell {
	width:31.3%;
	max-height:450px;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex: 1 0 auto;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
	margin-bottom: -1px;
	margin-right: -1px;
	text-align: center;
	
}

.itemHolder {
	width: 100%;
	padding: 1em;
	border: dashed 1.5px darkorange;
	background-color: seashell;
	height:320px;
}

.itemHolder .image {
padding-bottom: 10%;
width:80%;
margin: auto;

}

.itemHolder .image img {
	max-width:100%;
	height:100%;
	border-radius: 20px;
	background-color: white;
	padding: 5px;
	border: solid 1px purple;
	transition: background-color 1s;
}

.itemHolder .image img:hover {
	background-color: #633b8c;
}

.itemHolder .image a {
	cursor: pointer;
}


.itemHolder h3 {
	font-size: 1em;
	font-weight: 200;
	margin-bottom: .5em
}

.itemHolder h3 a {
	border: none;
	color: #0083bb;
	text-decoration: none;
/*	-webkit-transition: color .5s;
	transition: color .5s;	*/
}

.itemHolder  h3 a:hover {
	color: #633b8c;
	cursor: pointer;
}


/*No response message*/

.noResponseContainer {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 600;
	background-color: rgba(67,75,68, 0.9);
	display: none;
	position: absolute;
	display: none;
	overflow-x: hidden;
}

.noResponseContainer .noResponseMessage {
	width: 75%;
	max-width: 700px;
	display: block;
	background-color: #FFF;
	position: absolute;
	top: -200px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	font-size: 1.2em;
	line-height: 1.5;
	padding: 1.2em;
	text-align: center;
	border: solid .25em #8b70b1;
transition: top 1s;
	border-radius: 10px;
}

.noResponseMessage p {
	padding: 0;
	margin:0 0 1em 0;
}
.noResponseMessage p:last-child {
	margin-bottom:0;
}

.noResponseMessage em {
	font-weight: 700;
	color: #4d4d4d;
	text-transform: uppercase;
}

.noResponseMessage a {
	padding: .5em .7em;
	background-color: #633b8b;
	color:white;
	font-weight: normal;
	text-decoration: none;
	display: block;
	letter-spacing: 1px;
	cursor: pointer;
	border-radius: 10px;
}

.noResponseMessage a:hover {
	background-color: #0083ba;
	text-decoration: underline;
}

.noResponseMessage a span, .no-wrap {
	white-space: nowrap;
}

/*Arrows*/

.arrow {
	position: absolute;
	z-index: 100;
	height:80px;
	width:80px;
	transition: all .3s ease-in-out;
}

.leftArrow {
	left: -28px;
	top: 45%;
	display:none;
	-webkit-transform: rotate(7deg) scale(0.85, 0.85);
	transform: rotate(7deg) scale(0.85, 0.85);
	box-shadow: 0px 0px 9px #333333;
}

.rightArrow {
	right: -20px;
	top: 45%;
	display:none;
	-webkit-transform: rotate(-7deg) scale(0.85, 0.85);
		transform: rotate(-7deg) scale(0.85, 0.85);
	box-shadow: 0px 0px 9px #333333;
}


.leftArrow:hover, .rightArrow:hover {
	cursor: pointer;
	-webkit-transform: rotate(0deg) scale(1, 1);;
		transform: rotate(0deg) scale(1, 1);

}

/*Pagination Buttons*/

.navButtons {

}


.navButtons {
	text-align: center;
	height:80px;
}

.navButtonsList li {
	display: inline-block;
	margin: .50em .25em 1.5em 1em;
}

.navButtonsList li a {
	font-size: 1.5em;
	padding: .25em .75em;
	background-color: #64368b;
	color: white;
	text-decoration: none;
	cursor: pointer;
	border-radius: 7px;
	transition: background-color .25s ease-in-out;
}

.navButtonsList li a:hover {
	background-color: #0082b9;
}

.navButtonsList li.next {
	display:none;
}

.navButtonsList li.prev {
	display:none;
}
/*************************************************/
/* ***********  Stego Push area **************** */
/*************************************************/
div.stegoPush {
	background: #aecaca;
	margin: 0;
	padding: 0;
	border-left: 2px solid black;
	border-right: 2px solid black;
	width:45%;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	position: relative;
	overflow-x: hidden;


}


canvas {

}

.flip {
position: absolute;
right:0;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
-webkit-filter: FlipH;
        filter: FlipH;
}


@-webkit-keyframes play-forward{
   100% { background-position: -3000px; }
}


@keyframes play-forward{
   100% { background-position: -3000px; }
}

@-webkit-keyframes play-backward{
   100% { background-position: 3000px; }
}

@keyframes play-backward{
   100% { background-position: 3000px; }
}

.hide {
	display:none;
}



/**/

.dinos_container {
	position: absolute;
	top: 0;
}

.dinos_container svg {
		position: absolute;
		top:0;
		left:0;
		width:101%;

}

/* ******* Triceratops *************** */

.tri_container {
		position: absolute;
		top:196px;
		width: 248px;
		z-index:500;
	}


#rt_eyelid {
	-webkit-transform: translateY(-77%);
	        transform: translateY(-77%);
}

#rb_eyelid {
	-webkit-transform: translateY(61%);
	        transform: translateY(61%);
}


#lt_eyelid {
	-webkit-transform: translateY(-89%);
	        transform: translateY(-89%);
}

#lb_eyelid {
	-webkit-transform: translateY(53%);
	        transform: translateY(53%);
}



/* ******* Raptor *************** */


div.raptor_container {
		position: absolute;
		top:217px;
		left: 216px;
		width: 203px;
		z-index:501;
}



/*.pupil, .rapt-highlight {
	transform: translateX(0px);
}*/

#eyelid_tl {
	-webkit-transform: translateY(-68%);
	        transform: translateY(-68%);
}

#eyelid_bl {
	-webkit-transform: translateY(44%);
	        transform: translateY(44%);
}

#eyelid_tr {
	-webkit-transform: translateY(-67%);
	        transform: translateY(-67%);
}

#eyelid_br {
	-webkit-transform: translateY(41%);
	        transform: translateY(41%);
}


/* ******* PTERO *************** */

.ptero_container {
		position: absolute;
		top:80px;
		left: 32px;
		width: 371px;
		z-index:499;
}


#pterodactyl {

}

/* ==========================================================================
   Media Queries
========================================================================== */


/**** < 1130 *** */
@media only screen and (max-width: 1130px) {

/*.outerResultsContainer */
.outerSearchContainer {
	 padding: 1em 0;
	}

}


/**** < 1080 *** */
@media only screen and (max-width: 1080px) {


	header {
	max-width: 700px;
	}

	.headerImage {
	padding-top: 6px;
	}

	header img {
		width: 7em;
	}

	header h1{
		font-size: 3.25em;
	}

	div.dinoImage, div.plus {
		display: none;
	}

	.searchElements {
	float: none;
	width:90%;
	height: 570px;
	}

	.ptero_container {
		display: none;
	}

	div.raptor_container {
		position:absolute;
		top:384px;
		left: 35px;
		width: 241px;
	}

	div.tri_container {
		position: absolute;
		top:390px;
		right:44px;
		width: 254px;
		z-index: 700000;
	}

	.dinos_container {
	position: absolute;
	top: 0;
	left:50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 50;
	width: 90%;
	height:1%;
	}


	li.searchButton a {
		width: 30%
	}

  .random-search-word {
		margin-top: .5em;
		margin-bottom:1em;
		padding: .6em .1em;
		width: 61%;
	}

	.searchElements > form {
	    padding-bottom: 2em;
	    padding-top: 1em;
	}


	#seachSubmitButton {
    display: block;
    margin: auto;
		padding:10px 25px 12px 25px;
		font-size: 1.6em;
	}

	input#customSearch {
    width: 35%;
	}

	.outerResultsContainer {
		padding:1em 0;
	}


}



/**** < 915 *** */
@media only screen and (max-width: 915px) {


	div.tri_container {
		display:none;
	}

	form#dinoForm {
	    text-align: right;
	    margin-right: 10%;
	}


	.searchElements > form > label {
		padding-bottom:8px;
	}

	input#customSearch {
    width: 50%;
    padding-top: 10px;
    padding-bottom:10px;

	}

	#seachSubmitButton {
    margin: 0 0 0 50%;
    width: 50%;
    }

    .results-header {
    	text-align: center;
    }

    h1.resultsHeader {
    	float: none;
    	display: block;
    }

    .post-it-header {
    	margin-right: .25em;
    }

    h2.resultsSubHeaders {
    	clear: left;
    	display: block;
    	float: none;
    	margin-top: .5em;
    	margin-bottom: 0;
    }
	

}

/**** < 850 *** */
@media only screen and (max-width:850px) {

	.itemCell {
		width: 50%;
	}


}


/**** < 760 *** */
@media only screen and (max-width:760px) {

		li.searchButton a {
			width: 46%
		}


		.searchElements > form {
		    padding-bottom: 65px;
		}


		.searchElements {
			height:790px;
		}

			li.searchButton a {
			font-size: 1.25em;
			padding: .75em 0;
	    width: 45%;
		}

		.random-search-word {
			margin-top: .75em;
			margin-bottom:.5em;
			padding: .6em .1em;
			width: 90%;
		}

		.searchElements > form > label {
			padding-left: 0;
		}

		div.raptor_container {
			top: 603px;
			left: 14px;
		}

		.resultsContainer {
		width: 90%;
	}

}


/**** < 630 *** */
@media only screen and (max-width:630px) {

	.searchContainer, .resultsContainer  {
		width: 100%;
	}

}

/**** < 560 *** */
@media only screen and (max-width:560px) {

	.searchElements{
		width:100%;
	}

	div.raptor_container {
		display: none;

	}

	div.tri_container {
		display:block;
		top:102px;
		right:8px;
		width:200px
	}

	h2.searchWindow {
		font-size: 3em;
	}

	li.searchButton a, 	.random-search-word {
			width: 90%;
			padding: .6em;
			font-size: 1.25em;
			float: none;
			margin:0;
			margin-top:1em;
		}

	.random-search-word {
		font-size: 1.5em;
	}	

	.searchElements  {
		height: 100%;
		margin-top: 15em;
	}



	li.searchButton a:before, li.searchButton a:after {
		width: 0;
		height:0;
		left: 0;
		bottom: 0;
		-webkit-transform: none;
		        transform: none;
	}

	form#dinoForm {
		text-align: center;
		margin-right:0
	}

	input#customSearch {
    width: 80%;
	}

	#seachSubmitButton {
     width: 80%;
     margin:auto;
  }

  .searchElements > form > label {
		font-size: 2em;
	}
}

/**** < 500 *** */
@media only screen and (max-width:500px) {

		.itemCell {
			width: 100%;
			max-height: none;
		}

		.itemHolder .image {
			padding: 5% 0 5% 0;
		}

		.itemHolder .image img {
		    width: 100%;
		}

		.itemHolder {
    height: auto;
    padding: .5em;
   } 

	.itemHolder h3 {
		line-height: 1.20;
		padding: 0 .25em;
	}

	.itemHolder h3, .itemHolder p {
		font-size: 1.5em;
	}

	.itemHolder p {
		margin: .25em 0 .75em 0;
	}


}

/* ==================================================================
   DINO ANIMATIONS — restored 2026-07 from Doug's CodePens
     knitting rex:              codepen.io/dougdworkin/pen/YrXWNP
     Ralph / Cheri / Terri:     codepen.io/dougdworkin/pen/MEabPJ

   THE PIVOT FIX: browsers changed how transform-origin percentages
   resolve on SVG elements since these were written.
   `transform-box: fill-box` restores the original behavior (pivot
   relative to each animated part); without it heads/legs/jaws
   rotate around far-away points and drift apart.

   The three dinos are ONE grouped SVG (from the pen) living in
   .crafty_dino_group inside the felt "dinosaurs" box — so the pen's
   selectors and pixel values apply exactly as authored. Selectors
   are scoped to .crafty_dino_group / .headerImage to avoid clashes
   with ids that repeat in other inline SVGs on the page.

   2026-07 update: the header rex is now the pen-YrXWNP version
   (taller canvas so the scarf hangs, yarn strings, second right
   hand for the knitting trick) — scarf glitch resolved.
   ================================================================== */

/* the grouped dinos fill the felt-box window */
.crafty_dino_group svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- pivot fix on every rotating part ---- */
.headerImage #r_x5F_hand,
.headerImage #r_x5F_hand_02,
.headerImage #l_x5F_hand,
.crafty_dino_group #head_1_,
.crafty_dino_group g#head,
.crafty_dino_group g#r_leg,
.crafty_dino_group g#l_x5F_leg,
.crafty_dino_group g#jaw_1_ {
	transform-box: fill-box;
}

/* ================= KNITTING REX (hover the header badge) ========= */
.headerImage #r_x5F_hand,
.headerImage #r_x5F_hand_02 { transform-origin: 62% 62%; }
.headerImage #l_x5F_hand    { transform-origin: 38% 67%; }

/* yarn strings: drawn with dash-offset (animation off in the pen too) */
.headerImage #l_x5F_string {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.headerImage #r_x5F_string {
	stroke-dasharray: 175;
	stroke-dashoffset: 175;
}

.headerImage:hover #l_x5F_eye,
.headerImage:hover #r_x5F_eye  { animation: eyeMove 1s infinite; }
.headerImage:hover #r_x5F_hand { animation: rightKnit 1.25s .2s infinite; }
.headerImage:hover #r_x5F_hand_02 { animation: rightKnit02 2.5s .2s infinite; }
.headerImage:hover #l_x5F_hand { animation: leftKnit 1.25s infinite; }
.headerImage:hover #scarf      { animation: scarftKnit 10s infinite; }
.headerImage:hover #top_x5F_scarf { animation: scarfLine 1.25s infinite; }

/* string animations — commented out in the pen as well
.headerImage:hover #l_x5F_string { animation: leftString 1.5s 1s forwards infinite; }
.headerImage:hover #r_x5F_string { animation: rightString 1s -1s forwards infinite; }
*/

@keyframes leftString {
	0%   {stroke-dashoffset: 210;}
	50%  {stroke-dashoffset: 100;}
	100% {stroke-dashoffset: 210;}
}

@keyframes rightString {
	0%   {stroke-dashoffset: 350;}
	40%  {stroke-dashoffset: 175;}
	100% {stroke-dashoffset: 350;}
}

@keyframes rightKnit02 {
	0%   {transform: rotate(0deg);   visibility: hidden;}
	25%  {transform: rotate(-70deg); visibility: hidden;}
	50%  {transform: rotate(0deg);   visibility: visible;}
	51%  {visibility: hidden;}
	75%  {transform: rotate(-70deg); visibility: hidden;}
	100% {transform: rotate(0deg);   visibility: visible;} /* pen had typo 'visisble' — fixed */
}

@keyframes scarfLine {
	0%   {transform: translateY(0px);}
	90%  {transform: translate(5.75px, 20px);}
	100% {transform: translateY(0px);}
}

@keyframes rightKnit {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(-70deg);}
	100% {transform: rotate(0deg);}
}

@keyframes leftKnit {
	0%   {transform: rotate(0deg);}
	50%  {transform: rotate(50deg);}
	100% {transform: rotate(0deg);}
}

@keyframes scarftKnit {
	0%   {transform: translateY(0px);}
	98%  {transform: translateY(80px);}
	100% {transform: translateY(0px);}
}

@keyframes eyeMove {
	0%   {transform: translateX(0);}
	50%  {transform: translateX(5px);}
	100% {transform: translateX(0);}
}

/* ====== RALPH / CHERI / TERRI (pen CSS, scoped, values verbatim) == */

/* ralph head */
.crafty_dino_group #head_1_ {
	transform-origin: 23% 68%;
	animation: ralph-head-bob 7s 1.5s infinite;
}

/* Cheri head */
.crafty_dino_group g#head {
	transform-origin: 60% 60%;
	animation: cherri-head-bob 7s infinite;
}

/* Cheri legs */
.crafty_dino_group g#r_leg {
	transform-origin: 86% 22%;
	animation: cherri-right_leg 7s infinite;
}

.crafty_dino_group g#l_x5F_leg {
	transform-origin: 100% 5%;
	animation: cherri-left_leg 7s .5s infinite;
}

/* Cheri blink */
.crafty_dino_group #rt_x5F_eyelid,
.crafty_dino_group #lt_x5F_eyelid {
	animation: cherri-blink-top 5s infinite;
}

.crafty_dino_group #rb_x5F_eyelid,
.crafty_dino_group #lb_x5F_eyelid {
	animation: cherri-blink-bottom 5s infinite;
}

/* Terri blink */
.crafty_dino_group path#rt_x5F_eyelid_1_ {
	animation: terri-blink-top-right 5s .75s infinite;
}

.crafty_dino_group path#lt_x5F_eyelid_1_ {
	animation: terri-blink-top-left 5s .75s infinite;
}

.crafty_dino_group #lb_x5F_eyelid_1_,
.crafty_dino_group #rb_x5F_eyelid_1_ {
	animation: terri-blink-bottom 5s .75s infinite;
}

/* Terri jaw */
.crafty_dino_group g#jaw_1_ {
	transform-origin: 19% 61%;
	animation: terri-jaw 15s infinite;
}

/* Ralph blink */
.crafty_dino_group #eyelid_x5F_tr,
.crafty_dino_group #eyelid_x5F_tl {
	animation: ralph-blink-top 5s 1.5s infinite;
}

.crafty_dino_group #eyelid_x5F_bl,
.crafty_dino_group #eyelid_x5F_br {
	animation: ralph-blink-bottom 5s 1.5s infinite;
}

/* Cheri blink animations */
@keyframes cherri-blink-top {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(36px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

@keyframes cherri-blink-bottom {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(-33px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

/* Cheri head animations */
@keyframes cherri-head-bob {
	10%  {transform: rotate(0);}
	15%  {transform: rotate(5deg);}
	20%  {transform: rotate(-3deg);}
	25%  {transform: rotate(5deg);}
	30%  {transform: rotate(-3deg);}
	35%  {transform: rotate(0);}
	100% {transform: rotate(0);}
}

/* Cheri leg animations */
@keyframes cherri-right_leg {
	10%  {transform: rotate(0);}
	15%  {transform: rotate(10deg);}
	20%  {transform: rotate(-7deg);}
	25%  {transform: rotate(10deg);}
	30%  {transform: rotate(-7deg);}
	35%  {transform: rotate(0);}
	100% {transform: rotate(0);}
}

@keyframes cherri-left_leg {
	10%  {transform: rotate(0);}
	15%  {transform: rotate(10deg);}
	20%  {transform: rotate(-7deg);}
	25%  {transform: rotate(10deg);}
	30%  {transform: rotate(-7deg);}
	35%  {transform: rotate(0);}
	100% {transform: rotate(0);}
}

/* Ralph blink animations */
@keyframes ralph-blink-top {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(33px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

@keyframes ralph-blink-bottom {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(-26px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

/* Ralph head animations */
@keyframes ralph-head-bob {
	10%  {transform: rotate(0);}
	15%  {transform: rotate(7deg);}
	20%  {transform: rotate(-2deg);}
	25%  {transform: rotate(0);}
	100% {transform: rotate(0);}
}

/* Terri blink animations */
@keyframes terri-blink-top-right {
	13%  {transform: translate(0, 0);}
	15%  {transform: translate(20px, 14px);}
	17%  {transform: translate(0, 0);}
	100% {transform: translate(0, 0);}
}

@keyframes terri-blink-top-left {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(25px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

@keyframes terri-blink-bottom {
	13%  {transform: translateY(0);}
	15%  {transform: translateY(-27px);}
	17%  {transform: translateY(0);}
	100% {transform: translateY(0);}
}

@keyframes terri-jaw {
	10%  {transform: rotate(0);}
	15%  {transform: rotate(5deg);}
	35%  {transform: rotate(5deg);}
	40%  {transform: rotate(-2deg);}
	43%  {transform: rotate(0);}
	100% {transform: rotate(0);}
}