body
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 10pt;
color:#141823;
font-weight: normal;
background-color:#141823;
margin:10px;
display: flex; justify-content: center;
}

table 
{
background-color:#ffffff;
border-collapse:separate;
border:solid #d2b48c 0px;
border-radius:10px;
}

input[type=submit],input[type=button] 
{
background-color: #cf0000;
border: none;
color: #FFFFFF;
font-size: 14px;
text-decoration: bold;
display: inline-block;
width: 180px;
height: 40px;
margin: 2px 2px;
border-radius: 20px;
cursor: pointer;
-webkit-appearance: none;
}

input[type=text],input[type=email],input[type=password],input[type=url]
{
padding: 0 8px;
vertical-align: middle;
border-radius: 2px;
width: 80%;
min-height: 36px;
background-color: #ffffff;
border: 1px solid #525252;
font-size: 16px;
font-weight: normal;
}

input[type="file"]::file-selector-button
{
background-color: #525252;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

select
{
padding: 0 8px;
vertical-align: middle;
border-radius: 2px;
width: 80%;
min-height: 36px;
background-color: #ffffff;
border: 1px solid #525252;
font-size: 16px;
font-weight: normal;
cursor: pointer;
}

.logos img
{
max-width: 100%; max-height: 60px;
width: auto; height: auto;
object-fit: contain;
}

.artwork img
{
max-width: 100%; max-height: 120px;
width: auto; height: auto;
object-fit: contain;
}

.record-container
{
position: relative;
width: 100%; max-width: 280px; aspect-ratio: 1;
margin: 1em auto;
}

#vinylRecord
{
width: 100%; height: 100%; border-radius: 50%;
transition: transform 0.5s linear;
}

#recordLabel
{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
width: 55%; height: 55%;
border-radius: 50%;
pointer-events: none;
/* allow its own rotation */
transition: transform 0.5s linear;
}

#tonearm
{
position: absolute;
top: 0; right: 0;
width: 16%;
transform-origin: 10% 10%;
transform: rotate(-10deg);  /* must match startAngle */
pointer-events: none;
}

.spinning
{
animation: spin 2s linear infinite;
}
@keyframes spin
{
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}

.message {
 display: block; margin: 0.5em 0;
font-size: 1.0rem; color: #<?php echo $textcolor;?>;
}

.center
{
display: flex;
justify-content: center;
align-items: center;
}

a
{
text-decoration: none
}

a:link    {color:#cf0000; background-color:transparent}
a:visited {color:#cf0000; background-color:transparent}
a:active  {color:#cf0000a; background-color:transparent}

p
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 10pt;
}

/* Headlines */

h1
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 12pt;
margin-bottom: 0;
color:#141823;
font-weight: bold;
display: inline;
}

/* Error */

h2
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 12pt;
margin-bottom: 0;
color:#cf0000;
font-weight: bold
display: inline;
}

/* Hot and Featured Product Links */

h3
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 7pt;
font-style: italic;
margin-top: 0;
margin-bottom: 0;
color:#4A5049;
font-weight: bold;
display: inline;
}

/* Small Print Terms */

h4
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 8pt;
margin-top: 0;
margin-bottom: 0;
color:#4A5049;
font-weight: normal;
display: inline;
}

/* Nav Bar Links */

h5
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 7pt;
font-style: italic;
margin-top: 0;
margin-bottom: 0;
color:#4A5049;
font-weight: bold;
display: inline;
}

/* Errors */

h4
{
font-family: arial,sans-serif,helvetica,verdana;
font-size: 10pt;
margin-top: 0;
margin-bottom: 0;
color:#141823;
font-weight: normal;
display: inline;
}