title: How do I change the font size and font color in this block of code?
body: <p>I'm very new to JS and I'm working on a project. This is the website so far (<a href="http://irie.rf.gd/rw/" rel="nofollow noreferrer">http://irie.rf.gd/rw/</a>) When you click on the equal sign, it generates a random quote.</p>
  <p>How do I increase the font-size of the quotes and center the text?</p>
  <p>I also want the color of the quotes to change every time a new quote is generated but I have no idea how. Its an assignment, so if anyone knows how to do this with loops I would appreciate it (I get a higher grade). Thanks in advance.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script&gt;
  
              //Shows a dropdown list when selected
              //Clicking this button reveals and hides all four math operators
              //Users can select whichever operator they like
  
              function selectOperator() {
                  var menuList = document.getElementById("menuList")
                  document.getElementById("listings").value = menuList.options[menuList.selectedIndex].text;
              }
  
  
  
              //The following quotes will be displayed when the equal sign is clicked.
              var quotes = [
                  'Try not to talk in circles. There\'s just no point.', 
                  'You clicked on the equal sign. He\'s so humble. He\'s not less than or geater than anyone else.',
                  'My dad spent all summer at the beach. He\'s a Tan Gent.',
                  'The 2 fours skipped lunch because they already 8, silly!',
                  'Ok, so clearly, math just isn\'t your thing. Its ok. No need to cry.',
                  'Don\'t feel too bad for parallel lines since they will never meet. They are experts in social distancing.',
                  'Check your angles. They weren\'t able to get a loan since their parents won\'t cosine.',
                  'Oh I see! Your plants hate math because you told them math will give them square roots.',
                  'You keep checking one math book after another. Bad idea. They have their own problems!',
                  'This website is like an obtsue triangle. Its never right!',
                  'Be wary of anyone with a graph paper. Those people are always plotting something.',
                  'Rumor has it that old math teacher of yours has a favorite snake. Its a pi-thon.',
                  'Meet my baby twins. Both their names are parabolas and they only drink quadratic formula.',
                  'What did one dessert say to the other? I\'m a cute 3.14.',
              ]
              
  
              //This generates random quotes.
              function nextQuote() {
                  var randonNumber = Math.floor(Math.random() * (quotes.length));
                  document.getElementById('randomquotegenerater').innerHTML = quotes[randonNumber];
              }
          &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #eae7dc
  }
  
  
  h1 {
      color: #e85a46;
      text-align: center;
      margin-bottom: 120px;
  }
  
  
  #section1 {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      width: 100%;
      margin-bottom: 40px;    
  }
  
  #randomquotegenerater {
      width: 80%;
      height: 150px;
      background-color: #e98074;
      margin-left: 120px;
      align-items: center;
  }
  
  #box1 {
      width: 300px;
      height: 100px;
      border: 1px solid black;
  }
  
  #box2 {
      width: 300px;
      height: 100px;
      border: 1 px solid black;
  }
  
  #menuList {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      justify-content: center;
  }
  
  
  .dropdownmenu {
      display: inline;
      position: relative;
  }
  
  
  .choices {
      display: none;
      position:absolute;
      background-color: lightgray;
      overflow: auto;
      z-index: 1;
  }
  
  
  #menuList option {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  
  #quotebutton {
      margin-left: 48%;
      margin-bottom: 20px;
      width: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Can you solve this?&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="description" content="(This is a useless website"&gt;
          &lt;link href="css/style.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;Free online math solutions&lt;/h1&gt;
  
          &lt;div id="section1"&gt;
              &lt;div&gt;
                  &lt;!--Users can enter any whole number of their choice--&gt; 
                  &lt;input type="number" id="box1" name="box1" placeholder="enter a valid integer"&gt;
              &lt;/div&gt;
  
              &lt;form class="dropdownmenu"&gt;
                  &lt;select id="menuList" onchange = "selectOperator()"&gt;
                      &lt;option&gt;Select an operator&lt;/option&gt;
                      &lt;option class="choices"&gt;+&lt;/option&gt;
                      &lt;option class="choices"&gt;-&lt;/option&gt;
                      &lt;option class="choices"&gt;x&lt;/option&gt;
                      &lt;option class="choices"&gt;/&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/form&gt;
  
  
              &lt;div&gt;
                  &lt;!--Users can enter any whole number of their choice--&gt; 
                  &lt;input type="number" id="box2" name="box2" placeholder="enter a valid integer"&gt;
              &lt;/div&gt;
              &lt;/div&gt;
        
         
  
          &lt;button onclick="nextQuote()" id="quotebutton"&gt;=&lt;/button&gt;
          
  
  
          &lt;div id="randomquotegenerater"&gt;
              &lt;!--Random quote will show up here--&gt;
  
          &lt;/div&gt;       
      &lt;/body&gt;
  &lt;/htm</code></pre>
  </div>
  </div>
  </p>