@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-SemiBold.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-Light.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-Bold.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-Black.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-ExtraLight.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/SourceSansPro/SourceSans3-Regular.woff2') format('woff2'),
        url('/fonts/SourceSansPro/SourceSans3-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.mac-platform .windows-only {
    display: none;
}

.windows-platform .mac-only {
    display: none;
}

.product-title {
    color: red;
}

.product-page__content {}

.product-page__content a:not(.no-underline) {
    text-decoration: underline;
}

code {
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.4;
    font-family: monospace;
    color: #01004B;
    border-radius: 3px;
    line-break: anywhere;
    background-color: #EEE;
    padding: 2px;
}

@media (min-width: 1024px) {
    .blog-grid>*:nth-child(5n + 3) {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .blog-grid>*:nth-child(5n + 4) {
        grid-column-start: 3;
        grid-column-end: 5;
    }

    .blog-grid>*:nth-child(5n + 5) {
        grid-column-start: 5;
        grid-column-end: 7;
    }

    .blog-grid>*:nth-child(5n + 1) {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    .blog-grid>*:nth-child(5n + 2) {
        grid-column-start: 4;
        grid-column-end: 7;
    }
}

.submenu-pointer {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    bottom: 0;
    left: calc(50% - 10px);
}

.toggle-input {
    display: none;
}

.toggle-input:checked~.toggle-display {
    display: block;
}

.toggle-input:not(:checked)~.toggle-display {
    display: none;
}

ul {
    list-style: none;
    padding-left: 0;
}

ul li ul {
    padding-left: 16px;
}

#navigation-bar a:active:hover,
#pp-content a:active:hover {
    text-decoration: none;
}

#navigation-bar a:active,
#pp-content a:active {
    color: #1642ad;

    * {
        color: #1642ad;
    }
}