.chat-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 0px;
}

    .chat-group .chat-heading {
        background-color: rgb(240,240,240);
        border-color: rgb(100,100,100);
        border-style: solid;
        border-bottom-width: 0px;
        border-left-width: 1px;
        border-right-width: 1px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top-width: 1px;
        font-weight: bold;
        padding: 4px;
    }

    .chat-group .chat-image {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        border-color: rgb(80, 80, 80);
        border-style: solid;
        border-width: 1px;
        flex-grow: 1;
        height: 0px;
        overflow-y: scroll;
    }

        .chat-group .chat-image img {
            width: 100%;
        }

#chemDataSection {
}

    #chemDataSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #chemDataSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #chemDataSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #chemDataSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

    #chemDataSection .prompts-grid {
        display: grid;
        grid-column-gap: 30px;
        grid-template-columns: 1fr 1fr;
    }

#chemEstsSection {
}

    #chemEstsSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #chemEstsSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #chemEstsSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #chemEstsSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

    #chemEstsSection .prompts-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

#chemNewEstsSection {
}

    #chemNewEstsSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #chemNewEstsSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #chemNewEstsSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #chemNewEstsSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

    #chemNewEstsSection .prompts-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

#conSection {
}

    #conSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 600px;
    }

        #conSection .basic-grid .left-contents p:last-child {
            margin-bottom: 0px;
        }

        #conSection .basic-grid .left-contents .url {
            text-align: center;
        }

        #conSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

#editSection {
}

    #editSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr auto;
    }

        #editSection .basic-grid .right-contents {
        }

            #editSection .basic-grid .right-contents img {
                width: 500px;
            }

#exportSection {
}

    #exportSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #exportSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #exportSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #exportSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

    #exportSection .prompts-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

#helloSection {
}

    #helloSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #helloSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #helloSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #helloSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

            #helloSection .basic-grid .right-contents .chat-group .chat-image {
                max-height: 290px;
            }

#introSection {
}

    #introSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #introSection .basic-grid .left-contents p:last-child {
            margin-bottom: 0px;
        }

        #introSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
        }

#mixEstsSection {
}

    #mixEstsSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #mixEstsSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #mixEstsSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #mixEstsSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

    #mixEstsSection .prompts-grid {
        display: grid;
        grid-column-gap: 30px;
        grid-template-columns: 1fr 1fr 1.3fr;
    }

#mksSection {
}

    #mksSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1.1fr 1fr;
    }

    #mksSection .prod-grid {
        display: grid;
        grid-column-gap: 20px;
        grid-template-columns: 1fr 1fr;
    }

        #mksSection .prod-grid .product {
            text-align: center;
        }

.prompt {
    background-color: rgb(240, 240, 240);
    border-radius: 4px;
}

    .prompt .prompt-heading {
        color: rgb(0, 0, 100);
        font-size: 70%;
        padding-bottom: 6px;
        padding-left: 10px;
        padding-top: 6px;
    }

    .prompt .prompt-body {
        color: rgb(0, 0, 180);
        display: inline-block;
        padding-bottom: 8px;
        padding-left: 10px;
        padding-right: 20px;
        position: relative;
        width: 100%;
    }

        .prompt .prompt-body .copy-btn {
            background-color: rgb(0, 125, 255);
            border: none;
            border-radius: 3px;
            color: rgb(255, 255, 255);
            cursor: pointer;
            font-size: 10px;
            opacity: 0;
            padding: 5px 8px;
            pointer-events: none;
            position: absolute;
            right: 5px;
            bottom: 5px;
            transition: opacity 0.2s ease;
        }

        .prompt .prompt-body:hover .copy-btn {
            opacity: 1;
            pointer-events: auto;
        }

            .prompt .prompt-body:hover .copy-btn:hover {
                background-color: rgb(0, 125, 255);
            }

                .prompt .prompt-body:hover .copy-btn:hover:active {
                    background-color: rgb(0, 255, 125);
                    color: rgb(0, 0, 0);
                }

    .prompt ~ .prompt {
        margin-top: 20px;
    }

#techsSection {
}

    #techsSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 570px;
    }

        #techsSection .basic-grid .left-contents {
            min-height: 320px;
        }

            #techsSection .basic-grid .left-contents p:last-child {
                margin-bottom: 0px;
            }

        #techsSection .basic-grid .right-contents {
            display: flex;
            flex-direction: column;
        }

#warnSection {
}

    #warnSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

#worksSection {
}

    #worksSection .basic-grid {
        display: grid;
        grid-column-gap: 50px;
        grid-template-columns: 1fr 1fr;
    }

    #worksSection .intro {
    }

        #worksSection .intro img {
            display: block;
            margin-bottom: 30px;
            margin-left: auto;
            margin-right: auto;
            width: 90%;
        }