<div class="card" id="card">
      <svg class="quotation-mark unselectable" viewBox="0 0 50 50" xml:space="preserve">
         <text transform="matrix(1.2764 0 0 1 8.5929 50.3609)" font-size="51.4154">“</text>
      </svg>

      <p id="quoteText">"You have to learn the rules of the game. And then you have to play better than anyone else."</p>
      <div class="author unselectable" id="author"><h3 id="authorText">Albert Einstein</h3></div>
   </div>

// Design Insperation: https://ui8.net/product/aves-ui-kit

body {
   background-color: #212121;
}
@mixin unselectable() {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.card {
   width: 250px;
   height: 300px;
   background-color: #3498db;
   text-align: center;
   border-radius: 10px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   cursor: pointer;

   p {
      color: white;
      font-family: 'Playfair Display', serif;
      font-size: 14pt;
      @include unselectable();
      margin: 0 10px;
      margin-top: 20px;
   }
}


.author {
   width: 100%;
   height: 60px;
   background-color: #2980b9;
   position: absolute;
   bottom: 0;
   left: 0;
   border-radius: 0 0 10px 10px;
   h3 {
      padding-top: 6px;
      color: white;
      font-family: 'Ubuntu Condensed', sans-serif;
      text-transform: uppercase;
      font-size: 11pt;
   }
}

.quotation-mark {
   x: 0px;
   y: 0px;
   enable-background: new 0 0 50 50;
   width: 50px;
   height: 70px;

   text {
      fill: white;
      font-family: 'TimesNewRomanPS-BoldMT';
   }
}

.unselectable {
   @include unselectable();
}

var quotes = [
   ["You have to learn the rules of the game. And then you have to play better than anyone else.", "Albert Einstein"],
   ["In the end, it's not the years in your life that count. It's the life in your years.", "Abraham Lincoln"],
   ["Be yourself; everyone else is already taken.", "Oscar Wilde"],
   ["Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.", "Martin Luther King Jr."],
   ["If you don't stand for something you will fall for anything.", "Gordon A. Eadie"]
];

var colors = [
   ["#2ecc71", "#27ae60"],
   ["#1abc9c", "#16a085"],
   ["#e74c3c", "#c0392b"],
   ["#9b59b6", "#8e44ad"],
   ["#66cc66", "#17ad49"],
   ["#2A7E64", "#267359"],
   ["#4F82C4", "#6289CB"]
]


function randomNum(e) {
   return Math.floor(((Math.random() * e.length) + 1) - 1);
}

function randomBackgroundColor() {
   var ranNum = randomNum(colors);
   return colors[ranNum];
}

function randomQuote() {
   var ranNum = randomNum(quotes);
   return quotes[ranNum];
}

var card = document.getElementById('card');
var cardText = document.getElementById('quoteText');
var author = document.getElementById('author');
var authorText = document.getElementById('authorText');
card.onclick = function(){
   var ranColor = randomBackgroundColor();
   card.style.backgroundColor = ranColor[0];
   author.style.backgroundColor = ranColor[1];

   var ranText = randomQuote();
   authorText.innerHTML = ranText[1];
   cardText.innerHTML = ranText[0];
}