/*  CSS for the pages that contain the iframes.
**  It's meant to emulate the behavior of the responsive How Things Fly site,
**  which uses a 960 grid (yes, in 2020, wtf) and has a sidebar.
**  That means that the max-width for the iframes/activities is 730px.   
*/

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  width: 100%;
  margin: 0;
  color: #000000;
  background: #ffffff;
  font-family: Helvetica, Arial, sans-serif;
}

main {
  width: 100%;
  padding: 0 10px;
}

.activity-iframe {
  width: 1px;
  min-width: 100%; /* the iframe-resizer docs say setting min-width fixes an iOs bug */
  border: none;
  border: none;
}

@media (min-width: 640px) {
  main {
    padding: 0 15px;
  }

  .activity-iframe {
    width: 79.167%;
    min-width: 1px; /* This might be weird on iPads? */
    max-width: 730px;
  }
}

@media (min-width: 960px) {
  main {
    width: 960px;
  }
}