:root {
    --font-family-1: 'Montserrat', 'Gotham', 'Raleway', 'Segoe UI', 'Calibri', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --page-size-xs: 400px;
    --page-size-s: 600px;
    --page-size-m: 800px;
    --page-size-l: 1000px;
    --page-size-xl: 1200px;
    --page-size-xxl: 1600px;
    --google-logo-url: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzIiIGhlaWdodD0iOTIiPjxwYXRoIGZpbGw9IiNFQTQzMzUiIGQ9Ik0xMTUuNzUgNDcuMThjMCAxMi43Ny05Ljk5IDIyLjE4LTIyLjI1IDIyLjE4cy0yMi4yNS05LjQxLTIyLjI1LTIyLjE4QzcxLjI1IDM0LjMyIDgxLjI0IDI1IDkzLjUgMjVzMjIuMjUgOS4zMiAyMi4yNSAyMi4xOHptLTkuNzQgMGMwLTcuOTgtNS43OS0xMy40NC0xMi41MS0xMy40NFM4MC45OSAzOS4yIDgwLjk5IDQ3LjE4YzAgNy45IDUuNzkgMTMuNDQgMTIuNTEgMTMuNDRzMTIuNTEtNS41NSAxMi41MS0xMy40NHoiLz48cGF0aCBmaWxsPSIjRkJCQzA1IiBkPSJNMTYzLjc1IDQ3LjE4YzAgMTIuNzctOS45OSAyMi4xOC0yMi4yNSAyMi4xOHMtMjIuMjUtOS40MS0yMi4yNS0yMi4xOGMwLTEyLjg1IDkuOTktMjIuMTggMjIuMjUtMjIuMThzMjIuMjUgOS4zMiAyMi4yNSAyMi4xOHptLTkuNzQgMGMwLTcuOTgtNS43OS0xMy40NC0xMi41MS0xMy40NHMtMTIuNTEgNS40Ni0xMi41MSAxMy40NGMwIDcuOSA1Ljc5IDEzLjQ0IDEyLjUxIDEzLjQ0czEyLjUxLTUuNTUgMTIuNTEtMTMuNDR6Ii8+PHBhdGggZmlsbD0iIzQyODVGNCIgZD0iTTIwOS43NSAyNi4zNHYzOS44MmMwIDE2LjM4LTkuNjYgMjMuMDctMjEuMDggMjMuMDctMTAuNzUgMC0xNy4yMi03LjE5LTE5LjY2LTEzLjA3bDguNDgtMy41M2MxLjUxIDMuNjEgNS4yMSA3Ljg3IDExLjE3IDcuODcgNy4zMSAwIDExLjg0LTQuNTEgMTEuODQtMTN2LTMuMTloLS4zNGMtMi4xOCAyLjY5LTYuMzggNS4wNC0xMS42OCA1LjA0LTExLjA5IDAtMjEuMjUtOS42Ni0yMS4yNS0yMi4wOSAwLTEyLjUyIDEwLjE2LTIyLjI2IDIxLjI1LTIyLjI2IDUuMjkgMCA5LjQ5IDIuMzUgMTEuNjggNC45NmguMzR2LTMuNjFoOS4yNXptLTguNTYgMjAuOTJjMC03LjgxLTUuMjEtMTMuNTItMTEuODQtMTMuNTItNi43MiAwLTEyLjM1IDUuNzEtMTIuMzUgMTMuNTIgMCA3LjczIDUuNjMgMTMuMzYgMTIuMzUgMTMuMzYgNi42MyAwIDExLjg0LTUuNjMgMTEuODQtMTMuMzZ6Ii8+PHBhdGggZmlsbD0iIzM0QTg1MyIgZD0iTTIyNSAzdjY1aC05LjVWM2g5LjV6Ii8+PHBhdGggZmlsbD0iI0VBNDMzNSIgZD0iTTI2Mi4wMiA1NC40OGw3LjU2IDUuMDRjLTIuNDQgMy42MS04LjMyIDkuODMtMTguNDggOS44My0xMi42IDAtMjIuMDEtOS43NC0yMi4wMS0yMi4xOCAwLTEzLjE5IDkuNDktMjIuMTggMjAuOTItMjIuMTggMTEuNTEgMCAxNy4xNCA5LjE2IDE4Ljk4IDE0LjExbDEuMDEgMi41Mi0yOS42NSAxMi4yOGMyLjI3IDQuNDUgNS44IDYuNzIgMTAuNzUgNi43MiA0Ljk2IDAgOC40LTIuNDQgMTAuOTItNi4xNHptLTIzLjI3LTcuOThsMTkuODItOC4yM2MtMS4wOS0yLjc3LTQuMzctNC43LTguMjMtNC43LTQuOTUgMC0xMS44NCA0LjM3LTExLjU5IDEyLjkzeiIvPjxwYXRoIGZpbGw9IiM0Mjg1RjQiIGQ9Ik0zNS4yOSA0MS40MVYzMkg2N2MuMzEgMS42NC40NyAzLjU4LjQ3IDUuNjggMCA3LjA2LTEuOTMgMTUuNzktOC4xNSAyMi4wMS02LjA1IDYuMy0xMy43OCA5LjY2LTI0LjAyIDkuNjZDMTYuMzIgNjkuMzUuMzYgNTMuODkuMzYgMzQuOTEuMzYgMTUuOTMgMTYuMzIuNDcgMzUuMy40N2MxMC41IDAgMTcuOTggNC4xMiAyMy42IDkuNDlsLTYuNjQgNi42NGMtNC4wMy0zLjc4LTkuNDktNi43Mi0xNi45Ny02LjcyLTEzLjg2IDAtMjQuNyAxMS4xNy0yNC43IDI1LjAzIDAgMTMuODYgMTAuODQgMjUuMDMgMjQuNyAyNS4wMyA4Ljk5IDAgMTQuMTEtMy42MSAxNy4zOS02Ljg5IDIuNjYtMi42NiA0LjQxLTYuNDYgNS4xLTExLjY1bC0yMi40OS4wMXoiLz48L3N2Zz4=);
}


