/* SACRED */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background-color: #dad;
}
main {
	background: var(--yellow-gradient);
	padding-top: 110px;
	width: 100%; 
	height: 100%;
	display: grid;
	place-items: center;
}

/* MAIN CONTENT */

.mainTitle {
	padding: 30px;
	font-family: 'Doppio One';
	font-weight: 600;
	font-size: 4rem;
	text-shadow: 3.6px 3.6px rgb(135, 207, 20);
	cursor: default;
}

/* TABLE MAIN */
table {
	background-color: rgba(245,245,255, 1.0);
	box-shadow: 0 3px 5px rgba(23, 023,23, .4);
	border-radius: 10px;
	border-collapse: collapse;
	padding: 16px 20px;
	font-family: 'Poppins';
	text-align: left;
	color: #232336;
	letter-spacing: .1rem;

	margin-bottom: 110px;
}
thead {
	box-shadow: 0 6px 4px rgba(23, 023,23, .4);
	z-index: 3;
}
th {
	padding: 1rem 2rem;
	cursor: default;
}
td {
	padding: 1rem 2rem;
}
tr:nth-child(even) {
	background-color: rgba(235,235,245, 1.0);
}

/* TABLE CHILDS */
#statuslike {
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	background: #fbff0e;
	display: flex;
}
#statuslike::after {
	content: 'LIKE';
	font-weight: 600;
	justify-self: center;
	align-self: center;
	width: 100%;
	height: 100%;
	text-align: center;
}
#statuslove {
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	background-color: #b6ff2e;
	display: flex;
}
#statuslove::after {
	content: 'LOVE';
	font-weight: 600;
	justify-self: center;
	align-self: center;
	width: 100%;
	height: 100%;
	text-align: center;
}

#status, #listen {
    text-transform: uppercase;
}
#listen a {
	color: #fff;
	padding: 6px 8px;
	border-radius: 6px;
	background-color: rgba(24,24,36, 1.0);
	text-decoration: none;
	transition: .4s ease;
}
#listen a:hover {
	background-color: rgba(24,24,36, .7);
}
#info {
	position: relative;
	display: grid;
	place-items: center;
	margin: 10px;
	border-radius: 10px;
	z-index: 1;
	cursor: help;
}
#info object {
	height: 20px;
	filter: invert(12%) sepia(17%) saturate(1156%) hue-rotate(201deg) brightness(101%) contrast(95%);
}
#info:hover {
	background: rgb(230, 230, 230);
}
#info:hover .infodesc {
	visibility: visible;
	opacity: 1;
}
.infodesc {
	position: absolute;
	right: 110%;
	padding: 8px;
	width: max-content;
	background: rgba(245,245,255, 1.0);
	box-shadow: 0 5px 7px rgba(24,24,36, .4);
	border-radius: 8px;
	visibility: hidden;
	transition: .2s ease;
	opacity: 0;
	z-index: 2;
}
.infodesc p{font-size: .7rem;} .infodesc h5{font-size: .9rem;}