body {
    display: flex;
}

#post {
    width: calc((100% - 30%) - 3dvw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    #menu {
        background: linear-gradient(
            -30deg,
            var(--bg-dark) 10%,
            var(--bg-light) 200%
        );
        padding: 1vw;
        margin: 0 0 2dvw 0;
        display: flex;
        width: 100%;
        min-height: 4dvw;
        border-bottom: 1px solid var(--eternal-blue);
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.5dvh;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--eternal-blue);

            span {
                transition: 0.3s;
                padding: 1dvh;
                border-radius: 100vw;
                margin: 0.8dvh;
                color: var(--lines);
                background: var(--eternal-blue);
            }
        }
        a:hover {
            span {
                background-color: var(--bg-light);
                color: var(--eternal-blue);
            }
        }
        hgroup {
            width: 100%;
            display: flex;
            justify-content: right;
            li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 2dvw 0 0;
                img {
                    margin: 0.5dvh;
                    border: 2px solid var(--eternal-blue);
                    border-radius: 100vw;
                    width: 6dvh;
                    height: 6dvh;
                    object-fit: cover;
                }
                label {
                    color: var(--eternal-blue);
                    font-size: 1rem;
                }
            }
        }
    }

    #ap_post {
        position: relative;
        width: 95%;
        height: 100dvh;
        background-color: var(--dark-opacity);
        overflow: hidden;
	padding: 0 0 3vw 0;

        #titulos {
            padding: 2dvw 5dvw 1dvw 5dvw;
            color: white;
            font-size: 2rem;
            font-family: sans-serif;
        }

        #info {
            position: absolute;
            right: 2dvw;
            bottom: 2dvw;
            color: var(--font);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 1000;
            a {
                border-radius: 100vw;
                cursor: pointer;
                color: var(--eternal-blue);
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--bg-light);
                padding: 1dvh;
                margin: 0 0 1dvh 0;
                label {
                    margin: 0 1dvh 0 1dvh;
                }
            }
            #pubdata {
                padding: 1dvh;
                background-color: var(--bg-dark);
            }
        }

        #markdown {
	    color: white;
            code,
            h1,
            h2,
            h3,
            p,
            li,
            strong,
            em { 
                color: white;
            }
            background-color: transparent;
            position: relative;
            width: calc(100% - 10dvw);
            height: calc(100% - 2rem - 4dvw);
            overflow-y: scroll;
            padding: 0 5dvw 0 5dvw;
        }
    }
}

#comment {
    display: flex;
    align-items: center;
    flex-direction: column;
    * {
        color: var(--font);
    }
    width: calc(30% + 4dvw);
    height: 100dvh;
    overflow-y: scroll;
    overflow-x: hidden;
    border-left: dotted 2px var(--eternal-blue);
    #textbar {
        position: relative;
        width: 100%;
        height: 20dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: dotted var(--eternal-blue) 2px;

        input {
            outline: none;
            width: 70%;
            overflow: hidden;
            min-height: 1vw;
            max-height: 1vw;
            font-size: 1.1rem;
            padding: 1dvh;
            border: none;
            border-radius: 1vw 0 0 1vw;
            background-color: var(--bg-dark);
        }
        a {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            width: 15%;
            height: 2vw;
            background-color: var(--color-pry);
            border-radius: 0 1vw 1vw 0;
        }
    }
    ul {
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        min-height: calc(100% - 20dvh);
        max-height: calc(100% - 20dvh);
        padding: 0 0 0 1dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        #popup {
            background-color: var(--eternal-blue);
            color: var(--lines);
            padding: 1dvw;
            margin: 2dvw 0 2dvw 0;
            animation: end_blink 0.8s ease-in-out infinite;
        }

        li {
            position: relative;
            border-bottom: dotted 1px var(--eternal-blue);
            width: calc(100% - 4dvw);
            hgroup {
                height: 8dvh;
                overflow: hidden;
                display: flex;
                align-items: center;
                img {
                    object-fit: cover;
                    width: 5dvh;
                    height: 5dvh;
                    margin: 0 1vh 0 0;
                    border-radius: 100vw;
                    border: solid 2px var(--color-pry);
                }
                label {
                    width: calc(100% - 5dvh);
                    overflow: hidden;
                    font-family: "Alan Sans", sans-serif;
                }
            }
            p {
                width: 100%;
                font-family: Arial, Helvetica, sans-serif;
                margin: 0 0 1vw 0;
            }
        }
    }
}

@media (width < 600px) {
    body {
        flex-direction: column;
    }

    #post {
        height: auth;
        width: 100%;
        #menu {
            min-height: 15dvh;
        }
        #ap_post {
            height: auto;
            overflow: visible;
            #markdown {
                overflow: visible;
            }
        }
    }
    #comment {
        width: 100%;
        border: none;
        height: auto;
        #textbar {
            height: 10dvh;
            input {
                width: 50%;
                padding: 5dvw;
                border-radius: 5vw 0 0 5vw;
            }
            a {
                padding: 5vw;
                border-radius: 0 5vw 5vw 0;
            }
        }
        ul {
            overflow-x: hidden;
            overflow-y: visible;
            min-height: 0;
            max-height: none;
        }
    }
}