* {
    box-sizing: border-box;
    outline: none;
}

html {
    background-color: var(--background-primary-color);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    min-width: 200px;
    min-height: 200px;
}

body {
    background: linear-gradient(#00F1 0%, var(--background-primary-color) 50%);
    background-attachment: fixed;
    color: var(--text-primary-color);
    fill: var(--text-primary-color);
    margin: 0;
    padding: 0;
    min-width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    display: block;
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: normal;
    letter-spacing: -0.05em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}


::-webkit-scrollbar {
    background-color: var(--scrollbar-background);
    width: 10px;
    height: 10px;
}
body::-webkit-scrollbar {
    background-color: var(--background-primary-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}


h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1;
}


nav {
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    background-color: var(--background-secondary-color);
    border-bottom: solid 1px transparent;
    padding: 0 calc(50% - var(--page-size-m));
    z-index: 2;
    -webkit-transition: top 0.2s ease-out;
    -moz-transition: top 0.2s ease-out;
    -o-transition: top 0.2s ease-out;
    -ms-transition: top 0.2s ease-out;
    transition: top 0.2s ease-out;
}

nav * {
    flex: 1;
    margin: auto;
}

nav > :first-child {
    margin-left: 10px;
}

nav > :last-child {
    margin-right: 10px;
    text-align: right;
}


main {
    padding-top: 50px;
    min-height: calc(100vh - 460px);
    -webkit-transition: margin-top 0.2s ease-out;
    -moz-transition: margin-top 0.2s ease-out;
    -o-transition: margin-top 0.2s ease-out;
    -ms-transition: margin-top 0.2s ease-out;
    transition: margin-top 0.2s ease-out;
}


footer {
    padding: 10px 0 25px;
    background-image: radial-gradient(calc(75vw + 75vh) 100% at bottom, var(--background-footer-gradient) 25%, var(--background-secondary-color) 75%);
}


a {
    color: var(--text-primary-color);
    text-decoration: none;
}


h1 {
    padding: 0 5%;
    font-size: 10vw;
    letter-spacing: -0.05em;
}

h2 {
    font-size: 1vw;
    font-weight: normal;
}

h3 {
    font-size: 8vw;
    padding: 2em 1em 1em;
}

h4 {
    font-size: 2.25rem;
}

h5 {
    font-size: 2em;
    padding: 10px 0 20px;
}

h6 {
    font-size: 1.75rem;
    padding: 10px 5% 20px;
}


i {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: middle;
}


i svg {
    height: 100%;
    width: 100%;
    vertical-align: 5px;
}


table {
    width: 100%;
    margin: auto;
    border-spacing: 0;
}


.highlight-text {
    color: var(--highlight-color);
}

.highlight-text path {
    fill: var(--highlight-color);
}

.default-font-text {
    color: var(--text-primary-color);
}

.default-font-text path {
    fill: var(--text-primary-color);
}

.background-primary-text {
    color: var(--background-primary-color);
}

.background-primary-text path {
    fill: var(--background-primary-color);
}

.green-text {
    color: var(--green-text);
}

.green-text path {
    fill: var(--green-text);
}

.red-text {
    color: var(--red-text);
}

.red-text path {
    fill: var(--red-text);
}

.gold-text {
    color: var(--gold-text);
}

.gold-text path {
    fill: var(--gold-text);
}



@media (prefers-color-scheme: dark) {

    nav {
        background-color: #000000 !important;
    }

}