<h1 id="title"> <strong> Voter Survey </strong></h1>
<div id="form-layout">
  <p id="survey-description"><strong>Please fill out the survey with your political infromation for research purposes</strong></p>
  <form id="survey-form" method="GET">
    <div class="rows">
      <div class="labels">
        <label id="name-label" for="name">* Name: </label>
      </div>
      <div class="rightRows">
        <input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter Your Name" required>
      </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label id="email-label" for="email">* E-mail: </label>
      </div>
      <div class="rightRows">
        <input type="text" name="email" id="email" class="input-field" placeholder="Enter Your E-mail" required>
      </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label id="number-label" for="age">* Age: </label>
      </div>
      <div class="rightRows">
        <input type="text" name="age" id="number" class="input-field" min="1" max="125" placeholder="Enter Your Age" required>
      </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label for="currWork">What politcal affliation would you describe yourself as? : </label>
      </div>
      <div class="rightRows">
        <select id="dropdown" name="currWork" class="dropdown">
          <option disabled selected value>Please select one of the following</option>
          <option value="dem">Democratic</option>
          <option value="rep">Republican</option>
          <option value="lib">Libertarian</option>
          <option value="green">Green Party</option>
          <option value="other">Other</option>
        </select>
      </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label for="intensity">* Which of the following would best match your own personal beliefs with your respective politcal affiliation? </label>
      </div>
      <div class="rightRows">
        <ul style="list-style: none;">
          <li class="radio">
            <label> Exactly Alike
            <input name="radio-buttons" value="1" type="radio" class="polActivity">
            </label>
        </li>
      <li class="radio">
        <label> Similar Enough
        <input name="radio-buttons" value="2" type="radio" class="polActivity">
      </label>
    </li>
  <li class="radio">
    <label>I'm just a clueless follower
    <input name="radio-buttons" value="3" type="radio" class="polActivity">
      </label>
   </li>
         </ul>
      </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label for="beliefs">Please check the following statements if they allign with your politcal beliefs: </label>
      </div>
<div class="rightRows">
  <ul id="beliefChk" style="list-style: none;">
    <li class="checks">
      <label>
        <input name="prefer" value="1" type="checkbox" class="polActivity">
        Pro-life
      </label>
    </li>
    <li class="checks">
      <label>
<input name="prefer" value="2" type="checkbox" class="polActivity">
    Pro-Choice
      </label>
    </li>
    <li class="checks">
      <label>
        <input name="prefer" value="3" type="checkbox" class="polActivity">
        Government should increase environmental regulations to combat climate change
      </label>
    </li>
    <li class="checks">
<label>
  <input name="prefer" value="4" type="checkbox" class="polActivity">
      There should be more regulation on gun control for the safety of US citizens
      </label>
    </li>
<li class="checks">
<label>
<input name="prefer" value="5" type="checkbox" class="polActivity">
  No more added regulations! We have the right to bear arms!
  </label>
    </li>
<li class="checks">
  <label>
    <input name="prefer" value="6" type="checkbox" class="polActivity">
    We should allow Syrian refugee's into our country for safety
  </label>
    </li>
    <li class="checks">
<label>
<input name="prefer" value="7" type="checkbox" class="polActivity">
    We need more border control to stop these damn illegals from tarnishing this country
      </label>
    </li>
<li class="checks">
  <label>
    <input name="prefer" value="8" type="checkbox" class="polActivity">
      The police force is too brutal with their use of authority
    </label>
    </li>
    <li class="checks">
      <label>
        <input name="prefer" value="9" type="checkbox" class="polActivity">
      It is the people who do not listen to police authority, they are just doing there job
       </label>
     </li>
    </ul>
   </div>
  </div>
<div class="rows">
  <div class="labels">
      <label for="registered">Are you a registered voter in the county you currently reside in?: </label>
  </div>
  <div class="rightRows">
<select id="registered" name="reg" class="dropdown">
  <option disabled selected value>Select an option</option>
  <option value="yes">Yes</option>
  <option value="no">No</option>
  </select>
  </div>
    </div>
    <div class="rows">
      <div class="labels">
        <label for="response"> Please leave any comments or suggestions below!: </label>
      </div>
      <div class="rightRows">
      <textarea id="response" class="input-field"  style="height:65px;width: 300px;resize:vertical;"
name="comment" placeholder="Leave any comments you have here..."></textarea>
      </div>
    </div>
    <button id="submit" type="submit" onclick="saveTextAsFile()">Submit</button>
  </form>
</div>