body {
	font-family: 'Neuton', serif;
	cursor:url(http://www.rw-designer.com/cursor-extern.php?id=22253), auto;
}

h1 {
	font-size: 60px;
	color: #825a5a;
	margin-top: 40px;
}

#front-page-subtitle {
	font-size: 24px;
	color: #ab8282;
	margin-top: 10px;
}

h2 {
	color: #94a97a;
	font-size: 24px;
	margin-top: 10px;
	margin-bottom: 30px;
}

/*
.brush {
	fill: #ccc;
	fill-opacity: .5;
	pointer-events: none;
}*/

.axis line,
.axis path {
  fill: none;
  stroke: #555;
  shape-rendering: crispEdges;
}

.tick text {
	font-family: sans-serif;
	font-size: 11px;
	fill: #555;
}

#priovis .x-axis text {
	font-weight: 600;
}

.area {
	fill: #825a5a;
}

.area.area-age {
	fill: #94a97a;
}

.bar {
	fill: #93bebf;
}

.line {
	fill: none;
	stroke: #ADE2F5;
	stroke-width: 3px;
}

.digiLine {
	fill: none;
	stroke: #ff9999;
	stroke-width: 3px;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.movie-image {
	max-width:120px;
	max-height:150px;
	width:auto;
	height:auto;
	border: 3px dotted lightskyblue; padding:1em;
	border-radius: 30%;
	width:100%
}

.digi-movie-image {
	max-width:120px;
	max-height:150px;
	width:auto;
	height:auto;
	border: 3px dotted #ff9999; padding:1em;
	border-radius: 30%;
	width:100%
}

.revenue-board {
	max-width:120px;
	max-height:120px;
	width:100%;
	/*opacity: 0.5;*/
}


.chart-title {
	font-family: 'DynaPuff';
	/*font-family: fantasy;*/
	font-size: 26px;
}

.chart-title-bold {
	font-family: 'DynaPuff';
	/*font-family: fantasy;*/
	font-size: 22px;
	font-weight: bold;
	color: #404245;
}

.chart-title-small {
	font-family: 'DynaPuff';
	/*font-family: fantasy;*/
	font-size: 16px;
	color: #555555;
}

.chart-title-tiny {
	font-family: 'DynaPuff';
	/*font-family: fantasy;*/
	font-size: 10px;
	color: white;
}

.movie-name{
	font-size: 14px;
	color: #12B9F5;
	/*-webkit-text-stroke-width: 1px;*/
	/*-webkit-text-stroke-color: dimgray;*/
	text-shadow: 4px 4px 4px #aaa;
	text-align: center;
}

.digi-movie-name{
	font-size: 14px;
	color: #ef2a45;
	/*-webkit-text-stroke-width: 1px;*/
	/*-webkit-text-stroke-color: dimgray;*/
	text-shadow: 4px 4px 4px #aaa;
	text-align: center;
}

.padding-0{
	padding-right:0;
	padding-left:0;
}

.imgContainer{
	float:left;
}

.text-centered {
	position: absolute;
	top: 26%;
	left: 65%;
	transform: translate(-50%, -50%);

}

.dyna {
	font-family: 'DynaPuff';
}

.pokemon-comparison-title {
	font-family: 'DynaPuff';
	font-size: 24px;
}

.stats-category-labels {
	font-family: 'DynaPuff';
	font-width: 1px;
	font-size: 16px;
}

.stats-labels {
	font-family: 'DynaPuff';
	font-width: 1px;
	font-size: 16px;
}

.axis text {
	font-family: 'DynaPuff';
}


.node {
	cursor: pointer;
}

.node:hover {
	stroke: #000;
	stroke-width: 1.5px;
}

.node.node--leaf:hover {
	stroke: #000;
	stroke-width: 1.5px;
}

/*.node--leaf {*/
/*	fill: transparent;*/
/*}*/

.label {
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-anchor: middle;
	text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
	pointer-events: none;
}

#select-gen-text {
	color: red;
	text-shadow: 0 1px 0 black, 1px 0 0 black, -1px 0 0 black, 0 -1px 0 black;
}

.text-boxes {
	background-size: 100% 100%;
	font-family: 'Press Start 2P';
	font-size: 10px;
	width: auto;

	/*align-items: center;*/

}

.text-boxes-1 {
	background-image: url("../img/utils/chatbox.jpg");
	width: 350px;
	height: 400px;
}
.text-boxes-2 {
	background-image: url("../img/utils/chatbox2.jpg");
	height: 400px;
}
.text-boxes-3 {
	background-image: url("../img/utils/chatbox.jpg");
	width:120%;
	height:50%;
	margin-top:120px
}

.comparison-pokemon-image-left {
	position: absolute;
	top: 230px;
	left: 220px;
}

.comparison-pokemon-image-right {
	position: absolute;
	top: 243px;
	right: 300px;
}

#hand-pointer-img {
	animation: updown 2s ease infinite;
}

@keyframes updown {
	0% {
		transform: translateY(-30%);
	}

	50% {
		transform: translateY(20%);
	}

	100% {
		transform: translateY(-30%);
	}
}

.bounce:hover {
	transform: translateY(-10px);
	/*animation-duration: 0.5s;*/
	/*animation-iteration-count: 1;*/
	/*animation-name: bounce;*/
	/*animation-timing-function: ease;*/
}
@keyframes bounce {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-20px); }
	100% { transform: translateY(0); }
}

#radar-path:hover {
	opacity: 0.8;
}

/*image fade in in comparison*/
.fade-in-image { animation: fadeIn 2s; }

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.grow{
	transition: 0.2s all;
	transform-origin: 50% 50%;
	transform-box: fill-box;
}

