/* *, *:before, *:after { */
/*   box-sizing: inherit; */
/* } */


/* ol, ul { */
/*   list-style: none; */
/* } */

/* .modp img { */
/*   max-width: 100%; */
/*   height: auto; */
/* } */

.modp {
	--color-green-light: #00E0BB;
	--color-green: #008670;
	--color-grey-light: #cfcfcf;
	--color-grey-lighter: #cfcfcf;
	--color-white: #ffffff;
	--color-reddish: #C61006;
	--bg-color: #000;
	/* --bg-color: rgba(0,0,0,0); */
	--fg-color: #fff;
	--font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
  font-size: 16px;
  text-align: center;
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--fg-color);
  padding: 5px 15px;
}


.modp .micro {
	font-size: 0.3em;
	color: var(--color-green);
}

.modp p {
	font-size: 1.2em;
	font-family: var(--font-family);
	text-align:center;
	width:100%;
}

.modp a:visited {
	color: var(--color-grey-light);
}

.modp .track-message {
	margin: 20px auto;
	width: 50%;
}

.modp #track-info {
	cursor: pointer;
}

.modp #infobox {
	
	font-size: 0.95em;
	color: var(--color-grey-light);
}

.modp #title {
	font-size: 1.2em;
	color: var(--color-green-light);
}

.modp #content {
	margin: 0 auto;
	/* max-width: 50%; */
}

.modp .spaced {
	margin-top: 10em;
}

.modp .section {
	/*  */
	margin: 1.2em 0;
}

@media screen and (max-width: 992px) {
	.modp #content {
		margin: 5em auto;
		max-width: 100%;
	}
}

.modp .visualizer {
	width:100%;
	height: 50px;
}

.modp .hide {
	display:none;
}

.modp svg {
margin: auto;
}

.modp .logo {
	color: var(--color-grey-lighter);
	text-decoration: none;
}

.modp #skip-track {
	color: var(--fg-color);
	background-color: var(--bg-color);
	background-color: var(--color-green);
	font-size: 0.7em;
	font-weight: 700;
	padding: 4px;
	border-radius: 4px;
	border: 1px solid var(--color-green);
	cursor: pointer;
}

.modp .play-control {
	/*  */
	border: none;
	border-top: 1px solid var(--color-green);
	font-family: var(--font-family);
	background-color: var(--bg-color);
	color: var(--fg-color);
	font-size: 2em;
}

.modp .play-control:first-child {
	border-bottom-left-radius: 20px;
}
.modp .play-control:last-child {
	border-bottom-right-radius: 20px;
}
.modp .playbar {
	/*  */
	display: flex;
	flex-direction: row;
	border: none;
	border-top: 1px solid var(--color-green);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.modp .button-play {
	/* width: 100%; */
	padding: 20px 10px;
	flex-grow: 2;
}
.modp .button-skip {
	/* width: 100%; */
	padding: 20px 10px;
	flex-grow: 1;
}

.modp .play-wrapper {
	border-radius: 20px;
	border: 1px solid var(--color-green);
	background-color: var(--bg-color);
	color: var(--fg-color);
}

.modp .play-top {
	padding: 20px 0;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom: 1px solid var(--color-green);
}
.modp .play-control:hover {
	cursor: pointer;
	/* background-color: #050505; */
}

.modp .footer-item {
	text-decoration: underline;
	cursor: pointer;
}

 /* The Modal (background) */
.modp .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modp .modal-content {
	background-color: var(--fg-color);
	color: var(--bg-color);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 2em 1em;
  width: 80%; /* Could be more or less, depending on screen size */
	border: 1px solid var(--color-green);
	border-radius: 20px;
}

.modp #track-info-modal-content {
	overflow: scroll;
	max-height: 30em;
	height: 30em;
}

/* The Close Button */
.modp .close {
  color:var(--color-green);
  float: right;
  font-size: 3em;
  font-weight: bold;
}

.modp .close:hover,
.modp .close:focus {
  color:var(--color-green-light);
  text-decoration: none;
  cursor: pointer;
}