* { 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;

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

    > * {
        padding: 35px;

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

    > #wrapper {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;

        max-width: 1400px;
        width: 90%;
        height: 90%;

        > h1 {
            text-align: center;
            color: #ffffff;
            margin: 0;

            margin-bottom: 20px;
        }

        > #days {
            position: relative;
            width: 100%;

            flex: 1 1 auto;

            > #top-shadow, #bottom-shadow {
                position: absolute;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;

                pointer-events: none;
                z-index: 1;
            }

            > #bottom-shadow {
                box-shadow: inset 0px -3dvh 50px 0px #3c3c57;
            }

            > #top-shadow {
                box-shadow: inset 0px 3dvh 50px 0px #3c3c57;
            }

            > #scroll {
                position: absolute;
                top: 0;
                left: 0;

                width: 100%;
                height: 100%;

                overflow-y: auto;

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

                > .day {
                    width: 90%;

                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 10px;

                    cursor: pointer;
                    user-select: none;
                    text-decoration: none;

                    padding: 15px;

                    border-radius: 10px;
                    background-color: #454561;

                    > .name-wrapper {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                    }

                    > .date {
                        margin-left: auto;
                    }
                }
            }
        }
    }

    > noscript {
        color: white;
    }
}

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

    main {
        justify-content: flex-start;

        > #wrapper {
            min-width: 99%;
        }
    }

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

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