body{
	background-color: #000000;
    color: #fff;
    place-content: center;
	font-family: 'Abel'; font-size: 20px;
}
h2 {
	font-family: 'Abel'; font-size: 22px;
}
.back-button{
  background-color: #FF0000;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 25px;
  width: 100px;
}
a{
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin: 2px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px
		rgba(0, 0, 0, .5);
}
.a:link{
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin: 2px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px
		rgba(0, 0, 0, .5);
}
.a:visited{
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin: 2px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px
		rgba(0, 0, 0, .5);
}
.a:hover{
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin: 2px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px 
		rgba(0, 0, 0, .5);
}
.a:active{
    text-align: center;
    text-decoration: none;
    color:#fff;
    margin: 2px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px 
    rgba(0, 0, 0, .5);
}

.card{
    width: 200px; /* Card width. */
    height: 30px /* Card height - Do not set a hight if you have a lot of content in the card. */;
    background-color: #333;
    border-radius: 20px;
    outline: 2px solid
    rgba(255, 255, 255, .5); /* The outline works the same way as a border with added perks. */
    outline-offset: -3px; /* Negative offset to bring in the outline border. */
    box-shadow: 3px 3px 10px
    rgba(0, 0, 0, .1);
    position: relative; /* Relative position because we are using position absolute on elements inside the card.
    This will make sure the said elements do not float outside of the card. Important for the zoom effect.*/
    overflow: hidden; /* Since we are scaling the image on hover, we have to hide the overflow. Important for the zoom effect.*/
    font-family: Abel; font-size: 20px;
}
.card-image{
    /* All the following styles are important for the zoom effect. */
    position: absolute;
    inset: 0; /* Fixes the starting points of the image to be on all 4 corners. */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes the image maintain its aspect ratio while filling the up entire card. */
    opacity: .7; /* Making the image slightly transparent so that it blends with the card background. */
    transition: transform .75s; /* Adds a transition over .75 seconds on the transform property (the scaling). */
}
.card:hover .card-image{
    transform: scale(3.25); /* When the card is hovered, the image inside of it is scaled up. Important for the zoom effect. */
}
/* Not important for the zoom effect. */
.card-title{
    text-align: center;
    margin: 4px 0 0 0;
    font-size: 20px;
    text-shadow: 0 0 1px 
    rgba(0, 0, 0, .5);
}

.rTable {
   display: block;
   width: 350px;
}
.rTableHeading, .rTableBody, .rTableFoot, .rTableRow{
   clear: both;
}
.rTableHead, .rTableFoot{
   font-weight: bold;
   padding: 0px 1.8% 5px 1.8%;
}
.rTableCell, .rTableHead {
   border: 0px solid #999999;
   float: left;
   height: 30px;
   overflow: hidden;
   padding: 0px 1.8% 5px 1.8%;
   margin: 5px 2px 2px 2px;
   width: 200px;
   text-align: center;
}
.rTable:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}