.centered {
	text-align:center;
}

.corefont {
	font-family:"Segoe UI Light", sans-serif;
}

.subfont {
	font-family: Raleway,"Open Sans",Arial;
}

.underlined {
	text-decoration:underline;
	color:#ddd;
}

.underlined:hover {
	color:#fff;
	font-weight:400;
}

.micros-title {
	text-align:center;
	color:#ff007e;
	font-weight:900;
}

.core-container {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:flex-start;
	height:70vh;
	width:70%;
}

.container-main {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:55vw;
	gap:8px;
	flex-grow:1;
}

.container-side {
	display:flex;
	flex-direction:column;
	background-color:#442;
	align-items:center;
	gap:8px;
	padding:8px;
	min-width:180px;
	height:100%;
	overflow:auto;
	flex-grow:1;
	direction:rtl;
}

.content-container {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
}

.content-body {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:8px;
	align-items:center;
	height:80px;
	width:100%;
	background-color:#111;
}

.content-thumbnail {
	width:6.5vw;
	height:6.5vh;
	background-color:white;
	min-width:120px;
	min-height:70px;
}

.content-title-container {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center
}

.content-title {
	font-size:24pt;
	font-weight:700;
	margin:0px;
}

.content-subtitle {
	font-size:14pt;
	font-weight:100;
	margin:0px;
}

.content-controls {
	display: flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	gap:8px
}

.content-info {
	font-size:12pt;
	font-weight:100;
	margin:0px;
	color:#ddd;
}

.content-info-container {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-end;
}

.content-child-container {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%
}

.circle {
	width:32px;
	height:32px;
	background-color: #777;
	color:black;
	border-radius: 50%;
	
	display:flex;
	justify-content:center;
	align-items:center;
	
	user-select:none;
}

.circle:hover {
	background-color: #77e;
}

.circle.active {
	background-color: #eee;
}

.sidebar-container {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	cursor:pointer;
}

.sidebar-container:hover {
	color:pink;
}

.sidebar-container:hover img {
	filter: brightness(200%);
}

.sidebar-thumbnail {
	width:9.5vw;
	height:9.5vh;
	background-color:white;
	min-width:180px;
	min-height:100px;
}

.sidebar-title {
	font-size:14pt;
	font-weight:400;
}

.sidebar-subtitle {
	font-size:10pt;
	font-weight:100;
}

/* Text-bubble code lifted wholesale from The Code Chic because I have no idea what I am doing.
https://www.youtube.com/watch?v=M8mOqLsLtvE
*/

.text-bubble-container {
	position:relative;
	display:inline-block;
	cursor:pointer;
}

.text-bubble-container .text-bubble {
	visibility:hidden;
	text-align:center;
	position:absolute;
	z-index:1;
	bottom:125%; /* Position it above the text. */
	left:50%;
	opacity:0;
	transition: opacity 0.3s;
	
	background-color:#554;
	color:#fff;
	box-shadow: 10px 5px 5px black;
	
	padding:10px;
	
	width:20vw;
	margin-left:-10vw;
}

.text-bubble-container .text-bubble::after {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-5px;
	border-width:5px;
	border-style:solid;
	border-color:#554 transparent transparent transparent;
}

.text-bubble-container:hover .text-bubble {
	visibility:visible;
	opacity:1;
}