* { box-sizing: border-box; }

html, body, main {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

main, footer {
    font-family: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 25px;
}

a {
    color: inherit;
    text-decoration: underline 0.5px;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;

    padding: 40px;

    background-color: #272737;

    overflow-x: hidden;
    overflow-y: auto;

    > * {
        padding: 35px;
        max-width: 99%;

        border-radius: 18px;
        background-color: #3c3c57;
        box-shadow: 0px 0px 50px -15px #0000006b;
    }

    &.no-javascript > *:not(noscript) {
        display: none !important;
    }

    > #function {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding-bottom: 10px;

        > #function-return {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 4px;

            margin-bottom: -20px;
        }

        > #name-wrapper {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;

            > .large-font {
                display: inline-flex;
                flex-direction: row;
                flex-wrap: wrap;

                font-size: 80px;
                text-decoration: none;
            }

            > #copy-button {
                background-image: url("copy.png");
                background-size: cover;

                width: 32px;
                min-width: 32px;
                aspect-ratio: 1 / 1;

                margin-left: 20px;

                cursor: pointer;
            }
        }

        > #function-params {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

            > .param, > #overloads {
                border: 2px solid #31314b;
                background-color: #464674;
                border-radius: 4px;
                padding: 4px 8px;
            }

            > #overloads {
                font-size: 16px;

                align-self: center;
                margin-left: auto;
            }
        }

        > #function-number {
            margin-bottom: -10px;
        }

        > #function-history::before {
            content: "";
            display: inline-block;

            background-image: url("menu.png");
            background-size: cover;

            width: 1.2em;
            min-width: 1.2em;
            aspect-ratio: 1 / 1;

            vertical-align: middle;
            translate: 0px -1.5px;
        }

        > #function-number, > #function-history {
            width: 100%;

            text-align: center;

            font-size: 15px;
            color: #ffffff;
        }
    }

    > #addresses {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;

        > .address {
            display: flex;
            flex-direction: row;
            padding: 7px;
            gap: 5px;
            flex: 1 1 auto;

            border-width: 2px;
            border-style: solid;
            border-radius: 10px;

            color: #ffffff;

            > .address-platform {
                font-size: 13px;
            }

            > .address-offset {
                font-family: "JetBrains Mono", monospace;
                font-weight: 400;
                font-size: 20px;
            }
        }
    }

    > noscript {
        color: white;
    }
}

footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    translate: -50% 0px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    > #footer-content {
        color: #ffffff;
        text-align: center;
    }

    > #links {
        display: flex;
        flex-direction: row;
        gap: 20px;

        > a {
            width: 30px;
            aspect-ratio: 1 / 1;

            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: grayscale(1) brightness(1000%);
        }

        > #github-link { background-image: url("github-icon.png"); }
        > #twitter-link { background-image: url("twitter-icon.png"); }
    }

}

@media (max-width: 750px) {
    main, footer {
        font-size: 15px;
    }

    main {
        justify-content: flex-start;

        > #function {
            > #function-return {
                margin-bottom: -5px;
            }

            #name-wrapper {
                > .large-font {
                    font-size: 26px;
                }

                > #copy-button {
                    display: none;
                }
            }
        }

        > div:last-of-type {
            margin-bottom: 120px;
        }
    }

    footer {
        background-color: #272737c9;
        backdrop-filter: blur(60px);
        border-radius: 20px;
        padding: 15px;
    }
}

.type-generic { color: #9e6ad4; }
.type-class { color: #f5dd9f; }
.function-name { color: #6a80d8; }
.namespace-name { color: #f5c99f; }
.white { color: #ffffff; }

.win { background-color: hsla(240, 79%, 53%, 0.467); border-color: hsla(240, 79%, 53%, 0.467); }
.m1 { background-color: hsla(58, 79%, 53%, 0.467); border-color: hsla(58, 79%, 53%, 0.467); }
.imac { background-color: hsla(39, 79%, 53%, 0.467); border-color: hsla(39, 79%, 53%, 0.467); }
.ios { background-color: hsla(118, 79%, 53%, 0.467); border-color: hsla(118, 79%, 53%, 0.467); }
.android32 { background-color: hsla(318, 79%, 53%, 0.467); border-color: hsla(318, 79%, 53%, 0.467); }
.android64 { background-color: hsla(295, 79%, 53%, 0.467); border-color: hsla(295, 79%, 53%, 0.467); }