@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=Figtree:wght@700&family=Noto+Sans:wdth,wght@90.1,380&display=swap');

@media screen and (max-device-width: 480px) {
    body {
        -webkit-text-size-adjust: 100%;
    }
}

.form-group input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}


#result {
    margin-top: 16px;
    font-family: "Cousine", monospace;
}

#uploadedFiles {
    margin-top: 16px;
}

.file-link {
    font-family: "Cousine", monospace;
    display: block;
    margin: 4px 0;
}

.form-group {
    margin-bottom: 12px;
}

.form-group label {
    display: block;
    font-family: "Cousine", monospace;
    font-weight: 700;
    margin-bottom: 4px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: "Cousine", monospace;
    font-size: 12px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 1);
}

button {
    font-family: "Cousine", monospace;
    font-size: 12px;
    padding: 8px 16px;
    background: white;
    color: black;
    border: 1px solid rgba(0, 0, 0, 1);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.1);
}

html,
body {
    margin: 0;
    padding: 0;
    background-image: url('/files/background.png');
    font-size: 16px;
}

body>.page {
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 1.0);
    padding: 8px;

    .home-nav {
        a {
            font-family: "Cousine", monospace;
            font-weight: 400;
            font-style: normal;
            text-decoration: none;
        }
    }

    .content {
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 1);
        padding: 8px;
        margin: 8px;

        .posts {
            font-size: 14px;
            font-family: "Noto Sans", sans-serif;
            font-optical-sizing: auto;
            font-weight: 380;
            font-style: normal;
            font-variation-settings: "wdth"90.1;

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;

                li {
                    margin: 0;
                    padding: 0;
                    margin-bottom: 12px;
                    line-height: 14px;

                    >a {
                        font-family: "Cousine", monospace;
                        font-size: 16px;
                        font-weight: 700;
                        text-decoration: none;
                    }

                    .tags {
                        font-weight: 400;
                        font-size: 12px;

                        a {
                            font-family: "Cousine", monospace;
                            text-decoration: none;
                        }
                    }
                }
            }
        }

        h3 {
            font-size: 24px;
            font-family: "Cousine", monospace;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
            margin: 8px 0px 8px 8px;
        }
    }

    .top {
        .navigation {
            display: inline-block;
            font-size: 12px;

            hr {
                border: none;
                height: 1px;
                background-color: rgba(0, 0, 0, 1);
                margin: 0;

                &.top {
                    margin-bottom: 2px;
                }

                &.bottom {
                    margin-top: 2px;
                }
            }

            nav {
                font-family: "Cousine", monospace;
                font-weight: 400;
                font-style: normal;

                .page {
                    font-weight: 700;
                }

                a {
                    text-decoration: none;
                }
            }
        }

        .header {
            h1 {
                font-family: "Figtree", sans-serif;
                font-optical-sizing: auto;
                font-weight: 700;
                font-style: normal;
                margin: 8px 0px 8px 8px;
            }
        }
    }
}