:root{
	--bubble-background-color: #fff;
	--bubble-border-color: #000;
	--bubble-border-width: 2px;
	--bubble-corner-radius: 10px;
	--bubble-triangle-width: 1em;
	--bubble-triangle-distance: 40px;
}

body {
	font-size: 100%;
}

.main{
	padding: 1.25em;
}

.block.block_mascot .content {padding:0;}
.block.block_mascot .content .no-overflow {padding:4px;}
div.block_mascot {
  border: none;
  flex: 1 1 20em;
}
div.block_mascot .content:hover .block_mascot_balloon{
  display: block;
}
div.block_mascot .content .block_mascot_balloon{
  display: none;
}

.mascot_site_before,
.mascot_site_after {
	text-align: center;
	line-height: 1.8;
}

div#mascot {
	margin-top: 20px;
	margin-bottom: 30px;
}

div.block_mascot div.content > div{
  text-align:center;
  line-height: 160%;
}

div.content{
	display: flex;
	gap: 0.8em;
}

.equation {
	text-align: center;
	font-size: 105%;
    white-space: nowrap;
}
.help-functions .slope,
.equation .slope {
	color: red;
	font-weight: bold;
}
.help-functions .y-intercept,
.equation .y-intercept {
	color: blue;
	font-weight: bold;
}

div.equation {
	text-align: left;
	margin: 0.4em 0.4em 0.4em 0.0em;
	border: 1px solid silver;
	padding: 0.2em;
}


.mascot-bubble {
  position: absolute;
  max-width: 240px;
  font-family: comic, helvetica, tahoma;
  
  padding: var(--bubble-corner-radius);
  margin: var(--bubble-triangle-width);
  border: var(--bubble-border-width) solid var(--bubble-border-color);
  background: var(--bubble-background-color);
  -webkit-border-radius: var(--bubble-corner-radius);
  -moz-border-radius: var(--bubble-corner-radius);
  border-radius: var(--bubble-corner-radius);
  z-index: 510;
  opacity:0.9;
  filter:alpha(opacity=90); /* For IE8 and earlier */
}

.mascot-bubble,
.mascot-bubble.top,
.mascot-bubble.top-left,
.mascot-bubble.top-center,
.mascot-bubble.top-right,
.mascot-bubble.bottom,
.mascot-bubble.bottom-left,
.mascot-bubble.bottom-center,
.mascot-bubble.bottom-right {
	min-width: calc(3*var(--bubble-triangle-distance) + var(--bubble-triangle-width));
}

.mascot-bubble.left,
.mascot-bubble.left-top,
.mascot-bubble.left-middle,
.mascot-bubble.left-bottom,
.mascot-bubble.right,
.mascot-bubble.right-top,
.mascot-bubble.right-middle,
.mascot-bubble.right-bottom {
	min-height: calc(3*var(--bubble-triangle-distance) + var(--bubble-triangle-width));
}



.mascot-bubble:before {
  content:"";
  position: absolute;
  border-style: solid;
  border-color: var(--bubble-border-color) transparent;
  display: block;
  width: 0px;
}

.mascot-bubble:before,
.mascot-bubble.bottom:before,
.mascot-bubble.top:before,
.mascot-bubble.bottom-left:before,
.mascot-bubble.top-left:before{
	left: var(--bubble-triangle-distance);
}

.mascot-bubble.bottom-right:before,
.mascot-bubble.top-right:before{
	left: calc(100% - 2*var(--bubble-triangle-width) - var(--bubble-triangle-distance));
}

.mascot-bubble.bottom-center:before,
.mascot-bubble.top-center:before{
	left: calc(50% - var(--bubble-triangle-width));
}

.mascot-bubble:before,
.mascot-bubble.bottom:before,
.mascot-bubble.bottom-left:before,
.mascot-bubble.bottom-center:before,
.mascot-bubble.bottom-right:before{
	bottom: calc(-1*var(--bubble-triangle-width) - 1*var(--bubble-border-width));
	border-width: var(--bubble-triangle-width) var(--bubble-triangle-width) 0;
}

.mascot-bubble.top:before,
.mascot-bubble.top-left:before,
.mascot-bubble.top-center:before,
.mascot-bubble.top-right:before{
	bottom: auto;
	top: calc(-1*var(--bubble-triangle-width) - 1*var(--bubble-border-width));
	border-width: 0px var(--bubble-triangle-width) var(--bubble-triangle-width);
}

