:root {
    --page-bg: #121E19;
    --bg: #24342D;
    --bg-t: #00513B;
    --header: #BCFFE1;
    --header-2: #E3F5EA;
    --fg: #F4FFF7;
    --accent-1: #36FFC4;
    --shadow: #36FFC4;
}

html {
    background: var(--page-bg);
    font-family: 'JetBrains Mono', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* -- normal -- */
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Regular.ttf") format("opentype"),
        url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* -- bold -- */
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Bold.ttf") format("opentype"),
        url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff");
    font-weight: bold;
    font-style: bold;
}

/* -- italic -- */
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-Italic.ttf") format("opentype"),
        url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-Italic.woff2") format("woff");
    font-weight: normal;
    font-style: italic;
}

/* -- bold italic -- */
@font-face {
    font-family: "JetBrains Mono";
    src:
        local("JetBrains Mono"),
        local("JetBrainsMono Nerd Font"),
        url("/assets/jetbrainsmono/fonts/ttf/JetBrainsMono-BoldItalic.ttf") format("opentype"),
        url("/assets/jetbrainsmono/fonts/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff");
    font-weight: bold;    
    font-style: italic;
}
/* -- font nuts -- */

/* -- pixelated border radius -- */
.pixel-corners,
.pixel-corners--wrapper {
    clip-path: polygon(0px calc(100% - 28px),
        4px calc(100% - 28px),
        4px calc(100% - 20px),
        8px calc(100% - 20px),
        8px calc(100% - 12px),
        12px calc(100% - 12px),
        12px calc(100% - 8px),
        20px calc(100% - 8px),
        20px calc(100% - 4px),
        28px calc(100% - 4px),
        28px 100%,
        calc(100% - 28px) 100%,
        calc(100% - 28px) calc(100% - 4px),
        calc(100% - 20px) calc(100% - 4px),
        calc(100% - 20px) calc(100% - 8px),
        calc(100% - 12px) calc(100% - 8px),
        calc(100% - 12px) calc(100% - 12px),
        calc(100% - 8px) calc(100% - 12px),
        calc(100% - 8px) calc(100% - 20px),
        calc(100% - 4px) calc(100% - 20px),
        calc(100% - 4px) calc(100% - 28px),
        100% calc(100% - 28px),
        100% 28px,
        calc(100% - 4px) 28px,
        calc(100% - 4px) 20px,
        calc(100% - 8px) 20px,
        calc(100% - 8px) 12px,
        calc(100% - 12px) 12px,
        calc(100% - 12px) 8px,
        calc(100% - 20px) 8px,
        calc(100% - 20px) 4px,
        calc(100% - 28px) 4px,
        calc(100% - 28px) 0px,
        28px 0px,
        28px 4px,
        20px 4px,
        20px 8px,
        12px 8px,
        12px 12px,
        8px 12px,
        8px 20px,
        4px 20px,
        4px 28px,
        0px 28px);
    position: relative;
}
.pixel-corners {
    border: 4px solid transparent;
    margin-bottom: 30px;
}
.pixel-corners--wrapper {
    width: fit-content;
    height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
    display: block;
    clip-path: polygon(4px 28px,
        8px 28px,
        8px 20px,
        12px 20px,
        12px 12px,
        20px 12px,
        20px 8px,
        28px 8px,
        28px 4px,
        calc(100% - 28px) 4px,
        calc(100% - 28px) 8px,
        calc(100% - 20px) 8px,
        calc(100% - 20px) 12px,
        calc(100% - 12px) 12px,
        calc(100% - 12px) 20px,
        calc(100% - 8px) 20px,
        calc(100% - 8px) 28px,
        calc(100% - 4px) 28px,
        calc(100% - 4px) calc(100% - 28px),
        calc(100% - 8px) calc(100% - 28px),
        calc(100% - 8px) calc(100% - 20px),
        calc(100% - 12px) calc(100% - 20px),
        calc(100% - 12px) calc(100% - 12px),
        calc(100% - 20px) calc(100% - 12px),
        calc(100% - 20px) calc(100% - 8px),
        calc(100% - 28px) calc(100% - 8px),
        calc(100% - 28px) calc(100% - 4px),
        28px calc(100% - 4px),
        28px calc(100% - 8px),
        20px calc(100% - 8px),
        20px calc(100% - 12px),
        12px calc(100% - 12px),
        12px calc(100% - 20px),
        8px calc(100% - 20px),
        8px calc(100% - 28px),
        4px calc(100% - 28px));
}
.pixel-corners::after,
.pixel-corners--wrapper::after {
    content: "";
    position: absolute;
    clip-path: polygon(0px calc(100% - 28px),
        4px calc(100% - 28px),
        4px calc(100% - 20px),
        8px calc(100% - 20px),
        8px calc(100% - 12px),
        12px calc(100% - 12px),
        12px calc(100% - 8px),
        20px calc(100% - 8px),
        20px calc(100% - 4px),
        28px calc(100% - 4px),
        28px 100%,
        calc(100% - 28px) 100%,
        calc(100% - 28px) calc(100% - 4px),
        calc(100% - 20px) calc(100% - 4px),
        calc(100% - 20px) calc(100% - 8px),
        calc(100% - 12px) calc(100% - 8px),
        calc(100% - 12px) calc(100% - 12px),
        calc(100% - 8px) calc(100% - 12px),
        calc(100% - 8px) calc(100% - 20px),
        calc(100% - 4px) calc(100% - 20px),
        calc(100% - 4px) calc(100% - 28px),
        100% calc(100% - 28px),
        100% 28px,
        calc(100% - 4px) 28px,
        calc(100% - 4px) 20px,
        calc(100% - 8px) 20px,
        calc(100% - 8px) 12px,
        calc(100% - 12px) 12px,
        calc(100% - 12px) 8px,
        calc(100% - 20px) 8px,
        calc(100% - 20px) 4px,
        calc(100% - 28px) 4px,
        calc(100% - 28px) 0px,
        28px 0px,
        28px 4px,
        20px 4px,
        20px 8px,
        12px 8px,
        12px 12px,
        8px 12px,
        8px 20px,
        4px 20px,
        4px 28px,
        0px 28px,
        0px 50%,
        4px 50%,
        4px 28px,
        8px 28px,
        8px 20px,
        12px 20px,
        12px 12px,
        20px 12px,
        20px 8px,
        28px 8px,
        28px 4px,
        calc(100% - 28px) 4px,
        calc(100% - 28px) 8px,
        calc(100% - 20px) 8px,
        calc(100% - 20px) 12px,
        calc(100% - 12px) 12px,
        calc(100% - 12px) 20px,
        calc(100% - 8px) 20px,
        calc(100% - 8px) 28px,
        calc(100% - 4px) 28px,
        calc(100% - 4px) calc(100% - 28px),
        calc(100% - 8px) calc(100% - 28px),
        calc(100% - 8px) calc(100% - 20px),
        calc(100% - 12px) calc(100% - 20px),
        calc(100% - 12px) calc(100% - 12px),
        calc(100% - 20px) calc(100% - 12px),
        calc(100% - 20px) calc(100% - 8px),
        calc(100% - 28px) calc(100% - 8px),
        calc(100% - 28px) calc(100% - 4px),
        28px calc(100% - 4px),
        28px calc(100% - 8px),
        20px calc(100% - 8px),
        20px calc(100% - 12px),
        12px calc(100% - 12px),
        12px calc(100% - 20px),
        8px calc(100% - 20px),
        8px calc(100% - 28px),
        4px calc(100% - 28px),
        4px 50%,
        0px 50%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #36ffc4;
    display: block;
    pointer-events: none;
}
.pixel-corners::after {
    margin: -4px;
}
/* -- end of pixelated borders -- */

/* -- usual css things -- */
h1 {
    color: var(--header);
    font-size: 32px;
    text-shadow: 0px 0px 14px var(--accent-1);
    margin: 0px 0px 5px;
}

h2 {
    color: var(--header-2);
    font-size: 26px;
    text-shadow: 0px 0px 8px var(--header-2);
}

li, p {
    color: var(--fg);
    font-size: 20px;
    margin: 20px 0px 0px 0px;
}

ul {
    margin: 0px;
}

small {
    color: var(--fg);
    font-size: 16px;
}

a {
    color: var(--accent-1);
    text-shadow: 0px 0px 5px var(--accent-1);
    font-size: 20px;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 2rem;
    font-size: 16px;
}

footer > a, footer > p, footer > p > a {
    color: var(--header);
    font-size: 16px;
}

footer > a {
    margin-top: 20px;
}
/* -- end of usual css things -- */

/* -- styling the rest of the elements/custom stuff -- */
.main {
    position: relative;
    width: 60rem;
    top: 2rem;
    margin-left: auto;
    margin-right: auto;
}

.pfp-image {
    width: 150px;
    height: 150px;
}

.site-intro {
    margin: -2px;
}

.nav, .nav > a {
    color: var(--header-2);
    font-size: 16px;
    text-shadow: 0px 0px 8px var(--header-2);
}

nav > p {
    margin-top: 10px;
}

.arrow {
    color: var(--accent-1);
    text-shadow: 0px 0px 8px var(--accent-1);
    font-size: 16px;
}

.dot {
    color: var(--accent-1);
    text-shadow: 0px 0px 8px var(--accent-1);
    font-size: 16px;
}

.anchors, .anchors > a {
    color: var(--header);
    font-size: 32px;
    text-shadow: 0px 0px 14px var(--accent-1);
    margin: 0px 0px 5px;
    text-decoration: none;
}

.anchors:hover, .anchors > a:hover {
    text-decoration: underline;
}

.links > .fedi > .dot, .links > .messaging > .dot, .links > .platforms > .dot, .links > .misc > .dot {
    color: var(--accent-1);
    text-shadow: 0px 0px 8px var(--accent-1);
    margin-top: 22px;
    margin-left: 14px;
    margin-right: 14px;
}

footer > .dot {
    font-size: 16px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.separator {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: -1px;
}

.separator > small {
    color: var(--bg-t);
}

.intro-box, .navbar, .about-me, .links, .fun-facts, .user-reviews, .buttons {
    position: relative;
    display: flex;
    padding: 30px;
    background-color: var(--bg);
}

.intro-text, .navbar, .about-me, .links, .fun-facts, .user-reviews, .buttons {
    flex-direction: column;
}

.intro-box {
    justify-content: space-evenly;
}

.pfp {
    width: 150px;
    height: 150px;
}

.intro-text {
    text-align: center;
    transform: translateY(15%)
}

.navbar {
    text-align: center;
    margin-top: -15px;
    margin-bottom: -15px;
}

/* -- below is all the css used only for the social cards, and its probably Very Bad so get a puke bag or something read -- */
.fedi, .firefish, .firefish-icon, .akkoma, .akkoma-icon, .messaging, .revolt, .revolt-icon, .matrix, .matrix-icon, .xmpp, .xmpp-icon, .platforms, .listenbrainz, .listenbrainz-icon, .gitgay, .gitgay-icon, .github, .github-icon, .misc, .retrospring, .retrospring-icon, .archiveorg, .archive-icon, .shitposts, .amoguscloud, .warning {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

.firefish-icon, .akkoma-icon, .revolt-icon, .matrix-icon, .xmpp-icon, .listenbrainz-icon, .gitgay-icon, .github-icon, .retrospring-icon, .archive-icon, .amoguscloud {
    margin-top: 20px;
    margin-right: 8px;
    width: 30px;
    height: 30px;
}

/* -- fedi section -- */

/* -- firefish -- */
.firefish > p > small, .firefish > p > small > a  {
    font-size: 16px;
    background: #E74788;
    background: linear-gradient(to right, #E74788 0%, #F6AE4A 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #F1775D; 
}
/* -- */

/* -- akkoma -- */
.akkoma > p > small, .akkoma > p > small > a  {
    font-size: 16px;
    color: #CBA6D7;
    text-shadow: 0px 0px 8px #CBA6D7; 
}
/* -- */

/* -- messaging section -- */

/* -- revolt -- */
.revolt > p > small, .revolt > p > small > a  {
    font-size: 16px;
    background: #FF4654;
    background: linear-gradient(to right, #FF4654 0%, #FF558B 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #FF4654; 
}
/* -- */

/* -- matrix -- */
.matrix > p > small, .matrix > p > small > a  {
    font-size: 16px;
    background: #FFFFFF;
    background: linear-gradient(to right, #FFFFFF 0%, #4B4B4B 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #4B4B4B; 
}
/* -- */

/* -- xmpp -- */
.xmpp > p > small, .xmpp > p > small > a  {
    font-size: 16px;
    background: #EED49F;
    background: linear-gradient(to right, #A6DA95 0%, #EED49F 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #11A4D8; 
}
/* -- */

/* -- other platforms that i guess count as social -- */

/* -- listenbrainz -- */
.listenbrainz > p > small, .listenbrainz > p > small > a  {
    font-size: 16px;
    background: #DA9014;
    background: linear-gradient(to right, #8AADf4 0%, #EB743B 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #D58C17; 
}
/* -- */

/* -- git.gay -- */
.gitgay > p > small, .gitgay > p > small > a  {
    font-size: 16px;
    background: #69CB86;
    background: linear-gradient(to right, #FE9494 0%, #FFC783 31%, #69CB86 56%, #83A8FF 79%, #C56AD4 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #69CB86; 
}
/* -- */

/* -- gith*b -- */
.github > p > small, .github > p > small > a  {
    font-size: 16px;
    color: #CDD6F4;
    text-shadow: 0px 0px 8px #CDD6F4; 
}
/* -- */

/* -- misc. links -- */

/* -- retrospring -- */
.retrospring > p > small, .retrospring > p > small > a  {
    font-size: 16px;
    color: #CA9EE6;
    text-shadow: 0px 0px 8px #5E35B1; 
}

/* -- are chives dot org -- */
.archiveorg > p > small, .archiveorg > p > small > a  {
    font-size: 16px;
    background: #FFFFFF;
    background: linear-gradient(to right, #FFFFFF 0%, #000000 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: 0px 0px 8px #777777; 
}

/* -- lil warning message :3 -- */
.warning {
    margin-top: 3rem;
    text-align: center;
    font-size: 16px;
    color: #E78284;
    text-shadow: 0px 0px 8px #E78284;
}

/* -- end of puke code -- */

.quotes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

.quote > p::before {
    content: "“";
}

.quote > p::after {
    content: "”";
}

.quote > p::before, .quote > p::after {
    color: var(--header);
    font-size: 28px;
}

.quote > small::before {
    content: "-";
    padding-right: 1em;
    text-shadow: 0px 0px 8px var(--accent-1);
    color: var(--fg);
    font-size: 20px;
    padding-left: 3em;
}

.quote > small, .quote > small > i > a {
    text-shadow: 0px 0px 8px var(--header);
    color: var(--fg);
    font-size: 16px;
}

.quote:nth-child(9) {
    grid-column: 1 / 3;
    grid-row: 6;
}

.quote:nth-child(10) {
    grid-column: 1 / 3;
    grid-row: 7;
}

.quote:first-child, .quote:nth-child(10) {
    filter: blur(1rem);
}

.quote:hover {
    filter: blur(0px);
}

.buttons-area > small > a {
    font-size: 16px;
}

.buttons-img:first-child {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(6, 1fr);
    margin: 1em 8em 1em 8em;
    place-items: center;
}

.buttons-img:nth-child(2) {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(9, 1fr);
    margin: 0.2em 1em 0.6em 1em;
    place-items: center;
}

.buttons-img:nth-child(4) {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
    margin: 0.2em 24em 0px 24em;
}

.buttons-img > a {
    font-size: 0px;
}

.buttons-img > a > img {
    margin: 3px;
}

.yoshi {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
/* -- end of styling the rest of the elements -- */

/* -- shrink cards if screen is small -- */
@media screen and (max-width: 1000px) {
    .main {
        width: 100%;
        max-width: 90%;
        transform: translate(6%, 0%);
        margin-left: unset;
        margin-right: unset;
    }

    .intro-box {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }

    .pfp, .pixel-corners--wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    .pixel-corners--wrapper {
        margin-bottom: 20px;
    }

    .fedi, .messaging, .platforms, .misc, .warning {
        flex-direction: column;
    }

    .fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
        display: none;
    }

    .quotes {
        grid-template-columns: unset;
        display: flex;
        flex-direction: column;
    }

    .quote > small::before {
        padding-left: unset;
    }

    .buttons-img:first-child, .buttons-img:nth-child(2), .buttons-img:nth-child(4), .buttons-img {
        display: flow-root;
        margin: 1em 0px 1px 0px;
        text-align: center;
        justify-content: center;
    }

    footer {
        flex-direction: column;
        text-align: center;
    }

    footer > p, footer > a, footer > p > a {
        margin-top: 5px;
    }

    footer > .dot {
        display: none;
    }
}
/* -- yea -- */