<div class="alert">
    <i class="icon-mic text-lg"></i>
    <span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>

.alert {
    @apply bg-gray-500;
    @apply text-white;
    @apply text-sm;
    @apply py-5;
    @apply px-9;
    @apply rounded-md;
    @apply flex;
    @apply break-words;
    @apply w-full;
    @apply space-x-4;
    @apply items-center;
    @apply justify-center;
}

<div class="alert-primary">
    <i class="icon-mic text-lg"></i>
    <span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>

.alert-primary>.link {
    @apply text-white;
}

<button class="btn">Take back your freedom</button>

.btn {
    @apply px-10;
    padding-top   : 0.8rem;
    padding-bottom: 0.8rem;
    @apply bg-gray-500;
    @apply rounded-full;
    @apply uppercase;
    @apply font-semibold;
    @apply text-white;
    @apply text-center;
    @apply text-xs;
    @apply inline-flex;
    @apply items-center;
    @apply leading-normal;
    @apply whitespace-normal;
    @apply cursor-pointer;
    /* @apply hover-scale-in; */
}

.btn[disabled],
.btn[disabled],
.btn[disabled],
.btn[disabled] {
    @apply bg-safing-gray-100;
    @apply text-safing-gray-400;
    @apply cursor-not-allowed;
}

.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i {
    @apply text-safing-gray-400;
}

.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover {
    @apply transform;
    @apply scale-100;
}

.btn i,
.btn i,
.btn i,
.btn i {
    @apply align-baseline;
}

<button class="btn-primary">Take back your freedom</button>

.btn-primary {
    @apply btn;
    @apply bg-safing-blue-500;
}

<button class="btn-secondary">Take back your freedom</button>

.btn-secondary {
    @apply btn;
    @apply bg-black;
}

<div class="card">
    <label class="card-label" for="card-toggle-anchor-2">
        <div class="wrapper-left">
            <div class="tag-list">
                <span class="tag-spn">
                    SPN
                </span>
            </div>
            <div class="card-title">
                <i class="icon-tick text-green-500"></i>
                <h1 class="title">Create RSS Feeds</h1>
            </div>
        </div>
        <div class="wrapper-right">
            <div class="circular-profile" tooltip="David">
                <img src="https://safing.io/assets/img/profiles/david.png">
            </div>
            <i class="icon-arrow"></i>
        </div>
    </label>
    <input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
    <div class="card-dropdown-toggle">
        <div class="card-dropdown-content">
            <p>The Assignment:</p>
            <br>
            <p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.</p>
        </div>
    </div>
</div>

.card,
.card-extended {
    @apply h-max ;
    @apply max-w-7xl;
    @apply block;

    @apply text-white ;
    @apply rounded-lg;

    @apply bg-white ;
    @apply card-shadow;
}

.card-extended .card {
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    border-top: solid 1px rgba(0, 0, 0, 0.15);

    @apply rounded-none;

    margin-bottom: 2.5rem;
}


.card-extended > .card-label,
.card > .card-label {
    @apply z-10;
    @apply flex;

    @apply pl-8;
    @apply pr-8;

    @apply pt-8;
    @apply pb-11;
    @apply cursor-pointer;
}

.card-extended .card .card-label { 
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1.5rem;
    padding-top: 1rem;

}

.card-extended .wrapper-left,
.card .wrapper-left {
    @apply w-full;
}

.card-extended .tag-list,
.card .tag-list {
    @apply flex;
    @apply items-center;
    @apply m-0;
    @apply p-0;
}

.card-extended .card .card-title {
    @apply pt-0;
}

.card-extended .card-title,
.card .card-title {
    @apply flex;
    @apply items-center;

    @apply w-full;
    @apply pt-6;
}

.card-extended .card-title [class^='icon'],
.card-extended .card-title [class*=' icon'],
.card-extended .card-title [class^='icon-'],
.card-extended .card-title [class*=' icon-'],
.card .card-title [class^='icon'],
.card .card-title [class*=' icon'],
.card .card-title [class^='icon-'],
.card .card-title [class*=' icon-'] {
    @apply text-xl;
}