.grow:hover{
	transform: scale(1.3, 1.3);
}

/*spinning border in comparison*/
.compareImg {
	--g: 4px;     /* the gap */
	--b: 12px;    /* border thickness*/



	padding: calc(var(--g) + var(--b));
	--_c: #0000 0 25%, var(--c) 0 50%;
	--_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
	--_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
	background:
			var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
			var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
	background-size: 200% var(--b),var(--b) 200%;
	cursor: pointer;
	filter: grayscale(50%);
	transition: .3s;
}

.compareImg-win {
	--c: skyblue; /* the color */
}

.compareImg-lose {
	--c: #ff9999; /* the color */
}

.compareImg:hover {
	--_p: 75%;
	filter: grayscale(0%);
}

.win-text{
	color: skyblue;
}

.lose-text{
	color: #ff9999;
}



.container .card {
	position: relative;
	width : 235px;
	height : 215px;
	background-color : #fff;
	margin : 30px 10px;
	padding : 20px 15px;

	display : flex;
	flex-direction : column;
	box-shadow : 0 5px 20px rgba(0,0,0,0.5);
	transition : 0.3s ease-in-out;
	border-radius : 15px;
}
.container .card:hover {
	height : 380px;
}


.container .card .compareImg {
	position : relative;
	width : 150px;
	height : 150px;

	top : -40%;
	left: 8px;
	box-shadow : 0 5px 20px rgba(0,0,0,0.2);
	z-index : 1;
}

.container .card .compareImg {
	max-width : 100%;
	border-radius : 15px;
}

.container .card .content {
	position : relative;
	top : -140px;
	padding : 10px 15px;
	color : #111;
	text-align : center;
	font-size: small;

	visibility : hidden;
	opacity : 0;
	transition : 0.3s ease-in-out;

}

.container .card:hover .content {
	margin-top : 80px;
	visibility : visible;
	opacity : 1;
	transition-delay: 0.2s;

}





/*VS EFECTS IN BOX OFFICE AND VIDEO GAMES*/
.gallery {
	--z: 32px;  /* control the zig-zag  */
	--s: 280px; /* control the size */
	--g: 8px;   /* control the gap */

	display: grid;
	gap: var(--g);
	width: calc(2*var(--s) + var(--g));
	grid-auto-flow: column;
}
.gallery > img {
	width: 0;
	min-width: calc(100% + var(--z)/2);
	height: var(--s);
	object-fit: cover;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	cursor: pointer;
	transition: .5s;
}
.gallery > img:hover {
	width: calc(var(--s)/2);
}
.gallery > img:first-child {
	place-self: start;
	clip-path: polygon(calc(2*var(--z)) 0,100% 0,100% 100%,0 100%);
	--mask:
			conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg)
			50%/100% calc(2*var(--z)) repeat-y;
}
.gallery > img:last-child {
	place-self: end;
	clip-path: polygon(0 0,100% 0,calc(100% - 2*var(--z)) 100%,0 100%);
	--mask:
			conic-gradient(from   45deg at left ,#0000,#000 1deg 89deg,#0000 90deg)
			50% calc(50% - var(--z))/100% calc(2*var(--z)) repeat-y;
}

/*AUTHORS*/
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Sumana:wght@700&display=swap");
.person {
	align-items: center;
	display: flex;
	flex-direction: column;
	width: 100px;
}
.container-outer {
	border-radius: 50%;
	height: 312px;
	-webkit-tap-highlight-color: transparent;
	transform: scale(0.48);
	transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
	width: 400px;
}
.container-outer:after {
	background-color: #f2f2f2;
	content: "";
	height: 10px;
	position: absolute;
	top: 390px;
	width: 100%;
}
.container-outer:hover {
	transform: scale(0.54);
}
.container-inner {
	clip-path: path(
			"M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
	);
	position: relative;
	transform-origin: 50%;
	top: -200px;
}
.circle-img {
	/*background-color: white;*/
	border-radius: 50%;
	cursor: pointer;
	height: 380px;
	left: 10px;
	pointer-events: none;
	position: absolute;
	top: 210px;
	width: 380px;
}
.img {
	pointer-events: none;
	position: relative;
	transform: translateY(20px) scale(1.15);
	transform-origin: 50% bottom;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.container-outer:hover .img {
	transform: translateY(0) scale(1.2);
}
.img1 {
	left: 22px;
	top: 164px;
	width: 340px;
}
.img2 {
	left: -46px;
	top: 174px;
	width: 444px;
}
.img3 {
	left: -16px;
	top: 144px;
	width: 466px;
}
.divider {
	background-color: #ca6060;
	height: 1px;
	width: 160px;
}
.name {
	color: #404245;
	font-size: 30px;
	font-weight: 600;
	margin-top: 16px;
	text-align: center;
}

.end-pages-title {
	font-family: 'DynaPuff';
	font-size: 36px;
	display: flex;
	margin-left: 100px;
	justify-content: center;
	align-items: center;
}

#web-authors {
	background-image: url("../img/utils/end-pages-background.jpg");
	background-size: 1100px 650px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: -100px;
}

#web-sources {
	background-image: url("../img/utils/end-pages-background.jpg");
	background-size: 1100px 650px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: -100px;
}

.web-sources-text-bold {
	font-family: "DynaPuff";
	font-size: 22px;
}

.web-sources-text-normal {
	font-family: "DynaPuff";
	font-size: 16px;
	font-weight: lighter;
}

#compare-pokemon-digimon-sticky {
	background-image: url("../img/utils/quicknote.png");
	background-size: 650px 590px;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 30px;
	margin-left: -150px;
	opacity: 0.8;
}

.name {
	font-size: 20px;
	font-weight: lighter;
}