    <style>
     body {
       background-color: #fcfdfb;
       font-family: NotoSans;
       margin: 0;
     }
     h1 {
       font-size: 44px;
       font-family: NotoSansBlack;
     }
     h2 {
       font-size: 30px;
       font-family: NotoSansBold;
     }
     a {
       text-decoration: none;
       color: {{ theme_color('FOREGROUND_COLOR') }};
     }
     p {
       font-size: 18px;
     }
     #navigation-container {
       display: flex;
       justify-content: space-between;
       padding: 0 2%;
     }
     #site-header {
       background-color: {{ theme_color('FOREGROUND_COLOR', 7.5) }};
       padding: 0;
     }
     #nav-list, #nav-list-mobile {
       list-style-type: none;
       padding-top: 10px;
       padding-bottom: 10px;
       display: inline;
       text-align: center;
       vertical-align: top !important;
       //padding-left: 14%;
       padding-left: 0;
     }
     #site-header li {
       padding: 16px;
       display: inline;
       list-style-type: none;
     }
     #site-header li a {
       color: black;
       line-height: 90px;
       padding: 5px 15px;
     }
     .shape {
       position: absolute;
       overflow: hidden;
       height: 80px;
       width: 100%;
     }
     .shape::before {
       border-radius: 100%;
       position: absolute;
       background: {{ theme_color('FOREGROUND_COLOR', 7.5) }};
       right: -200px;
       left: -200px;
       top: -200px;
       content: '';
       bottom: 0;
       z-index: -100;
     }
     #content {
       margin: 0 auto;
       margin-bottom: 6%;
     }
     #header-container {
       background-color: {{ theme_color('FOREGROUND_COLOR', 7.5) }};
       margin: 0;
       padding-left: 10%;
       padding-right: 8%;
     }
     #header-container * {
       margin: 0;
     }
     #header-container header {
       max-width: 1200px;
       margin: 0 auto;
     }
     #page-content {
       max-width: 1200px;
       margin: 2% auto;
       margin-bottom: 72px;
       width: 82vw;
       border-radius: 13px;
       background-color: white;
       box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
       padding: 3% 5%;
       box-sizing: border-box;
     }
     .parent {
       display: flex;
       justify-content: space-between;
     }
     #steps-container {
       width: 82vw;
       margin: 0 auto;
       max-width: 1200px;
     }
     #steps-container > .parent {
       margin-bottom: 72px;
     }
     .step-text {
       width: 50%;
     }
     .onion-url-container {
       background-color: {{ theme_color('BUTTON_COLOR', 10) }};
       display: inline-block;
       padding: 1%;
       border-radius: 10px;
       padding-right: 8px;
     }
     .onion-url-container:hover {
       background-color: {{ theme_color('BUTTON_COLOR', 25) }};

       /* The .button:hover rule underlines the whitespace in the url container, we don't want that */
       text-decoration: none !important;
     }
     .onion-url-container:hover span {
       text-decoration: underline;
     }
     .onion-url-container:active {
       background-color: {{ theme_color('BUTTON_COLOR', 40) }};
     }
     .onion-url-container p {
       color: {{ theme_color('FOREGROUND_COLOR') }};
       display: inline;
     }
     .button {
       background-color: {{ theme_color('BUTTON_COLOR') }};
       padding: 0 24px 16px 24px;
       border-radius: 100px;
       box-shadow: 2px 4px {{ theme_color('BUTTON_COLOR', opacity=20) }};
       font-family: NotoSansSemibold;
       height: 40px;
       width: max-content;
       color: white;
       display: inline-block;
     }
     .button:hover {
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), {{ theme_color('BUTTON_COLOR') }};
     }
     .button:active {
       background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), {{ theme_color('BUTTON_COLOR') }};
     }
     .button a {
       color: white;
     }
     a:hover {
       text-decoration: underline;
     }
     a.button:hover {
       text-decoration: none;
     }
     .onion-glyph-download {
       height: 20px;
       width: 20px;
       padding: 10px;
       padding-top: 5px;
       transform: translateY(11px);
       filter: invert(100%) sepia(0%) saturate(7468%) hue-rotate(246deg) brightness(105%) contrast(101%);
       background-size: contain;
       display: inline-block;
       background: url({{ 'onion-glyph.svg' | asseturl }});
       background-size: 24px;
       background-repeat: no-repeat;
       background-position: center;
     }
     .onion-url-lock {
       transform: translateY(4px);
       {{ generate_filter(envvars('ONION_URL_LOCK_FILTER')) }}
       display: inline-block;
       background-image: url({{ 'onion-site-lock.svg' | asseturl }});
       width: 32px;
       height: 32px;
       background-repeat: no-repeat;
       background-size: contain;
     }
     #support-footer {
       width: 100%;
       background-color: white;
       box-shadow: 0 0 30px #0000001a;
       padding-top: 5%;
       padding-bottom: 5%;
     }
     .chevron-down {
       background-image: url({{ 'chevron-down-solid.svg' |asseturl }});
       width: 20px;
       height: 20px;
       background-repeat: no-repeat;
       float: right;
     }
     summary.no-marker {
       list-style: none;
     }
     details[open] > summary > i.chevron-down {
       transform: rotate(180deg);
     }
     details.collapsible-text > summary {
       font-weight: bold;
       background-color: rgba(0, 0, 0, 0.03);
       padding: 2%;
       border-radius: 5px;
       font-size: 1em;
       border: 1px solid rgba(0, 0, 0, 0.05);
     }
     details[open].collapsible-text > summary {
       border-radius: 5px 5px 0 0;
     }
     details.collapsible-text {
       border-radius: 5px;
       border: 1px solid rgba(0, 0, 0, 0.05);
     }
     details.collapsible-text > summary:hover {
       background-color: rgba(0, 0, 0, 0.09);
       cursor: pointer;
     }
     details.collapsible-text > summary:active {
       background-color: rgba(0, 0, 0, 0.15);
     }
     details.collapsible-text > div.details-container {
       padding: 0 5%;
       color: rgba(0, 0, 0, 0.54);
     }
     .onion-url-desktop {
       display: none !important;
       font-size: 1em;
     }
     .onion-url-desktop, .onion-url-mobile {
       font-weight: bold;
       font-size: 16px;
       padding: 2%;
       padding-right: 24px;
     }
     .social-button {
       margin-top: 2%; margin-bottom: 5%; display: inline; margin-right: 2%;
     }
     #footer-container {
       margin: 0 auto;
       text-align: center;
       max-width: 1200px;
     }
     #footer-container p {
       width: 36vw;
       margin: auto;
     }
     #steps-container > div.parent:nth-child(2n) {
       flex-direction: row-reverse;
     }
     #footer-container > img:first-child {
       width: 175px;
       height: 175px;
     }
     .details-container li {
       font-size: 18px;
     }
     .details-container h3 {
       font-weight: bold;
     }
     .child.step-text h2 {
       margin-bottom: 16px;
     }
     .child.step-text details {
       margin-top: 32px;
     }
     .circle-bg {
       display: inline-block;
       width: 275px;
       height: 275px;
       position: absolute;
       background-color: {{ theme_color('BACKGROUND_COLOR', 10) }};
       z-index: -1;
       border-radius: 100%;
     }
     #site-intro {
       display: inline-block;
       margin-top: 2%;
     }
     .onion-glyph-download.rtl-show {
       display: none;
     }
     .social-button img.rtl-show {
       display: none;
     }
     .onion-url-desktop span {
       display: inline-block;
       transform: translateY(-7px);
     }
     #download-tor-button {
       margin-top: 2%;
       margin-bottom: 5%;
     }
     #os-span-data {
       display: none !important;
     }
     #language-select:hover #language-dropdown {
       display: block;
     }
     #language-dropdown {
       overflow: auto;
       max-height: 70vh;
     }
     #site-logo > img {
       height: 66px;
       padding-top: 20px;
     }
     .dropdown-item:hover {
       background-color: {{ theme_color('BACKGROUND_COLOR', 25) }};
     }

     /* tablet */
     /* some of these rules aren't overriden on mobile, so they affect mobile too*/
     @media (max-width: 1122px) {
       .button {
         height: 32px;
         padding-bottom: 24px;
       }
       .child > img {
         width: 275px;
       }
       h1 {
         font-size: 2em;
       }
       h2 {
         font-size: 1.5em;
       }
       #footer-container {
         width: 90vw;
       }
       #steps-container {
         width: 90vw;
       }
       #nav-list {
         display: none;
       }
       #nav-list-mobile {
         margin-bottom: 0;
         margin-top: 0;
         padding: 3% 0 3% 0 !important;
         justify-content: space-around;
         background-color: {{ theme_color('BACKGROUND_COLOR', 15) }};
         display: block;
       }
       #nav-list > li, #nav-list-mobile > li  {
         margin: 0;
         padding: 0;
       }
       #nav-list > li > a, #nav-list-mobile > li > a {
         padding-top: 0 !important;
         padding-bottom: 0 !important;
         line-height: initial !important;
       }
       #language-select {
         position: absolute;
         top: 0;
         right: 0;
         margin-top: 1.5% !important;
         margin-right: 26px;
       }
       #language-select-button {
         height: 48px;
         padding-left: 20px;
         padding-right: 24px;
         padding-bottom: 0;
       }
       #language-select-text {
           padding-top: 15px;
       }
       #nav-list li a, #nav-list-mobile li a {
         color: {{ theme_color('FOREGROUND_COLOR') }};
         font-weight: bolder;
       }
       h1 {
         font-size: 32px;
       }
       h2 {
         font-size: 28px;
       }
       h3 {
         font-size: 18px;
       }
       p {
         font-size: 16px;
       }
       .button {
         font-size: 14px;
       }
       .social-button:first-child {
         margin-right: 16px !important;
       }
       #social-button-container {
         justify-content: center !important;
       }
       #header-container {
         padding-top: 7%;
         padding-bottom: 5%;
       }
       .details-container li {
         font-size: 16px;
       }
       #site-logo > img {
         padding-top: 10px;
         padding-bottom: 10px;
       }
     }

     /* desktop */
     @media (min-width: 1123px) {
       .onion-url-desktop {
         display: inline-block !important;
       }
       .onion-url-mobile {
         display: none !important;
       }
       .circle-bg {
         width: 400px;
         height: 400px;
       }
       #nav-list {
         margin-top: 0;
         padding-top: 0;
         display: flex !important;
       }
       #nav-list-mobile {
         display: none;
       }
       #site-logo > img {
         height: 96px;
       }
     }

     /* mobile */
     @media(max-width: 650px) {
       #download-tor-button {
         text-align: center;
       }
       div.onion-url {
         text-align: center;
         padding-top: 16px;
         padding-bottom: 16px;
       }
       #site-intro {
         width: unset !important;
         padding-top: 15% !important;
       }
       #steps-container > div.parent {
         flex-direction: column-reverse !important;
       }
       .step-text {
         width: 100%;
       }
       .social-button {
         display: block;
       }
       .social-button:not(last-child) {
         margin-bottom: 2%;
       }
       #social-button-container {
         flex-direction: column;
       }
       #header-image {
         display: none !important;
       }
       #header-container {
         display: block;
       }
       #header-container > div.child:first-child {
         display: block !important;
         width: 90vw;
         margin: 0 auto !important;
         padding-top: 2%;
       }
       #page-content {
         width: 90vw;
       }
       #language-dropdown {
         width: 90vw;
         padding: 15% 15% 15% 15%;
       }
       #language-select {
         margin-top: 3.5% !important;
       }
       #language-select-button {
         height: 40px;
       }
       #language-select-text {
         padding-top: 12px !important;
       }
       /* center step images for mobile */
       #steps-container div.child > img {
         display: block;
         margin: 0 auto;
       }
       .circle-bg {
         left: 0;
         right: 0;
         margin: 0 auto;
       }
       .details-container li {
         font-size: 14px;
       }
       p {
         font-size: 14px;
       }
       summary {
         font-size: 0.8em !important;
       }
       #site-logo > img {
         padding-top: 10px;
         padding-bottom: 10px;
       }
       #nav-list-mobile {
         padding: 5% 0 5% 0 !important;
       }
     }

     .social-button img {
       height: 20px;
       width: 20px;
       padding: 10px;
       padding-top: 10px;
       padding-top: 10px;
       padding-top: 5px;
       transform: translateY(13px);
       filter: invert(100%) sepia(0%) saturate(7468%) hue-rotate(246deg) brightness(105%) contrast(101%);
       background-size: contain;
       display: inline-block;
     }

     #social-button-container {
       justify-content: space-around;
       margin-top: 40px;
     }

     #social-button-container div a {
       margin: 10px;
     }

     #language-select {
       margin-top: 1%;
       border: none;
     }
     #language-select i.chevron-down {
       filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(258deg) brightness(104%) contrast(102%);
       width: 19px;
       margin-right: 2px;
     }
     #language-dropdown {
       background-color: white;
       position: absolute;
       box-sizing: border-box;
       right: 2%;
       display: none;
       border-radius: 15px;
       z-index: 1;
       box-shadow: 0 0 20px 0 rgba(0,0,0, .2);
     }
     .dropdown-item {
       display: block;
       text-decoration: none;
       color: black;
       padding-left: 24px;
       padding-right: 24px;
     }
     .dropdown-item:not(:first-child) {
       padding-top: 10px;
     }
     .dropdown-item:first-child {
       padding-top: 24px;
     }
     .dropdown-item:not(:last-child) {
       padding-bottom: 10px;
     }
     .dropdown-item:last-child {
       padding-bottom: 24px;
     }
     #language-select-button {
       border: none;
       width: 100px;
     }
     #language-select-text {
       padding-top: 17px;
     }

     #site-description {
       margin-top: 2%;
       margin-bottom: 2%;
     }
     #page-content h2 {
       margin-top: 0;
     }

     .onion-url-desktop .onion-url-span-uncopied {
       display: none;
     }
     .onion-url-desktop .onion-url-span-copied {
       display: none;
       margin-top: 15px !important;
     }

     .onion-url-mobile {
       width: max-content;
     }
     .onion-url-mobile .onion-url-span-uncopied {
       display: none;
       transform: translateY(-7px);
     }
     .onion-url-mobile .onion-url-span-copied {
       display: none;
       margin-top: 7px;
     }

     .consent-banner {
       display: none;
       left: 0;
       right: 0;
       bottom: 0;
       padding: 1em;
       position: fixed;
       background-color: {{ theme_color('ANALYTICS_BACKGROUND_COLOR') }};
       margin: 2% auto;
       width: 92vw;
       border-radius: 13px;
     }

     .consent-banner a p {
       margin-top: 15px;
     }

     .consent-buttons {
       float: right;
     }

     #consent-ok {
       margin-right: 20px;
     }

     #consent-cancel {
       background-color: inherit;
       box-shadow: inherit;
       color: {{ theme_color('FOREGROUND_COLOR') }};
     }
    </style>
