#scrollList 
{
   width: 100%;
}

h2#coverText 
{
   width: 50%;
}

.listOption 
{
   background-color: #282828;
   height: 275px;
}

.button-container 
{
   text-align: center;
}

main 
{
   background-image: none;
}

.row 
{
   height: calc(var(--main-height) / 2);  
}

/*
 Apparently you can nest css like this
 which makes it more readable in my oppinion,
 having the css structured similarly to the html
*/
.row-item 
{
   height: 95%;
   width: 48%;
   display: inline-block;
   background-color: #444440;

   img 
   {
      float: left;
      width: 50%;
      height: 100%;
   }

   /*
      these fields also apply to the other p elements in this .row-item
      So make sure to overwrite them if needed
   */
   p 
   {
      margin: 0px;
      float: right;
      width: 48%;
      font-size: 11px;
   }

   p.title 
   {
      font-size: 13px;
      text-align: center;
      margin-bottom: 5px;
   }

   p.location 
   {
      font-size: 12px;
      margin-top: 10px;
   }
}