.card-extended .card-title .title,
.card .card-title .title {
    @apply text-black;
    @apply pl-3;
    @apply text-lg;
}

.card-extended .card .title {
    @apply pl-0;
    @apply text-md;
    @apply opacity-50;
}

.card-extended .wrapper-right,
.card .wrapper-right {
    @apply flex;
    @apply justify-end;
    @apply w-max;
    @apply items-center;
    @apply space-x-4;
}
    
.card-extended .icon-arrow,
.card .icon-arrow {
    @apply text-sm;
    @apply font-normal;
    @apply text-black;

    @apply transform;
    @apply rotate-180;
}

.card-extended .card .card-dropdown-toggle {
    @apply pb-0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.card-extended .card-dropdown-toggle,
.card .card-dropdown-toggle {
    @apply pb-14;
    @apply pl-8;
    @apply pr-8;
    @apply hidden;
    @apply cursor-auto;
}

.card-extended .card-dropdown-content > h1 {
    color: #000;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 1.5rem;
}

.card-extended .card-dropdown-content > p {
    color: #545454;
    margin-top: 1rem;
}

.card-extended .card p {
    margin-top: 0;
}

.card-extended .card-dropdown-content {
    @apply text-black ;
    @apply opacity-100;
    @apply text-md;
    @apply pl-0;
    @apply pb-4;
}

.card-extended .card .card-dropdown-content {
    color: #545454;
    opacity: 1;
}

.card .card-dropdown-content {
    @apply text-black ;
    @apply opacity-50;
    @apply text-md;
    @apply pl-0;
}

.card-input-toggle {
    @apply hidden;
}

.card-input-toggle:checked+.card-dropdown-toggle {
    @apply block;
}

.card-shadow {
    @apply relative;
}

.card-shadow::after {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
    content: '';
    @apply h-full;
    @apply left-0;
    @apply absolute;
    @apply top-0;
    @apply w-full;
    z-index: -1;
}

<div class="card-extended">
    <label class="card-label" for="card-toggle-anchor-10">
        <div class="wrapper-left">
            <div class="tag-list">
                <span class="tag-spn">
                    SPN
                </span>
            </div>
            <div class="card-title">
                <i class="icon-tick text-green-500"></i>
                <h1 class="title">Create RSS Feeds</h1>
            </div>
        </div>
        <div class="wrapper-right">
            <div class="circular-profile" tooltip="David">
                <img src="https://safing.io/assets/img/profiles/david.png">
            </div>
            <i class="icon-arrow"></i>
        </div>
    </label>
    <input class="card-input-toggle" id="card-toggle-anchor-10" type="checkbox">
    <div class="card-dropdown-toggle">
        <div class="card-dropdown-content">
            <div class="card">
                <label class="card-label" for="card-toggle-anchor-10-1">
                    <div class="wrapper-left">
                        <div class="card-title">
                            <h1 class="title">Assignment</h1>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <i class="icon-arrow"></i>
                    </div>
                </label>
                <input class="card-input-toggle" id="card-toggle-anchor-10-1" type="checkbox">
                <div class="card-dropdown-toggle">
                    <div class="card-dropdown-content">
                        <p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work. </p>
                    </div>
                </div>
            </div>
            <h1>Safing Blog RSS Finally Arrived</h1>
            <p>
                This has been a request for over a year. And to be honest, the reason
                we never added this was kinda silly: Since progress update posts
                (like the one you are reading now) heavily rely on CSS tricks in
                order to support noJS, a RSS reader cannot properly format the
                progress update. Instead it displays a rather broken blog post. With
                no easy solution in sight, the RSS feed just got postponed indefinitely.
                But after finally revisiting this topic we came up with a simple solution.
                Just add a disclaimer to progress update posts that they are only viewable
                in the web-view. Problem solved. Proper communication, and finally a RSS
                feed everyone can subscribe to.
            </p>
        </div>
    </div>
</div>

<div class="grid grid-flow-col grid-flow-col-dense grid-rows-3 gap-4 ">
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-arrow text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-cog-ring text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-cross text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-github text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-heart text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-info text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-linkedin text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-mic text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-play text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-podcast text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-reddit text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-rss text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-shield text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-tick text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-twitter text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-up-arrow text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-users text-lg"></i>
    </div>
    <div class="bg-white p-4 w-max m-auto">
        <i class="icon-warning text-lg"></i>
    </div>
    
</div>

<input class="input-rounded w-full" type="email" name="email" required="" placeholder="email">

.input {
  @apply bg-gray-200;

  @apply appearance-none;
  @apply text-black;
  @apply focus:outline-none;
  @apply placeholder-red-600;
}

.input-rounded {
  @apply bg-gray-400;
  @apply rounded-full;
  
  @apply placeholder-gray-200;

  @apply text-white;

  @apply px-6;
  @apply py-2; 
}

.input-rounded-primary{
  @apply input-rounded;
  
  @apply bg-safing-gray-800;
  
  @apply placeholder-gray-400;

  @apply text-white;
}

<input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">

<a class="link">Take back your freedom</a>

.link {
    @apply text-gray-500;
    @apply text-left;
    @apply font-medium;
    white-space    : break-spaces;
    /* @apply hover: opacity-60; */
    @apply transition;
    @apply duration-100;
    @apply ease-in-out;
}

.link i {
    /* tailwind "sub" not supported */
    vertical-align: sub;
}

<a class="link-primary-external">Take back your freedom</a>

.link-primary-external {
    @apply link-primary;
}

.link-primary-external::after {
    @apply icon;
    @apply inline-block;
    @apply font-bold;

    content: '\e903';
    @apply text-base;
    transform: rotate(30deg) translateY(2px) translateX(1px) scale(0.75);
}

<a class="link-primary">Take back your freedom</a>

.link-primary {
    @apply link;
    @apply text-safing-blue-500;
}

<a class="link-secondary">Take back your freedom</a>

.link-secondary {
    @apply link;
    @apply text-black;
    /* @apply hover: opacity-60; */
}

<div class="circular-profile" tooltip="David">
    <img src="https://safing.io/assets/img/profiles/david.png">
</div>

.circular-profile {
    @apply flex-shrink-0;
    @apply -mt-1;
    @apply w-max;
  }

.circular-profile img {
    @apply inline-block;
    @apply h-6;
    @apply w-6;
    @apply rounded-full;
    @apply text-white;
    @apply border-2;
    @apply border-white;

}

.circular-profile:hover img {
    @apply transform;
    @apply hover:scale-110;
    @apply transition;
    @apply duration-150;
    @apply ease-in-out;
    @apply shadow-2xl;
}

<div class="horizontal-line"></div>

<span class="tag">
    SPN
</span>

.tag {
    @apply inline-flex;
    @apply items-center;
    @apply px-3;
    @apply py-1;
    @apply rounded-full;
    @apply text-sm;
    @apply font-medium;
    @apply leading-5;
    @apply mr-2;
}

<span class="tag-spn">
    SPN
</span>

.tag-spn {
    @apply tag;
    @apply bg-green-100;
    @apply text-green-800;
}

<span class="tag-website">
    Website
</span>

.tag-website {
    @apply tag;
    @apply bg-orange-100;
    @apply text-orange-800;
}

<div tooltip="Cool Tooltip!" class="bg-white">
    hover over me!
</div>

[tooltip] {
    @apply relative;
}

[tooltip]::before,
[tooltip]::after {
    @apply hidden;
    @apply text-sm;
    @apply left-1/2;
    @apply opacity-0;
    @apply pointer-events-none;
    @apply absolute;
    @apply normal-case;
    transform: translate(-50%, -0.5em);
    @apply select-none;
}

[tooltip]::before {
    border: 5px solid transparent;
    @apply border-b-0;
    border-top-color: #333;
    @apply bottom-full;
    content: '';
    z-index: 1001;
}

[tooltip]::after {
    background: #333;
    border-radius: 100px;
    bottom: calc(100% + 5px);
    box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
    @apply text-white;
    content: attr(tooltip);
    font-family: Helvetica, sans-serif;
    max-width: 21em;
    min-width: 3em;
    overflow: hidden;
    padding: 1ch 2ch;
    @apply text-center;
    @apply overflow-ellipsis;
    @apply whitespace-nowrap;
    z-index: 1000;
}

[tooltip='']::before,
[tooltip='']::after {
    @apply hidden !important;
}

[tooltip]:hover::before,
[tooltip]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
    @apply block;
}