.mascot-bubble.left:before,
.mascot-bubble.left-top:before,
.mascot-bubble.left-middle:before,
.mascot-bubble.left-bottom:before {
	left: calc(-1*var(--bubble-triangle-width) - 1*var(--bubble-border-width));
	border-color: transparent var(--bubble-border-color);
	border-width: var(--bubble-triangle-width) var(--bubble-triangle-width) var(--bubble-triangle-width) 0;
}

.mascot-bubble.right:before,
.mascot-bubble.right-top:before,
.mascot-bubble.right-middle:before,
.mascot-bubble.right-bottom:before {
	right: calc(-1*var(--bubble-triangle-width) - 1*var(--bubble-border-width));
	left: auto;
	border-color: transparent var(--bubble-border-color);
	border-width: var(--bubble-triangle-width) 0 var(--bubble-triangle-width) var(--bubble-triangle-width);
}

.mascot-bubble.left:before,
.mascot-bubble.right:before,
.mascot-bubble.left-top:before,
.mascot-bubble.right-top:before {
	top: var(--bubble-triangle-distance);
	bottom: auto;
}

.mascot-bubble.left-middle:before,
.mascot-bubble.right-middle:before {
	top: calc(50% - var(--bubble-triangle-width));
	bottom: auto;
}

.mascot-bubble.left-bottom:before,
.mascot-bubble.right-bottom:before {
	top: calc(100% - 2*var(--bubble-triangle-width) - var(--bubble-triangle-distance));
	bottom: auto;
}


.mascot-bubble:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: var(--bubble-background-color) transparent;
  display: block;
  width: 0px;
}

.mascot-bubble:after,
.mascot-bubble.bottom:after,
.mascot-bubble.top:after,
.mascot-bubble.bottom-left:after,
.mascot-bubble.top-left:after{
	left: calc(var(--bubble-triangle-distance) + 0.5*var(--bubble-border-width));
}

.mascot-bubble.bottom-right:after,
.mascot-bubble.top-right:after{
	left: calc(100% - 2*var(--bubble-triangle-width) - var(--bubble-triangle-distance) + 0.5*var(--bubble-border-width));
}

.mascot-bubble.bottom-center:after,
.mascot-bubble.top-center:after{
	left: calc(50% - var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
}

.mascot-bubble:after,
.mascot-bubble.bottom:after,
.mascot-bubble.bottom-left:after,
.mascot-bubble.bottom-center:after,
.mascot-bubble.bottom-right:after{
	bottom: calc(-1*var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
	border-width: calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) 0;
}

.mascot-bubble.top:after,
.mascot-bubble.top-left:after,
.mascot-bubble.top-center:after,
.mascot-bubble.top-right:after{
	bottom: auto;
	top: calc(-1*var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
	border-width: 0 calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width));
}

.mascot-bubble.left:after,
.mascot-bubble.left-top:after,
.mascot-bubble.left-middle:after,
.mascot-bubble.left-bottom:after {
	left: calc(-1*var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
	border-color: transparent var(--bubble-background-color);
	border-width: calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) 0;
}

.mascot-bubble.right:after,
.mascot-bubble.right-top:after,
.mascot-bubble.right-middle:after,
.mascot-bubble.right-bottom:after {
	right: calc(-1*var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
	left: auto;
	border-color: transparent var(--bubble-background-color);
	border-width: calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) 0 calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width)) calc(var(--bubble-triangle-width) - 0.35*var(--bubble-border-width));
}

.mascot-bubble.left:after,
.mascot-bubble.right:after,
.mascot-bubble.left-top:after,
.mascot-bubble.right-top:after {
	top: calc(var(--bubble-triangle-distance) + 0.5*var(--bubble-border-width));
	bottom: auto;
}

.mascot-bubble.left-middle:after,
.mascot-bubble.right-middle:after {
	top: calc(50% - var(--bubble-triangle-width) + 0.5*var(--bubble-border-width));
	bottom: auto;
}

.mascot-bubble.left-bottom:after,
.mascot-bubble.right-bottom:after {
	top: calc(100% - 2*var(--bubble-triangle-width) - var(--bubble-triangle-distance) + 0.5*var(--bubble-border-width));
	bottom: auto;
}


.mascot-bubble .closeButton{
  position: absolute;
  right: calc(0.5*var(--bubble-corner-radius));
  top: 0px;
  cursor: pointer;
}
.mascot-bubble .closeButton:hover{
  font-weight: bold;
}