<label for="toggle">
  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="100" height="100">
    <path fill="white" id="cloud_icon" d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/>
  </svg>
</label>
<input type="checkbox" id="toggle" />

<div class="main">
  <p align="center" >Once the Cloud Service Provider is selected, this link will take you to the CSP's {{ text }}!</p>
</div>

<style>
  html, body {
    height: 100%;
    margin: 0px;
  }

  .main p {
    font-family: "Source Sans Pro", sans-serif;
    margin: 1.6rem 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: black;
    position: fixed;
    top: 9em;
    width: 70%;
    left: 15%;
  }

  /* Toggle Switch */
  label {
    display: block;
    height: 100px;
    width: 100px;
    margin: 20px 0;
    position: fixed;
    left: 50%;
    margin-left: -50px;
    top: 8em;
  }

  input#toggle {
     position: absolute;
     top: -9999px;
     left: -9999px;
  }

  /* Wrapper */
  .main {
    width: 100%;
    height: 100%;
    background: url(static/img/cloud_background.jpg);
    background-size: cover;
  }

  /* Toggle Background Image */
  input#toggle:checked + .main {
    background: url(static/img/cloud-background-2.gif);
    background-size: cover;
  }

  input#toggle:checked + .main p {
    color: white;
  }
</style>
