body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: row;

    .info-container {
        width: 25%;
        padding: 20px;
        overflow-y: auto;

        #loginForm>div,
        #recipeForm>div {
            display: flex;
            flex-direction: column;
        }

        #welcome {
            padding-bottom: 20px;
            border-bottom: 1px solid black;
        }

        #all-users {
            margin: 20px 0;
            padding: 0 20px;
            height: fit-content;
            max-height: 25vh;
            overflow-y: auto;
            columns: 100px;

            > div {
                height: 100%;
                padding: 5px 10px;
                background: #eee;
                border: 1px solid black;
                overflow-x: auto;
            }
        }

        #recipeForm {
            #new-recipe-title {
                width: 100%;
                box-sizing: border-box;
            }

            #new-recipe-instructions {
                height: 20vh;
                width: 100%;
                box-sizing: border-box;
            }

            .cloudinary-button {
                line-height: normal;
            }

            .submit-button {
                font-size: 14px;
                padding: 10px 14px;
            }

            #uploaded-images {
                overflow-x: auto;
            }

            #uploaded-images-object {
                overflow-x: scroll;
            }
        }
    }

    .recipes-container {
        width: 50%;
        background: linear-gradient(#9198e5, #b181ff, #d891ef);
        position: relative;

        .fade {
            position: absolute;
            left: 0;
            right: 0;
            height: 30px;

            &.top {
                top: -1px;
                background: linear-gradient(rgba(145, 152, 229, 1), rgba(145, 152, 229, 0));
            }
            &.bot {
                bottom: -1px;
                background: linear-gradient(rgba(216, 145, 239, 0), rgba(216, 145, 239, 1));
            }
        }

        #my-recipes {
            height: 100%;
            overflow-y: auto;

            .recipe {
                width: 80%;
                margin: 30px auto;
                padding: 10px;
                background: rgba(255, 255, 255, 0.5);
                box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.3);
                border-radius: 15px;

                .title {
                    font-size: 20px;
                    text-align: center;
                    font-weight: bold;
                    padding-bottom: 10px;
                }

                .OP, .time {
                    font-size: 12px;
                    text-align: center;
                    color: gray;
                }

                .OP-buttons {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    gap: 15px;
                }

                .instructions {
                    font-size: 18px;
                    margin-bottom: 0;
                    white-space: pre-wrap;

                    img {
                        display: block;
                        width: 80%;
                        max-width: 300px;
                        margin: 0 auto;
                        border-radius: 15px;
                    }
                }
            }
        }
    }

    .announcements-container {
        width: 25%;
        height: 40%;
        margin: auto 20px;
        position: relative;
        overflow: hidden;

        .fade {
            position: absolute;
            left: 0;
            right: 0;
            height: 20vh;

            &.bot {
                bottom: -1px;
                background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            }
        }

        #server-announcements {
            height: 100%;
        }
    }
}

@media only screen and (max-width: 768px) {
    body {
        flex-direction: column;

        .info-container {
            width: initial;
            margin: 20px;
            overflow-y: initial;
        }

        .recipes-container {
            width: initial;

            #my-recipes {
                height: 100vh;

                .recipe {
                    width: 85%;
                }
            }
        }

        .announcements-container {
            display: none;
        }
    }
}