main {
    max-width: 100%;
    display: grid;
    justify-content: center;
    width: 100%;
}

.container {
    padding-left: 0;
    padding-right: 0;
}

#howlInput {
    display: grid;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;

    & textarea {
        width: 50vw;
        border-radius: 1rem;
        border: lightgrey solid 2px;
        padding: .5rem;
        margin-bottom: 1rem;
    }

    & button {
        font-size: 1.5rem;
        justify-self: end;
        background-color: #990000;
        color: white;
        border: 0;
        border-radius: .5rem;
        padding: .25rem 1rem;
        box-shadow: rgba(0, 0, 0, 0.5) .1em .1em .2em;
    }

    & button:hover {
        background-color: #b90202;
        box-shadow: rgba(0, 0, 0, 0.5) .2em .2em .2em;
    }

    & button:active {
        background-color: #7d0000;
        box-shadow: rgba(0, 0, 0, 0.5) .01em .01em .1em;
    }
}

#howlList {
    display: grid;
    gap: 1.5rem;
    

    & .howl {
        width: 50vw;
        border: #990000 solid 2px;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        background-color: white;

        & .topInfo {
            padding: .2rem .5rem;
            border-top-left-radius: .85rem;
            border-top-right-radius: .85rem;
            width: 100%;
            border-bottom: #990000 solid 2px;
            background-color: #990000;
            display: grid;

            & .userInfo {
                grid-column: 1;
                grid-row: 1;
                display: flex;
                flex-direction: row;
                color: white;

                & .userPic {
                    border-radius: 1.5rem;
                    border: white solid 1px;
                    background-color: white;
                    width: 3rem;
                    height: 3rem;
                    cursor: pointer;
                }

                & .userPic:hover {
                    border-radius: 1.5rem;
                    border: #b0b0b0 solid 1px;
                    background-color: rgb(213, 213, 213);
                }

                & .names {
                    display: flex;
                    flex-direction: column;
                    margin-left: .5rem;
                    cursor: pointer;
                }

                & .names:hover {
                    color: lightgrey;
                }

            }


        }

        & .bottomInfo {
            display: grid;
            background-color: #990000;
            padding: 0 .5rem;
            border-bottom-left-radius: .85rem;
            border-bottom-right-radius: .85rem;

            & .date {
                justify-self: end;
                color: white;
            }
        }




        & .content {
            grid-row: 2;
            grid-column: 1 / span 2;
            resize: vertical;
            overflow-wrap: break-word;
            white-space: pre-wrap;
            padding: .5rem;
        }
    }
}

footer {
    margin-top: 3rem;
    display: grid;
    justify-content: center;
}
@media screen and (max-width: 450px) {
    #howlInput {
        width: 100%;
        & textarea {
            width: 90vw;
        }
    }
    #howlList {
        width: 90vw;
        .howl {
            width: 90vw;
        }
    }
    .container {
        width: 100%;
    }
}