@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');

html, body {
margin:				0px;
padding:			0px;
height:				100%;
border:				none
}

body {
background-color: 	#ffffff;
text-align: 		left;
}

A:link          	{color: #3366ff;}
A:visited       	{color: #3366FF;}
A:hover         	{color: #6699FF;}

A.red:link          {color: #cc0000;}
A.red:visited       {color: #cc0000;}
A.red:hover         {color: #ff0000;}

TD.subnav {
cursor: 			pointer;
}

.subnav {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
margin:				0px;
font-weight:		bold;
color:				#666666;
}

.logo {
display: 			inline-block;
float: 				left;
margin:				4px 20px 4px 0px;
}

H1 {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
font-weight:		normal;
margin:				20px 0px;
color:				#3399FF;
}

.ad {
margin: 			10px 0px;
}

H1.title {
display: 			inline-block;
width:				580px;
white-space:		nowrap;
overflow:			hidden;
float: 				left;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			20px;
font-weight:		normal;
margin:				14px 0px 0px 20px;
color:				#36f;
}

.text {
font-family:		'Poppins', arial, helvetica, san serif;
line-height: 		125%;
display:			block;
max-width:			438px;
max-height:			275px;
overflow:			hidden;
}

.pic {
display: 			block;
max-width:			700px;
max-height:			340px;
margin: 			10px auto;
}

.vid {
display: 			block;
width:				676px;
height:				380px; 
border:				0px;
frameborder:		0px;
margin:				10px auto;
}

.mp3 {
width:				300px;
height:				60px;
}

.desmos {
width:				400px;
height:				400px; 
border:				0px;
frameborder:		0px;
margin:				0px;
}

.button {
margin:				15px 15px;
}

#cardCell {
vertical-align:		middle;
}

#card {
width: 				780px;
height: 			500px;
box-shadow: 		0 4px 12px 0 rgba(0,0,0,0.25);
}

#header {
width: 				740px;
height: 			60px;
padding: 			0 20px;
background-color: 	#ccc;
font-family: 		'Roboto Condensed', sans-serif;
font-size: 			30px;
font-weight: 		bold;
line-height: 		60px;
overflow: 			hidden;
}

#star {
position:			absolute;
margin-left:		823px;
margin-top: 		15px;
cursor:				pointer;
}

#content {
width: 				740px;
height: 			400px;
padding: 			20px;
background-color: 	#f9f9f9;
font-family: 		'Roboto Condensed', sans-serif;
font-size: 			30px;
line-height: 		125%;
overflow: 			auto;
}

.count {
font-family: 		'Roboto Condensed', sans-serif;
font-size: 			18px;
}

.dot {
display: 			none;
}

#mobileTitle {
display: 			none;
font-family: 		'Roboto Condensed', sans-serif;
font-size: 			30px;
color:				#666;
margin: 			20px;
}

.share {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		150%;
margin:				15px;
}

.share:link         {color: #999;}
.share:visited      {color: #999;}
.share:hover        {color: #bbb;}

.shareOptions {
margin:				18px 0px;
}

.shareOptions TD {
padding:			0px 10px;
}

.linkBox {
width: 				450px;
font-size: 			14px;
background-color: 	#eee;
border: 			1px solid #ccc;
padding: 			4px;
margin: 			0px;
}

.copyright {
font-family:		Arial, Helvetica, sans-serif;
font-size:			11px;
line-height:		normal;
color:				#36f;
margin:				10px;
}

#instructions {
font-family:		Arial, Helvetica, sans-serif;
font-size:			14px;
line-height:		100%;
height: 			30px;
background-color: 	#FFFDD4;
}

#instructions A:link 	{color: #3366FF;}
#instructions A:visited {color: #3366FF;}
#instructions A:hover 	{color: #6699FF;}

@media print {
	.noPrint { display: none; }
	}
	
@media screen and (max-device-width: 700px) { 
	.noMobile { display: none; }
	.ad { margin: 0px; }
	#cardCell { vertical-align: middle; }
	#mobileTitle { display: block; }
	}