body {
    background-color: black;
    color: white;
    font-family: sans-serif;
    text-align: center;
    font-size: 24pt;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
}

th, td {
  width: 0px;
  border: 1px solid black;
  padding: 4px;
  text-align: center;
}

.no-border {
    border: 0px;
}

.no-border td {
  border: 0px;
}

.no-border th {
  border: 0px;
}

th {
  background-color: black;
}

/* no underline */
a {
  text-decoration: none;
}

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

button {
    padding-left: 20px;
    padding-right: 20px;
}

div.hint { 
    margin: 10px;
}

.full {
    left:0px;
    top:0px;
    width : 100%;
    height : 100%;
}

audio.full {
    margin-top: 10px;
    margin-bottom: 10px;
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
  margin-left: 20px;
  margin-right: 5px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

.results-info {
    margin-top: 10px;
    margin-bottom: 10px;
}

.links-bar {
  margin-bottom: 1em;
}

#footer {
  margin: 1em;
  font-size: small;
}

/* Default styles for all screen sizes (mobile-first approach) 
   Display full-res to fit the entire screen
   Viewport (width=720) gets scaled to actual mobile screen width
   E.g. my phone's browser-reported screen size is 411x770
   Viewport tag has width=720 and initial-scale=0.5 
   Something which 720px width in our css does not actually
   fill the screen, because 0.5 * 720 = 360
   To fill my phone's screen (411x720),
   we have to specify a width of 822px which is translated to 411px
*/
.cover-img {
  width: 822px; 
  height: 822px; 
  display: block; /* Helps with alignment */
}

/* Styles for screens wider than 1000px (e.g., large desktops)
   Ironically, the smaller font size looks better on larger screens
   since they can display three album covers in a row
   E.g. my browser screen size is 1920x966, 
   (smaller than my sceen resolution (3840x2160) due to 200% scaling).
   1920/3 = 640
*/
@media only screen and (min-width: 1920px) {
  .cover-img {
    width: 635px;
    height: 635px;
    float: left;
  }
}

/* TODO: Make it work for other people's screens
*/

/*
 Unlike the albums page, the player and tracks pages never show 
 more than one cover image, so they're styled a bit differently
*/
.single-img {
  width: 822px; 
  height: 822px; 
  float: none;
  display: inline;
}