@import url('https://fonts.googleapis.com/css2?family=Tinos&family=Poppins&family=Balsamiq+Sans&family=Special+Elite&display=swap');

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

body {
background-color: #ffffff;
-webkit-text-size-adjust:100%;
}

a:link          	{color: #000;}
a:visited       	{color: #000;}
a:hover         	{color: #666;}

.logo {
display: 			inline-block;
float: 				left;
margin:				6px 15px;
}

h1.title {
display: 			inline-block;
float: 				left;
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			15px;
font-weight:		normal;
margin:				13px 0px;
color:				#000;
}

h2 {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			22px;
font-weight:		normal;
color:				#3366CC;
margin:				10px 0px 30px 0px;
}

.clock {
display:            inline-block;
background-color:  	rgba(255,255,255,.5);
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			26px;
border-radius: 		50px;
padding: 			0 12px;
}

#screen {
background-color:	#ddd;
background-image:	url('images/BG-Gray-Felt.jpg');
background-repeat:	no-repeat;
background-size:	100% 100%;
background-size:	cover;
}

.card {
display: 			inline-block;
font-family: 		'Poppins', sans-serif;
height:				130px;
width:      		130px;
border-radius:  	12px;
margin:				6px;
padding:			10px;
background-color: 	#fff;
border: 			4px solid #fff;
box-shadow: 		0px 0px 15px rgb(0,0,0,.3);
}

.content {
height:				130px;
width:      		130px;
border-radius:  	1px;
line-height: 		1.15;
overflow: 			hidden;
color:				#000;
}

.num {
position:			absolute;
background-color:	#fff;
padding:			6px 10px;
font-size:			22px;
font-weight: 		bold;
line-height: 		100%;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
bottom:				+0px;
right:				+0px;
text-align: 		right;
visibility: 		hidden;
}

.content img {
width:				130px;
height:				130px;
object-fit: 		contain;
}

.cardBack {
width: 130px !important;
height: 130px !important;
object-fit: cover !important;
}

.vid {
width:				130px;
height:				74px;
border:				0px;
frameborder:		0px;
margin:				0px;
}

.voc {
width:				130px;
height:				60px;
border-radius:		6px;
overflow:			hidden;
}

.mp3 {
width:				130px;
height:				60px;
overflow:			hidden;
}

.mp4 {
max-width:			130px;
max-height:			130px;
border:				0px;
frameborder:		0px;
margin:				0px;
}

.desmos {
width:				110px;
height:				110px;
margin:				0px;
}

.text {
font-family:		varela round, arial rounded MT bold, arial, helvetica, san serif;
font-size:			14px;
line-height:		150%;
}

.donePic {
display:			block;
max-height:			360px;
max-width:			640px;
margin:				20px auto;
}

.doneVid {
display:			block;
width:				640px;
height:				360px;
margin:				10px auto;
}

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

.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: 			8px 0px 0px 0px;
}

.copyright {
font-family:		Arial, Helvetica, sans-serif;
font-size:			11px;
color:				#999;
margin:				10px;
}

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

#instructions a:link 	{color: #36f;}
#instructions a:visited {color: #36f;}
#instructions a:hover 	{color: #69f;}