@keyframes tooltips-vert {
    to {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}

<footer class="footer">
    <div class="footer-form-wrapper">
        <span class="footer-form-title">Stay Connected via Newsletter</span>
        <form class="footer-form">
            <div class="footer-form-subscribe">
                <input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">
                <input class="btn-primary" type="submit" value="Subscribe">
            </div>
            <div class="footer-form-legal">
                <input type="checkbox" id="consent_text" name="consent_text" value="yes" required="">
                <div>
                    <label class="consent opacity-55 text-safing-gray-500" for="consent_text">
                        I agree that Safing &
                        <a class="link-primary-external" href="https://rapidmail.de" target="_blank">rapidmail.de</a>
                        may process and use the email for newsletter purposes.
                    </label>
                </div>
            </div>
        </form>
    </div>
    <div class="footer-wrapper">
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Company</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> About Us </a>
                    <a href="#" class="footer-link"> Business Model </a>
                    <a href="#" class="footer-link"> Ownership </a>
                    <a href="#" class="footer-link"> We're Hireing </a>
                    <a href="#" class="footer-link"> Get Help </a>
                </div>
            </div>
        </div>
        <div class="vertical-line"></div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Community</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> What's Next? </a>
                    <a href="#" class="footer-link"> Blog </a>
                    <a href="#" class="footer-link"> Podcast </a>
                    <a href="#" class="footer-link"> Videos </a>
                </div>
                <div class="footer-links-right">
                    <a href="#" class="footer-link"> Code of Conduct </a>
                    <a href="#" class="footer-link"> Github </a>
                    <a href="#" class="footer-link"> Reddit </a>
                    <a href="#" class="footer-link"> Twitter </a>
                </div>
            </div>
        </div>
        <div class="vertical-line"></div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>Portmaster</span>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> Discover </a>
                    <a href="#" class="footer-link"> Documentation </a>
                    <a href="#" class="footer-link"> Source Code </a>
                    <a href="#" class="footer-link"> Backlog </a>
                </div>
            </div>
        </div>
        <div class="footer-category">
            <div class="footer-category-title">
                <span>SPN</span>
                <div class="horizontal-line"></div>
            </div>
            <div class="footer-links">
                <div class="footer-links-left">
                    <a href="#" class="footer-link"> Discover </a>
                    <a href="#" class="footer-link"> Whitepaper </a>
                    <a href="#" class="footer-link"> Source Code </a>
                    <a href="#" class="footer-link"> Backlog </a>
                </div>
                <div class="footer-links-right">
                    <a href="#" class="footer-link"> vs Tor </a>
                    <a href="#" class="footer-link"> vs VPNs </a>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-legal">
        <div class="footer-legal-wrapper">
            <span class="footer-legal-copyright">
                © 2021 Safing ICS Technologies GmbH
            </span>
            <div class="footer-legal-links">
                <a href="#" class="footer-legal-link"> Terms of Service </a>
                <a href="#" class="footer-legal-link"> Privacy Policy </a>
                <a href="#" class="footer-legal-link"> Contact & Notice </a>
            </div>
        </div>
        <span class="footer-legal-extra">
            Companies mentioned are by way of example and are an opinion only, not based on fact.
        </span>
    </div>
</footer>

.footer {
    @apply bg-black;
    @apply p-8;
}

.footer-wrapper {
    @apply grid;
    @apply mx-auto;
    @apply grid-rows-4;
    @apply grid-cols-1;
    @apply grid-flow-col-dense;
    @apply grid-flow-row-dense;
    @apply justify-center;
    @apply max-w-screen-sm;
    @apply gap-y-14;

    @apply sm:grid-rows-2;
    @apply sm:grid-cols-2;

    @apply md:justify-around;

    @apply lg:grid-cols-6-md;
    @apply lg:grid-rows-none;
    @apply lg:max-w-screen-xl;
    @apply lg:gap-y-0;
}

.footer-wrapper .footer-links-right,
.footer-wrapper .footer-links-left {
    @apply space-y-4;
    @apply space-x-0;
}

.footer .footer-link {
    @apply block;
    @apply text-white;
    @apply text-base;
    @apply hover-opacity-out;
    @apply w-max;

    @apply lg:text-md;
}

.footer .footer-links {
   @apply flex;
   @apply space-x-12;
}

.footer .footer-category-title {
    @apply flex;
    @apply items-center;
    @apply mb-2;
}

.footer .footer-category-title span {
    @apply block;
    @apply text-white;
    @apply text-xl;
    @apply mb-6;
    @apply pr-10;
}

.footer .horizontal-line {
    @apply border-t-2;
    @apply border-white;
    @apply w-full;
    opacity: 0.25;
    height: 20px;
}

.footer .vertical-line {
    @apply hidden;
    @apply border-r-2;
    @apply border-white;
    opacity: 0.25;
    height: 200px;
    width: 2px;

    @apply lg:block;
}

.footer .footer-legal {
    @apply text-sm;
    @apply mt-16;
    @apply mb-4;
}

.footer .footer-legal-wrapper {
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;

    @apply lg:flex;
}

.footer .footer-legal-copyright {
    @apply block;
    @apply leading-6;
    @apply text-white;
    @apply opacity-30;
    @apply mb-4;
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;

    @apply lg:mb-0;
    @apply lg:mx-0;
    @apply lg:text-center;
}

.footer .footer-legal-links {
   @apply block;
   @apply space-y-2;
   @apply space-x-0;
   @apply w-full;

   @apply sm:flex;
   @apply sm:space-y-0;
   @apply sm:space-x-12;
   @apply sm:w-max;
   @apply sm:mx-auto;

   @apply lg:mr-0;
   @apply lg:ml-12;
}

.footer .footer-legal-link {
    @apply block;
    @apply text-white;
    @apply text-base;
    @apply hover-opacity-out;
    @apply w-max;

    @apply lg:text-sm;
}

.footer .footer-legal-extra {
    @apply block;
    @apply leading-6;
    @apply text-white;
    @apply opacity-30;
    @apply mt-5;
    @apply w-full;

    @apply sm:w-max;
    @apply sm:mx-auto;
    
    @apply md:text-center;
}

.footer .footer-form-wrapper {
    @apply mt-3;
    @apply mb-8;
    @apply mx-auto;
    @apply self-center;
    @apply max-w-2xl;
    @apply text-center;
    @apply space-y-2;

    @apply md:p-12;

    @apply lg:space-y-0;
    @apply lg:text-left;
}

.footer .footer-form-title {
    @apply block;
    @apply text-white;
    @apply text-xl;
    @apply font-bold;
    @apply w-full;
    @apply mx-auto;

    @apply sm:w-max;

    @apply lg:mx-0;
}

.footer .footer-form-subscribe {
    @apply block;
    @apply lg:flex;
    @apply items-center;
    @apply py-5;
    @apply space-x-3;
    @apply space-y-4;

    @apply w-full;

    @apply sm:mx-auto;

    @apply lg:space-y-0;
    @apply lg:mx-0;
}

.footer .footer-form-legal {
    @apply block;
    @apply space-x-2;
    @apply max-w-md;
    @apply mx-auto;
    @apply space-y-3;
    @apply space-x-0;
    @apply select-none;

    @apply lg:space-y-0;
    @apply lg:space-x-3;
    @apply lg:flex;
    @apply lg:mx-0;
    @apply lg:max-w-xl;
}

.footer .footer-form-legal .link-primary-external {
    @apply table-cell;
    padding-left: 3px;
}

<div class="mardown-container">
    <!-- Markdown Example  -->
    
    <blockquote>
        <p>blockquote</p>
    </blockquote>

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>

    <p><em>em</em></p>

    <p><strong>strong</strong></p>

    <p><code>code</code></p>
    
    <p>But who pays for all of this? That is such a critical question to ask in order to understand where a company stands and where it is heading.</p>

    <p><a href="https://world.hey.com/jonas/how-money-dictates-design-decisions-5e866cd9">External Link</a></p>
    
    <p><a href="/ownership/#influences">Internal Link</a></p>

    <p><img src="https://safing.io//assets/img/blog/breaking_chain.png" alt="image displays a chain with many strong links (no meta-data, security, usability) but still breaking at its weak link (business-model))"></p>

    
    <!-- Markdown Example -->
</div>

<nav class="nav">
    <div class="nav-left">
        <a href="" class="nav-logo-wrapper">
            <!-- turn this into a font icon -->
            <svg class="h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
                <g data-name="Main" fill-rule="evenodd">
                    <path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
                    <path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
                    <path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6"></path>
                    <path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)"></path>
                </g>
            </svg>
            <span>Safing<span>.io</span></span>
        </a>
    </div>
    <label class="nav-right-burger" for="nav-toggle-visable">
        <!-- turn this into a font icon -->
        <svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            <path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
    </label>
    <input class="nav-toggle-burger" id="nav-toggle-visable" type="checkbox">
    <div class="nav-right">
        <div class="nav-right-links">
            <a href="" class="nav-link"> Portmaster </a>
            <a href="" class="nav-link"> Docs </a>
            <a href="" class="nav-link"> Source Code </a>
            <a href="" class="nav-link"> About </a>
            <a href="" class="nav-link"> What's Next </a>
            <a href="" class="nav-link"> Get Help </a>
        </div>
        <div class="nav-right-actions">
            <a href="" class="nav-link"> Sign In </a>
            <a href="" class="btn-primary"> Sign Up </a>
        </div>
    </div>
