@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  @page {
    margin: 0.5cm; }
  p {
    orphans: 3;
    widows: 3; } }

@-ms-viewport {
  width: device-width;
  zoom: 1.0; }

@viewport {
  width: device-width;
  zoom: 1.0; }

html, body, span, p, header {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

header, main {
  display: block; }

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

html,
body {
  height: 100%; }

html {
  background: #fff;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%; }

body {
  line-height: 1.5; }

html {
  font-size: 100%; }

body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333; }

p {
  margin-bottom: 1.5rem; }

::-moz-selection {
  color: #fff;
  background: #E7EFD3; }

::selection {
  color: #fff;
  background: #E7EFD3; }


::-webkit-input-placeholder {
  color: #a1acb5; }

::-moz-placeholder {
  color: #a1acb5; }

:-ms-input-placeholder {
  color: #a1acb5; }



html{
  background: #0a4882;
}
@media screen and (min-width: 48rem) {
    html {
      background: url(magenta_bg.png) bottom left no-repeat #0a4882;
      } 
}
header {
  color: white;
  background-color: black;
  padding: .2rem 1rem .5rem;
}
header>p{
  font-size: 1rem;
  max-width: 60rem;
  margin: .5rem auto 0;
}
main{
  padding: 5vh 1rem 0;
}
@media screen and (min-width: 48rem) {
    main {
      padding-top: 15vh;
      background: url(yellow_bg.png) 100% -20% no-repeat;
      } 
}
main>p{
  color: white;
  font-size: 1.2rem;
  max-width: 60rem;
  margin: .5rem auto 0;
}
span{
  display: block;
  position: relative;
  top: 3rem;
  float: right;
  background-image: url(online.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 60px;
  margin-bottom: 5rem;
}