body {
         background-color: #FFFCF5;
         margin: 0 0 120px 0;
         padding: 0;
         width: 100%;
      }
      nav {
         background-color: #FFFFFF;
         border-bottom: 1px solid #EB0000;
         margin: 0;
         padding: 0;
         position: fixed;
         top: 0;
         width: 100%;
      }
      .menu {
         margin: 0 auto;
         padding: 10px 0;
      }
      nav a {
         color: #EB0000;
         display: inline-block;
         font-family: 'Roboto', sans-serif;
         font-size: 0.9em;
         font-style: normal;
         font-weight: 300;
         padding: 10px 20px;
         text-align: center;
         text-decoration: none;
      }
      nav a:hover {
         text-decoration: underline;
      }
      .logo {
         padding-left: 0!important;
         font-weight: 700;
      }
      div {
         margin: 20px auto;
         max-width: 720px;
         padding: 0 40px;
      }
      footer {
         background-color: #FFFCF5;
         margin: 40px 0 0px 0;
         font-family: 'Roboto', sans-serif;
         font-size: 0.6em;
         padding: 0;
         width: 100%;
         position: fixed;
         bottom: 0;
         border-top: 1px solid #EB0000;
      }
      h1, h2, h3, h4, h5, h6 {
         color: #EB0000;
         font-family: 'Roboto Serif', serif;
         font-style: italic;
         font-weight: 400;
         text-align: left;
         margin-block-start: 0;
         margin: 1rem auto;
      }
      h1 {
         font-size: 2.4em;
      }
      h2 {
         color: #4D4D4D; 
         font-size: 1.6em;
      }
      p, ol, ul {
         color: #4D4D4D;
         font-family: 'Roboto', sans-serif;
         font-weight: 300;
         line-height: 150%;
         margin-block-start: 0;
      }
      a {
         color: #EB0000;
         font-family: 'Roboto Serif', serif;
         font-style: italic;
         font-weight: 300;
         text-decoration: underline;
      }
      .button {
         display: inline-block;
      }
      .btn {
         background-color: #EB0000;
         color: #FFFFFF;
         font-family: 'Roboto', sans-serif;
         font-size: 0.8em;
         font-style: normal;
         font-weight: 400;
         text-align: center;
         text-decoration: none;
         padding: 16px 20px;
         border-radius: 32px;
      }
      .btn:hover {
         background-color: #BB0000;
      }
      .preheader {
        color: #bb0000;
        font-weight: 300;
      }
      .profile {
         float: right;
         shape-outside: ('../media/profile.jpg');
      }
      img.profile {
         border-radius: 50%;
         padding: 30px;
         shape-margin: 30px;
         width: 150px;
         height: 150px;
      }
      hr {
         border-color: #EB0000;
         border-style: solid;
         border-top: 1px;
         margin: 30px 0;
         padding: 0;
      }
      .row-cards {
         margin: 60px auto;
      }
      div.card {
         background-color: #d1c1c1;
         border-radius: 8px;
         border: 1px solid #EB0000;
         margin-block-start: 0;
         margin: 4px;
         padding: 24px;
         width: 24%;
         display: inline-block;
         vertical-align: top;
         height: 100%;
      }
      .content {
         padding-top: 20px;
      }
      table {
         background-color: #FFFFFF;
         border-collapse: collapse;
         border: 1px solid #EB0000;
         padding: 12px;
         margin: 32px 0;
         width: 100%;
         max-width: 720px;
      }
      tr:nth-child(even) {
         background-color: #f2f2f2;
      }
      th {
         border: 1px solid #EB0000;
         background-color: #EB0000;
         color: #FFFFFF;
         font-family: 'Roboto Serif', serif;
         font-size: 0.8rem;
         font-style: italic;
         font-weight: 300;
         text-align: left;
         padding: 16px 20px;
         width: 50%;
      }
      td {
         border: 0;
         color: #EB0000;
         font-family: 'Roboto', sans-serif;
         font-size: 0.8rem;
         padding: 16px 20px;
         width: 50%;
      }
      table.compact-table {
         margin: 32px 0;
      }
      table.compact-table td {
         padding: 16px 20px;
      }
      table.analytics-table td, table.analytics-table th {
         width: 25%;
      }
      .report-section {
         padding-bottom: 10px;
      }
      figure {
         margin: 20px auto;
         max-width: 720px;
         padding: 0 40px;
      }
      .fig-padding {
         padding-bottom: 20px;
      }
      figcaption {
         color: #4D4D4D;
         font-family: 'Roboto', sans-serif;
         font-size: 0.8rem;
      }
      pre {
         font-size: 0.7rem;
         line-height: 175%;
      }
      .image-full-width {
         border: 1px solid #EB0000;
         margin: 0px auto 10px auto;
         max-width: 720px;
         width: 100%;
      }
      .house {
         float: left;
         shape-outside: url(../media/house.png);
      }
      img.house {
         padding: 0 20px;
         shape-margin: 20px;
      }
      img.views-over-time {
         float: right;
         width: 280px;
         height: auto;
         border: 1px solid #EB0000;
         margin: 0 0 20px 20px;
      }
      .container {
         container-type: size;
      }
@container (max-width: 600px) {
   h1 {
      font-size: 2em;
   }
   h2 {font-size: 1.1em;
      color: #EB0000;
      text-align: center;
   }

}