</nav>

.nav {
    @apply bg-black;
    @apply flex;
    @apply p-6;

    @apply lg:pr-12;
    @apply lg:pl-12;
}

.nav > .nav-left {
    @apply flex;
    @apply flex-auto;
    @apply justify-start;
    @apply w-1/5;
}

.nav-left > .nav-logo-wrapper {
    @apply flex;
    @apply items-center;
    @apply hover-opacity-in;
}

.nav-logo-wrapper > span {
    @apply text-white;
}

.nav-logo-wrapper > span > span {
    @apply opacity-50;
}

.nav > .nav-right-burger {
    @apply z-20;
    @apply block;

    @apply lg:hidden;
}

.nav-right-burger:hover {
    @apply cursor-pointer;
}

.nav > .nav-toggle-burger {
    @apply hidden;
}

.nav-toggle-burger:checked+.nav-right {
    @apply grid;
}

@media (min-width: 1024px) {
.nav-toggle-burger:checked+.nav-right {
    @apply flex;
}
}

.nav > .nav-right {
    @apply hidden;
    @apply bg-black;
    @apply absolute;
    @apply content-center;
    @apply inset-0;
    @apply h-full;
    @apply p-10;
    @apply z-10;
    @apply w-full;

    @apply lg:flex;
    @apply lg:flex-auto;
    @apply lg:relative;
    @apply lg:justify-end;
    @apply lg:p-0;
    @apply lg:h-auto;
}

.nav-right > .nav-right-links {
    @apply space-x-0;
    @apply space-y-11;
    @apply items-baseline;
    @apply justify-center;
    @apply text-center;

    @apply lg:flex;
    @apply lg:space-y-0;
    @apply lg:space-x-7;
    @apply lg:items-center;
}

.nav .nav-link {
    @apply block;
    @apply text-white;
    @apply font-bold;
    @apply text-base;

    @apply lg:text-sm;
}

.nav-right-links > .nav-link {
    @apply hover-opacity-in;
}

.nav-right-actions > .nav-link {
    @apply hover-opacity-out;
}

.nav-right > .nav-right-actions {
    @apply space-y-11;
    @apply items-baseline;
    @apply ml-0;
    @apply mt-11;
    @apply text-center;

    @apply md:items-center;

    @apply lg:mt-0;
    @apply lg:ml-11;
    @apply lg:flex;
    @apply lg:space-y-0;
    @apply lg:space-x-5;
}

.nav-right-actions > .btn-primary {
    @apply w-full;
    @apply py-3;

    @apply lg:w-auto;
}