/* Fonts */

@font-face {
    font-family: "Public Sans Thin";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Thin.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Thin.woff2") format("woff");
}

@font-face {

    font-family: "Public Sans Light";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Light.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Light.woff") format("woff");
}

@font-face {

    font-family: "Public Sans Regular";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Regular.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Regular.woff") format("woff");
}

@font-face {

    font-family: "Public Sans Medium";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Medium.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Medium.woff") format("woff");

}

@font-face {
    font-family: "Public Sans Bold";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Bold.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Bold.woff") format("woff");
}

@font-face {
    font-family: "Public Sans Black";
    src: url("/assets/fonts/public-sans/webfonts/PublicSans-Black.woff2") format("woff2"),
        url("/assets/fonts/public-sans/webfonts/PublicSans-Black.woff") format("woff");
}

/* Root settings */

:root {
    --color-1: #5b029c;
    --color-2: #212121;
    --color-3: #c9c9c9;
    --color-4: #ffffff;
    --color-5: #b548ff;
    --color-6: #f7ecff;
    --gradient-1: linear-gradient(135deg, rgba(91, 2, 156, 1) 13%, rgba(181, 72, 255, 1) 73%);
    --gradient-2: linear-gradient(135deg, rgba(255, 255, 255, 0.15168065517222518) 13%, rgba(181, 72, 255, 0.05644264541754207) 73%);
    --font-1: "Public Sans", sans-serif;
    --weight-1: 400;
    --weight-2: 700;
    --size-1: 0;
    --size-2: .5rem;
    --size-3: 1rem;
    --size-4: 1.2rem;
    --size-5: 2rem;
    --size-6: 3rem;
    --size-7: .25rem;
    --size-8: .625rem;
    --size-9: 4.675rem;
    --size-10: 1.5625rem;
    --size-11: 12.5rem;
    --size-12: 18.75rem;
    --size-13: 0.0625rem;
    --size-14: 15rem;
}

/* Responsive typography */

