*,*::before,*::after{box-sizing:border-box}body,figure,blockquote,dl,dd{margin:0}ul.reset,ol.reset{list-style:none;margin:0;padding:0}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block;object-fit:contain}table{margin:0;padding:0;border:none;border-collapse:collapse;border-spacing:0}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}:root{--pink: #e64980;--purple: #9c36b5;--teal: #087f5b;--light-yellow: #fff3bf;--yellow: #ffe066;--gray-darkest: #0F172A;--gray-darker: #334155;--gray-dark: #64748B;--gray-lightest:#E2E8F0;--gray-lighter: #CBD5E1;--gray-light: #94A3B8;--white: #fff;--bg-site: #fff;--link: var(--pink);--link-hover: var(--fc-darker);--link-visited: var(--purple);--fc-dark: var(--gray-darkest);--fc-medium: var(--gray-darker);--fc-light: var(--gray-dark);--bg-aside: var(--light-yellow);--border-aside: var(--yellow);--spacing2: 0.2rem;--spacing4: 0.4rem;--spacing8: 0.8rem;--spacing12: 1.2rem;--spacing16: 1.6rem;--spacing24: 2.4rem;--spacing36: 3.6rem;--spacing48: 4.8rem;--spacing64: 6.4rem;--spacing96: 9.6rem;--spacing128: 12.8rem;--margin-bottom: var(--spacing16);--section-spacer: var(--spacing36);--fs-xs: 0.875rem;--fs-sm: 1rem;--fs-md: 1.25rem;--fs-lg: 1.5rem;--fs-xl: 2rem;--fs-xxl: 3rem;--lh-sm: 1.3rem;--lh-md: 1.75rem;--lh-lg: 2rem;--ff-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace}html{scroll-behavior:smooth;color-scheme:light dark}body{font-family:"Jost",sans-serif;font-size:var(--fs-md);color:var(--fc-medium);line-height:var(--lh-md);letter-spacing:-.15px;background-color:var(--bg-site)}h1{font-size:var(--fs-xxl);color:var(--fc-dark)}h2{font-size:var(--fs-xl);color:var(--fc-dark)}h3{font-size:var(--fs-lg);color:var(--fc-dark)}h4{font-size:var(--fs-sm);color:var(--fc-dark)}small{display:inline-block;font-size:var(--fs-xs);line-height:var(--lh-sm);color:var(--fc-light)}.nowrap{white-space:nowrap}article :not(.reset) li:not(:last-child){margin-bottom:var(--spacing4)}a{color:var(--link)}a:hover,a:focus,a:active{color:var(--link-hover)}a:not(.button):visited{color:var(--link-visited)}article h2{padding-top:var(--section-spacer);margin:var(--section-spacer) 0 calc(var(--section-spacer)/2);border-top:1px solid var(--gray-lightest)}article h3{padding-top:calc(var(--section-spacer)*.67)}code{font-size:var(--fs-sm)}@media (prefers-color-scheme: light){.light-hide{display:none !important}}body::before{content:"";display:block;position:fixed;z-index:2;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--pink) 0%, var(--purple) 50%, blue 100%);background-image:linear-gradient(90deg, var(--purple) 10%, var(--pink) 50%, var(--yellow) 90%)}.site{max-width:84rem;margin:auto;display:grid;grid-template-columns:260px 1fr 260px;grid-gap:var(--spacing36)}.sitenav{padding:var(--spacing24);position:sticky;top:0;align-self:start;height:100vh;border-right:1px solid var(--gray-lightest)}.sitenav .logo{margin-bottom:var(--margin-bottom)}.sitenav .mobile-menu{display:none}.sitenav li:not(.minor){margin-bottom:var(--spacing4)}.sitenav a,.sitenav a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.sitenav a:hover,.sitenav a:focus,.sitenav a:active{color:var(--link)}#page-home .sitenav-home,#page-templates .sitenav-templates,#page-components .sitenav-components,#page-hybrid-responsive .sitenav-hybrid-responsive,#page-outlook .sitenav-outlook,#page-dark-mode .sitenav-dark-mode,#page-best-practices .sitenav-best-practices{position:relative;display:flex;align-items:center;color:var(--link)}#page-home .sitenav-home::before,#page-templates .sitenav-templates::before,#page-components .sitenav-components::before,#page-hybrid-responsive .sitenav-hybrid-responsive::before,#page-outlook .sitenav-outlook::before,#page-dark-mode .sitenav-dark-mode::before,#page-best-practices .sitenav-best-practices::before{display:block;content:"";height:14px;width:8px;position:absolute;left:-14px;top:7px;background:url("images/icon-active.svg") no-repeat}.first-minor{margin-top:var(--spacing12)}.sitenav .minor a,.sitenav .minor a:visited,.sitenav button{color:var(--gray-dark);font-size:var(--fs-xs);display:flex;align-items:center;gap:var(--spacing4)}article{padding-bottom:var(--section-spacer)}header{padding-top:var(--spacing48)}header h1{font-size:var(fs-xxl);margin:0 0 var(--spacing16);letter-spacing:-1px}header p{margin:0;font-size:var(--fs-lg);line-height:var(--lh-lg)}header .button{margin-top:var(--spacing12)}.email-logos{display:flex;flex-wrap:wrap;gap:var(--spacing12);align-items:center;margin:var(--spacing16) 0}code{font-family:var(--ff-mono)}code:not(.hljs){font-size:var(--fs-xs);padding:var(--spacing2) var(--spacing4);background:var(--gray-lightest);background:rgba(0,0,0,.08);color:var(--teal);opacity:.8;border-radius:4px}pre{white-space:pre-wrap}pre code{border-radius:4px;max-width:100%;overflow-x:auto;display:block;padding:var(--spacing8)}pre code[data-lang]{position:relative}pre code[data-lang]::before{content:attr(data-lang);padding:var(--spacing2) var(--spacing4);background:rgba(255,255,255,.1);color:#fff;position:absolute;top:0;right:0;font-size:var(--fs-xs);line-height:1.5;letter-spacing:1px}figure pre{margin-bottom:0}figure pre code{border-bottom-right-radius:0;border-bottom-left-radius:0}.example{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border:1px solid var(--gray-lighter);border-top:0;margin-bottom:var(--margin-bottom)}.example *{font-family:sans-serif}.example-padded{padding:var(--spacing16)}.data-table{width:100%;margin-bottom:var(--spacing36);font-size:var(--fs-sm);margin-bottom:var(--margin-bottom)}.data-table th,.data-table td{padding:var(--spacing8) var(--spacing4);line-height:var(--lh-sm)}.data-table th{text-align:left;border-bottom:2px solid var(--gray-lighter)}.data-table td{border-bottom:1px solid var(--gray-lighter)}.data-table code{white-space:nowrap}aside{border-radius:4px;background-color:var(--bg-aside);border:1px solid var(--border-aside);padding:var(--spacing8);margin-bottom:var(--margin-bottom)}aside img{display:block;margin-top:var(--spacing8)}aside[data-emoji]{position:relative;padding-left:var(--spacing36)}aside[data-emoji]::before{content:attr(data-emoji);padding:var(--spacing2) var(--spacing4);position:absolute;top:0;left:0;bottom:0;background:var(--border-aside);padding:0 var(--spacing8);display:flex;align-items:center;font-size:var(--fs-lg)}.buttons{display:flex;gap:var(--spacing4)}.button{border:1px solid;cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing4);padding:var(--spacing8) var(--spacing12);text-decoration:none;border-radius:4px;font-size:var(--fs-md);line-height:var(--lh-md)}.button-primary{border-color:var(--link);background-color:var(--link);color:var(--white)}.button-primary:hover,.button-primary:focus,.button-primary:active{border-color:var(--gray-darker);background-color:var(--gray-darker);color:var(--gray-lightest)}.button-secondary{border-color:var(--link)}.button-secondary:hover,.button-secondary:focus,.button-secondary:active{border-color:var(--link-hover)}.email-client-support{border:3px solid var(--gray-lighter);padding:var(--spacing8);border-radius:4px;margin-bottom:var(--margin-bottom);font-size:var(--fs-sm)}.three-columns{display:grid;grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr));grid-gap:1rem;margin-bottom:var(--margin-bottom)}.htmlio-ad{display:flex;gap:var(--spacing12);align-items:center;text-decoration:none;border:1px solid var(--link);padding:var(--spacing2);margin-top:var(--spacing24)}.htmlio-ad .htmlio-ad-img{flex:1 0 auto}.htmlio-ad h4{margin:0;font-size:var(--fs-md)}.htmlio-ad p{font-size:var(--fs-sm);color:var(--gray-dark);line-height:var(--lh-sm);margin:var(--spacing4) 0}.htmlio-ad .link{color:var(--link);text-decoration:underline;font-weight:bold}.on-this-page{position:sticky;top:0;align-self:start;padding-top:var(--spacing64)}.on-this-page h4{margin:0 0 var(--spacing4)}.on-this-page a,.on-this-page a:visited{color:var(--gray-darkest);font-size:var(--fs-sm);text-decoration:none}.on-this-page a:after{content:"";display:table;clear:both}.on-this-page a:hover,.on-this-page a:focus,.on-this.page a:active{color:var(--link)}.on-this-page .toc-H3{font-size:var(--fs-xs);margin-left:var(--spacing8)}@media (max-width: 84rem){.data-table code{white-space:normal}}@media (max-width: 1000px){.site{grid-template-columns:250px 1fr var(--spacing16);grid-gap:var(--spacing16)}.on-this-page{display:none}}@media (max-width: 700px){:root{--section-spacer: var(--spacing12)}.site{display:block}.sitenav,article{padding-left:var(--spacing12);padding-right:var(--spacing12)}.sitenav{border-right:0;border-bottom:1px solid var(--gray-lightest);display:block;height:auto;padding-top:var(--spacing4);padding-bottom:var(--spacing4);background:var(--bg-site);line-height:0;z-index:1}.sitenav .logo{width:80px;height:50px;margin-bottom:0;display:inline-block}.sitenav .mobile-menu{display:block;float:right;background-color:rgba(0,0,0,0);display:flex;gap:var(--spacing8);align-items:center;border:0;padding:var(--spacing8);border-radius:4px;border:1px solid var(--gray-lightest);cursor:pointer;margin-top:var(--spacing4);color:var(--gray-dark)}.sitenav .menu-icon{position:relative;height:14px;width:18px}.sitenav .icon-bar{height:2px;position:absolute;left:0;border-radius:2px}.sitenav .bar1{top:0;width:100%;background-color:var(--purple)}.sitenav .bar2{top:calc(50% - 1px);width:70%;background-color:var(--pink)}.sitenav .bar3{bottom:0;width:90%;background-color:var(--purple)}.sitenav ul{height:0;overflow:hidden;opacity:0;transition:all 150ms ease-in-out;line-height:var(--lh-md)}.sitenav li:first-child{margin-top:var(--spacing12)}.sitenav li:last-child{margin-bottom:var(--spacing12)}.sitenav ul.open{height:auto;overflow:visible;opacity:1}}@media (prefers-color-scheme: dark){:root{--pink: #e64980;--purple: #da77f2;--teal: #63e6be;--light-yellow: #854D0E;--yellow: #713F12;--white: var(--gray-lightest);--gray-lightest:#0F172A;--gray-lighter: #334155;--gray-light: #64748B;--gray-darkest: #E2E8F0;--gray-darker: #CBD5E1;--gray-dark: #94A3B8;--bg-site: var(--gray-lightest)}.dark-hide{display:none !important}.sitenav,article h2{border-color:var(--gray-lighter)}.dark-fill-white{fill:var(--gray-dark)}code:not(.hljs){background:var(--gray-lighter)}}/*!
  Theme: Dracula
  Author: Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/.hljs{color:#e9e9f4;background:#282936}.hljs ::selection,.hljs::selection{background-color:#4d4f68;color:#e9e9f4}.hljs-comment{color:#94a3b8;opacity:.8}.hljs-tag{color:#62d6e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e9e9f4}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ea51b2}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#b45bcf}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#00f769}.hljs-strong{font-weight:700;color:#00f769}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#ebff87}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#62d6e8}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#b45bcf}.hljs-emphasis{color:#b45bcf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#00f769}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}