@media (max-width: 768px) {
    h1 {
        font-size: 2.8rem !important;
    }

    h2 {
        font-size: 1.8rem !important;

    }

    h3 {
        font-size: 1.4rem !important;
    }

    p.lead {
        font-size: 1.2rem;
    }

    .h1 {
        font-size: 3.4rem !important;
    }

    .h2 {
        font-size: 2.6rem !important;
    }

    .h3 {
        font-size: 1.8rem !important;
    }

    .h4 {
        font-size: 1.6rem !important;
    }

    .h5 {
        font-size: 1.4rem !important;
    }

    .h6 {
        font-size: 1.1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 992px) {

    h1 {
        font-size: 4.1rem !important;
    }

    h2 {
        font-size: 2.2rem !important;

    }

    h3 {
        font-size: 1.6rem !important;
    }

    p.lead {
        font-size: 1.6rem;
    }

    .h1 {
        font-size: 4.2rem !important;
    }

    .h2 {
        font-size: 3rem !important;
    }

    .h3 {
        font-size: 2rem !important;
    }

    .h4 {
        font-size: 1.6rem !important;
    }

    .h5 {
        font-size: 1.4rem !important;
    }

    .h6 {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {

    h1 {
        font-size: 4rem !important;
    }

    h2 {
        font-size: 2.4rem !important;

    }

    h3 {
        font-size: 1.8rem !important;
    }

    p.lead {
        font-size: 1.8rem;
    }

    .h1 {
        font-size: 5rem !important;
    }

    .h2 {
        font-size: 3.8rem !important;
    }

    .h3 {
        font-size: 2.4rem !important;
    }

    .h4 {
        font-size: 1.6rem !important;
    }

    .h5 {
        font-size: 1.4rem !important;
    }

    .h6 {
        font-size: 1.2rem !important;
    }
}

@media (min-width: 1200px) {

    h1 {
        font-size: 4rem !important;
    }

    h2 {
        font-size: 2.4rem !important;

    }

    h3 {
        font-size: 1.8rem !important;
    }

    p.lead {
        font-size: 2rem;
    }

    .h1 {
        font-size: 5rem !important;
    }

    .h2 {
        font-size: 3.8rem !important;
    }

    .h3 {
        font-size: 2.4rem !important;
    }

    .h4 {
        font-size: 1.6rem !important;
    }

    .h5 {
        font-size: 1.4rem !important;
    }

    .h6 {
        font-size: 1.2rem !important;
    }

}

/* General */

body {
    background-color: var(--color-4);
}

body {
    color: var(--color-2);
    font-family: var(--font-1);
    font-size: var(--size-4);
    font-weight: var(--weight-1);
}

a, a:visited, a:hover {
    color: var(--color-1);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--color-2);
    font-family: var(--font-1) !important;
    font-weight: var(--weight-2);
    letter-spacing: -.02em;
}

/* Theme */

.logo, .navbar-light, .navbar, .bg-light, .footer {
    background: var(--gradient-1);
}

/* Navbar */

.navbar {
    color: var(--color-4);
    border-radius: var(--color-1);
    border-bottom-left-radius: var(--size-8);
    border-bottom: var(--size-8) solid var(--color-5);
}

a.navbar-brand:hover {
    background: none;
}

.navbar-brand img {
    height: 30px;
}

.navbar-light .navbar-toggler {
    color: var(--color-4);
    border-color: var(--color-4);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar a, .navbar li.active a, .navbar li.active a:visited {
    color: var(--color-4) !important;
    font-weight: var(--weight-1);
}

.navbar-brand {
    font-family: var(--font-1);
    font-weight: var(--weight-2) !important;
    text-transform: uppercase;
}

.lead {
    font-family: var(--font-1);
    font-size: var(--size-5);
    color: var(--color-2);
    font-weight: var(--weight-1);
}

/* Cards */

.clean .card {
    margin: var(--size-1);
    padding: var(--size-1);
    border: none;
}

.card {
    margin-bottom: var(--size-3) !important;
}

.card-deck .col, .card-deck .col-1, .card-deck .col-10, .card-deck .col-11, .card-deck .col-12, .card-deck .col-2, .card-deck .col-3, .card-deck .col-4, .card-deck .col-5, .card-deck .col-6, .card-deck .col-7, .card-deck .col-8, .card-deck .col-9, .card-deck .col-auto, .card-deck .col-lg, .card-deck .col-lg-1, .card-deck .col-lg-10, .card-deck .col-lg-11, .card-deck .col-lg-12, .card-deck .col-lg-2, .card-deck .col-lg-3, .card-deck .col-lg-4, .card-deck .col-lg-5, .card-deck .col-lg-6, .card-deck .col-lg-7, .card-deck .col-lg-8, .card-deck .col-lg-9, .card-deck .col-lg-auto, .card-deck .col-md, .card-deck .col-md-1, .card-deck .col-md-10, .card-deck .col-md-11, .card-deck .col-md-12, .card-deck .col-md-2, .card-deck .col-md-3, .card-deck .col-md-4, .card-deck .col-md-5, .card-deck .col-md-6, .card-deck .col-md-7, .card-deck .col-md-8, .card-deck .col-md-9, .card-deck .col-md-auto, .card-deck .col-sm, .card-deck .col-sm-1, .card-deck .col-sm-10, .card-deck .col-sm-11, .card-deck .col-sm-12, .card-deck .col-sm-2, .card-deck .col-sm-3, .card-deck .col-sm-4, .card-deck .col-sm-5, .card-deck .col-sm-6, .card-deck .col-sm-7, .card-deck .col-sm-8, .card-deck .col-sm-9, .card-deck .col-sm-auto, .card-deck .col-xl, .card-deck .col-xl-1, .card-deck .col-xl-10, .card-deck .col-xl-11, .card-deck .col-xl-12, .card-deck .col-xl-2, .card-deck .col-xl-3, .card-deck .col-xl-4, .card-deck .col-xl-5, .card-deck .col-xl-6, .card-deck .col-xl-7, .card-deck .col-xl-8, .card-deck .col-xl-9, .card-deck .col-xl-auto {
    padding-left: var(--color-1) !important;
    padding-right: var(--color-1) !important;
}

.card-group {
    padding-bottom: 1rem;
    padding-top: .5rem;
}

.card h5, .card .h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.card-body {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

div.card-body>i {
    color: var(--color-1);
}

.card-footer {
    background-color: var(--color-6);
}

/* Jumbotron */

.jumbotron {
    background: var(--color-4);
    background: var(--gradient-2);
    border-bottom: var(--size-13) solid var(--color-6);
    border-radius: var(--color-1);
}

/* Main */

main a, main a:visited, .alert a, .alert a:visited {
    text-decoration: underline;
}

main a:hover {
    text-decoration: none;
}

.footer-connect a, .social a {
    text-decoration: none !important;
}

.post h2, .post h3, .post h4 {
    padding-bottom: var(--size-3);
    padding-top: var(--size-3);
}

.post p, .post ul {
    padding-bottom: var(--size-3);
}

blockquote {
    border-left: var(--size-7) solid var(--color-1);
    margin-left: var(--size-5);
    padding-left: var(--size-5);
    padding-right: var(--size-5);
    margin-bottom: var(--size-5);
    margin-top: var(--size-5);
}

/* Pagination */

.pagination li.page-item {
    font-family: var(--font-1);
    font-size: var(--size-3);
}

.page-item.active .page-link {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.pagination a {
    text-decoration: none;
    color: var(--color-2);
}

/* Lists */

.list-group-item {
    border: none;
    padding: var(--size-4) var(--size-3) var(--size-4) var(--size-1);
}

/* Images */

img {
    height: auto;
    max-width: 100%;
}

.img {
    margin-bottom: var(--size-10);
}

p.img-caption {
    font-size: var(--size-3);
    padding: var(--size-3) var(--size-1);
}

img.shadow {
    box-shadow: var(--size-2) var(--size-2) var(--size-3) var(--color-2);
    border: var(--size-13) solid var(--color-2);
    margin-bottom: var(--size-5);
}

img.line {
    border: var(--size-13) solid var(--color-3);
    margin-bottom: var(--size-10);
}

img.sm {
    max-width: var(--size-11);
}

img.md {
    max-width: var(--size-14);
}

img.lg {
    max-width: var(--size-12);
}

.fancy-2 img, img[type="Gamechangers"], .fancy-2 img, img[type="Team"] {
    border-left: var(--size-8) solid var(--color-1);
    border-bottom: var(--size-8) solid var(--color-1);
    border-right: var(--size-8) solid var(--color-6);
    border-top: var(--size-8) solid var(--color-6);
    border-radius: var(--size-1) var(--size-9) var(--size-1) var(--size-9);
}

.fancy-2 img, .fancy-2 img {
    margin-bottom: var(--size-2);
    margin-top: var(--size-2);
}

.fancy-feat {
    background-color: var(--color-1);
    background: var(--gradient-1);
    border-right: var(--size-8) solid var(--color-6);
    border-top: var(--size-8) solid var(--color-6);
    border-left: var(--size-8) solid var(--color-1);
    border-bottom: var(--size-8) solid var(--color-1);
    border-radius: var(--size-1) var(--size-9) var(--size-1) var(--size-9);
    color: var(--color-4);
    padding: var(--size-4);
    margin-bottom: var(--size-3);
    text-align: center;
    padding-top: var(--size-6);
}

.fancy-feat svg {
    fill: var(--color-4);
    min-height: var(--size-11);
    width: 20%;
}

.icon {
    background-color: var(--color-1);
    background: var(--gradient-1);
    border-right: var(--size-8) solid var(--color-6);
    border-top: var(--size-8) solid var(--color-6);
    border-left: var(--size-8) solid var(--color-1);
    border-bottom: var(--size-8) solid var(--color-1);
    border-radius: var(--size-1) var(--size-10) var(--size-1) var(--size-10);
    color: var(--color-4);
    padding: var(--size-6) var(--size-5);
    margin-bottom: var(--size-3);
    text-align: center;
}

/* Breadcrumb */

.nav-link.active, .nav-link+.nav-item::before, .nav a, .nav-link a:visited {
    color: var(--color-2);
}

.nav {
    background-color: var(--color-6);
    border-radius: var(--size-1);
    border-top-left-radius: var(--size-8);
    border-top: var(--size-8) solid var(--color-5);
    font-weight: var(--weight-2);
    margin-bottom: var(--size-1);
    margin-top: var(--size-13);
}

/* Author */

img.author {
    max-width: var(--size-9);
    margin-right: var(--size-2);
}

.author-bio {
    border-top: var(--size-13) solid var(--color-6);
    margin-top: var(--size-5);
    padding-top: var(--size-5);
}

/* Parent */

html:not(html.dark) .thoughts {
    --color-1: #345d96;
    --color-5: #4a77b4;
    --color-6: #ecf1f7;
    --gradient-1: linear-gradient(135deg, #345d96 13%, #4a77b4 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #ecf1f7 73%);
}

html:not(html.dark) .reviews {
    --color-1: #0e4f5c;
    --color-5: #6499af;
    --color-6: #e7f2f5;
    --gradient-1: linear-gradient(135deg, #0e4f5c 13%, #6499af 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #e7f2f5 73%);
}

html:not(html.dark) .radar {
    --color-1: #b50909;
    --color-5: #e52207;
    --color-6: #fde0db;
    --gradient-1: linear-gradient(135deg, #b50909 13%, #e52207 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #fde0db 73%);
}

html:not(html.dark) .gamechangers {
    --color-1: #7a591a;
    --color-5: #c2850c;
    --color-6: #fef0c8;
    --gradient-1: linear-gradient(135deg, #7a591a 13%, #c2850c 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #fef0c8 73%);
}

html:not(html.dark) .evergreen {
    --color-1: #0f6460;
    --color-5: #008480;
    --color-6: #d5fbf3;
    --gradient-1: linear-gradient(135deg, #0f6460 13%, #008480 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #d5fbf3 73%);
}

html:not(html.dark) .innovations {
    --color-1: #6b5947;
    --color-5: #8e704f;
    --color-6: #f5f0e6;
    --gradient-1: linear-gradient(135deg, #6b5947 13%, #8e704f 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #f5f0e6 73%);
}

html:not(html.dark) .labs {
    --color-1: #8b4566;
    --color-5: #c84281;
    --color-6: #f9f0f2;
    --gradient-1: linear-gradient(135deg, #8b4566 13%, #c84281 73%);
    --gradient-2: linear-gradient(135deg, #ffffff 13%, #f9f0f2 73%);
}

/* Previews */

.home-include .preview {
    padding-bottom: var(--size-6);
    padding-top: var(--size-6);
    border-bottom-left-radius: var(--size-8);
}

.home-include .preview:not(.home-include .preview:last-child), .preview.tldr {
    border-bottom: var(--size-3) solid var(--color-1);
}

.preview-include .preview {
    margin-top: var(--size-6);
    padding-bottom: var(--size-6);
    padding-top: var(--size-6);
    border-top: var(--size-3) solid var(--color-1);
    border-top-left-radius: var(--size-8);
}

/* Social */

.social {
    margin-top: var(--size-4);
}

.social a, .social a:active, .social a:visited {
    color: var(--color-2);
    margin-right: var(--size-3);
}

/* Alerts */

.alert {
    border-radius: var(--color-1);
}

.alert-light {
    background-color: var(--color-6);
    color: var(--color-2);
    margin-bottom: var(--size-13);
    margin-top: var(--size-5);
    padding-top: var(--size-5);
    border-bottom-left-radius: var(--size-8);
    border-bottom: var(--size-8) solid var(--color-5);
}

.alert-secondary {
    background-color: var(--color-6);
    color: var(--color-2);
    margin-bottom: var(--size-6);
    margin-top: var(--size-6);
    padding-top: var(--size-5);
    border-bottom-left-radius: var(--size-8);
    border: var(--size-13) solid var(--color-5);
    border-bottom: var(--size-8) solid var(--color-5);
}

.alert-secondary .fa-3x {
    margin: var(--size-3) var(--size-3) var(--size-3) var(--size-1);
}

.alert2 {
    margin-bottom: var(--size-5) !important;
    margin-top: var(--size-1) !important;
}

/* Buttons / nav pills */

.btn-sm {
    padding: var(--size-2) !important;
    font-size: var(--size-3) !important;
}

.btn-primary, a.btn-primary, a.btn-primary:active, a.btn-primary:hover, a.btn-primary:visited {
    background-color: var(--color-1);
    color: var(--color-4);
    font-family: var(--font-1);
    font-size: var(--size-4);
    font-weight: var(--weight-2);
    margin-bottom: var(--size-2);
    margin-top: var(--size-2);
    text-decoration: none;
    border-left: var(--size-7) solid var(--color-5);
    border-bottom: var(--size-7) solid var(--color-5);
    border-right: var(--size-7) solid var(--color-5);
    border-top: var(--size-7) solid var(--color-5);
    border-radius: var(--size-10) var(--size-1) var(--size-10) var(--size-1);
    transition: 1s ease-in-out;
}

a.btn-primary:hover, .categories a.nav-link:hover, .categories a.nav-link:hover {
    background-color: var(--color-5);
    background: var(--color-5);
    border-left: var(--size-7) solid var(--color-5);
    border-bottom: var(--size-7) solid var(--color-5);
    border-right: var(--size-7) solid var(--color-5);
    border-top: var(--size-7) solid var(--color-5);
    border-radius: var(--size-10) var(--size-1) var(--size-10) var(--size-1);
    color: var(--color-4);
}

/* Accordions */

.accordion {
    margin-top: var(--size-5);
}

.accordion .card {
    border: var(--size-1) var(--color-1) solid !important;
}

.accordion .card-header {
    background-color: var(--color-4);
}

.accordion h3 {
    margin: var(--size-1);
    padding: var(--size-1);
}

/* Buttons */

button.btn-link {
    color: var(--color-1);
    font-size: var(--size-4);
    font-weight: var(--weight-2);

}

/* Forms */

.form-control {
    color: var(--color-2);
    border: var(--size-13) solid var(--color-3);
}

label {
    padding-bottom: .5rem;
}

body.home label {
    padding-top: .5rem;
}

/* Buttons */

.btn-outline-dark {
    background-color: var(--color-1);
    border-color: var(--color-1);
    color: var(--color-4) !important;
    transition: .5s;
}

.btn-outline-dark:hover {
    background-color: var(--color-5);
    border-color: var(--color-5);
    color: var(--color-4) !important;
}

/* Footer */

.footer {
    border-top: var(--size-13) solid var(--color-4);
    margin-top: var(--color-1);
    padding-bottom: var(--size-5);
    padding-top: var(--size-5);
    border-top-left-radius: var(--size-8);
    border-top: var(--size-8) solid var(--color-5);
    font-size: var(--size-3);
}

.footer p, .footer li {
    font-family: var(--font-1);
    margin: var(--color-1);
    padding: var(--color-1);
}

.footer ul {
    padding-bottom: var(--size-4);
}

.footer a, .footer a:visited, .footer, .footer h5 {
    color: var(--color-4);
}

.footer-connect a, .footer-connect a:visited, .footer-connect a:hover {
    color: var(--color-4);
    margin: var(--size-1) var(--size-3) var(--size-3) var(--size-1);
}

.footer-connect {
    padding-bottom: var(--size-3);
    padding-top: var(--size-3);
}

/* Dark mode */

:root.dark {
    --color-1: #6202a7;
    --color-2: #dedede;
    --color-3: #363636;
    --color-4: #212121;
    --color-5: #852cc1;
    --color-6: #3b0b5c;
    --gradient-1: linear-gradient(135deg, rgb(73, 0, 125) 13%, rgb(53, 5, 85) 73%);
    --gradient-2: linear-gradient(135deg, rgba(0, 0, 0, 0.152) 13%, rgba(74, 11, 116, 0.056) 73%);
}

html.dark .icon {
    color: var(--color-2) !important;
}

html.dark .card {
    background-color: var(--color-4);
    border: 1px solid rgba(255, 255, 255, .125);
}

html.dark .navbar a, html.dark .navbar sup, html.dark footer *, html.dark a.btn.btn-primary {
    color: var(--color-2) !important;
}

div.dark-toggle>i {
    cursor: pointer;
    color: white;
    margin-left: .75rem;
    padding-top: .75rem;
}

html.dark .fancy-feat svg {
    fill: white;
}

html.dark .pagination>li>* {
    background-color: var(--color-4) !important;
}