<!-- DESCRIPTION 
    
    This code came out bigger than I intended it to be and it's a little messy. 
    
    The main note that goes for this whole thing is that it's modular, so you can remove any of the windows you like by deleting them from their START tag to their END tag.
    
    You can also copy paste them this way and it shouldn't break anything.
    
    For both carousels, data-interval controls how quickly images are shifted through automatically. 0 should disable automatic scrolling.
    
    -----
    
    COLOR KEY: (use ctrl+f to replace all)
    
    WINDOWS OUTER
        Main 1 - #0053E1
        Main 2 - #00128B
        Main Highlight - #3D95FF
        
        Button Light - #8EB0F8
        Button Dark - #0053E1
        Red Light - #EFA28F
        Red Dark - #D93807
        
    WINDOWS INNER
        Main - #ECE8D3
        Shading - #CDCABB
        Text Shadow - #ACA899
        Borders - #716F64
        Textbox - #ffffff
        Textbox Shading - #dcdcdc
    
    ENA SIDES
        LEFT
            SIDE 1 (Meanie):
            Main - #F9F1D2
            Shading - #A6CCD1
            
            SIDE 2 (Humanesque):
            Main - #7FA4AC
            Shading - #31627A
        
        RIGHT
            SIDE 3 (Salesperson):
            Main - #E64437
            Shading - #A02336
            
            SIDE 4 (Cracked):
            Main - #137516
            Shading - #0C4C30
    
-->


<!-- CONTAINER -->
<div class="d-flex" style="flex-wrap: wrap; align-items: center; justify-content: center;">
    
    <!-- ENA SIDES BOX START -->
    <div class="mb-2" style="padding-bottom: 1px; width: 460px; border-radius: 10px 10px 0px 0px; flex-direction: column; border-top: solid 3px #3D95FF; background-image: linear-gradient(to bottom, #0053E1, #00128B)">
        <div class="d-flex" style="height: 27px; padding: 10px 10px 5px 10px; align-items: center;">
            <!-- app icon + name -->
            <div style="width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; flex-grow: 0;
            background-image: url(https://static.wikia.nocookie.net/enajoelg/images/a/a2/DreamBBQIcon.jpg)"></div>
            <p class="text-white pl-1"> - ENA: Dream BBQ </p>
            <!-- seperator -->
            <div style="flex-grow: 1"></div>
            <!-- navigation -->
            <div style="display: flex; flex-grow: 0;">
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 8px; padding-top: 7px; padding-left: 3px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-solid fa-rectangle"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 14px; padding-left: 2px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-regular fa-window-maximize" style="position: relative; bottom: 1px;"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 20px; padding-left: 1px; margin-left: 2px; background-image: linear-gradient(to bottom right, #EFA28F, #D93807)">
                    <i class="fa-regular fa-xmark" style="position: relative; bottom: 6px;"></i>
                </div>
            </div>
        </div>
        
        
        <!-- ENA SIDES PANEL START -->
        <div class="tab-content">
        <div class="card rounded-0" style='position: relative; background-color:#dcdcdc; border: solid 4px #0053E1; padding: 4px; margin: 4px; color: black; font-family: "courier new", courier'>
        <div class="row no-gutters">
            
            <!-- SELECTOR -->
            <!-- Icons from FontAwesome: https://fontawesome.com/v6/search?q=emoji&ip=classic&s=solid&o=r -->
            <div class="col-auto align-items-center order-2" style="margin-left: -13px; margin-right: -12px">
            <ul class="d-flex nav flex-column" style="z-index: 2">
                <li class="nav-item active" style="margin-bottom: 10px">
                    <a data-toggle="tab" href="#side1" class="align-items-center justify-content-center" style="transform: rotate(45deg); width: 25px; height: 25px; color: #A6CCD1; background: #F9F1D2; border: solid 2px #A6CCD1;">
                        
                        <i class="fas fa-face-angry fa-fw"
                        
                        style="font-size: 16px; transform: rotate(-45deg)"></i>
                    </a>
                </li>
                <li class="nav-item" style="margin-bottom: 10px">
                    <a data-toggle="tab" href="#side2" class="align-items-center justify-content-center" style="transform: rotate(45deg); width: 25px; height: 25px; color: #31627A; background: #7FA4AC; border: solid 2px #31627A;">
                        
                        <i class="fas fa-face-dotted fa-fw"
                        
                        style="font-size: 16px; transform: rotate(-45deg)"></i>
                    </a>
                </li>
                <li class="nav-item active" style="margin-bottom: 10px">
                    <a data-toggle="tab" href="#side3" class="align-items-center justify-content-center" style="transform: rotate(45deg); width: 25px; height: 25px; color: #A02336; background: #E64437; border: solid 2px #A02336;">
                        
                        <i class="fas fa-face-grin-wink fa-fw"
                        
                        style="font-size: 16px; transform: rotate(-45deg)"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a data-toggle="tab" href="#side4" class="align-items-center justify-content-center" style="transform: rotate(45deg); width: 25px; height: 25px; color: #0C4C30; background: #137516; border: solid 2px #0C4C30;">
                        
                        <i class="fas fa-face-frown-open fa-fw"
                        
                        style="font-size: 16px; transform: rotate(-45deg)"></i>
                    </a>
                </li>
            </ul>
            </div>
            
            <!-- LEFT SIDE -->
            <div class="col-6 order-1">
                
                <!-- SIDE 1 -->
                <div class="tab-pane fade card rounded-0 show active" id="side1" style="height: 324px; border: solid thin rgba(0,0,0,0.5); border-right: none; background-image: linear-gradient(to bottom, #F9F1D2, #F9F1D2 95%, #A6CCD1 10px, #A6CCD1 10px);">
                    <div class="pt-1 px-2" style='text-align: center; font-size: 20px; font-weight: bold; text-shadow: #A6CCD1 0px 2px;'>
                        
                        MEANIE
                        
                    </div>
                    <div class="p-1 mx-1" style="background: #A6CCD1; border-radius: 5px; letter-spacing: -1px">
                        <span style="font-style: italic; font-weight:bold">
                            
                            "My sympathy's gonna cost you for every condolence!"
                            
                        </span>
                    </div>
                    <div class="card bg-transparent rounded-0 border-0 pl-4 pr-1 pt-2 h-100" style="overflow: auto; transform: scaleX(-1); font-size: 90%; scrollbar-width: thin; scrollbar-color: #A6CCD1 rgba(0, 0, 0, 0); text-shadow: #A6CCD1 0px 1px; z-index: 1">
                    <div style="transform: scaleX(-1)">
                        <p>
                            Meanie is ENA's right side which appears to be more serious, as she is often depicted with a slight frown or neutral expression, contrasting with her smiling red side.
                        </p>
                    </div>
                    </div>
                </div>
                <!-- SIDE 1 END -->
                
                <!-- SIDE 2 -->
                <div class="tab-pane fade card rounded-0" id="side2" style="margin-top: -324px; height: 324px; border: solid thin rgba(0,0,0,0.5); border-right: none; background-image: linear-gradient(to bottom, #7FA4AC, #7FA4AC 95%, #31627A 10px, #31627A 10px);">
                    <div class="pt-1 px-2" style='text-align: center; font-size: 20px; font-weight: bold; text-shadow: #31627A 0px 2px;'>
                        
                        HUMANESQUE
                        
                    </div>
                    <div class="p-1 mx-1" style="background: #31627A; border-radius: 5px; letter-spacing: -1px;">
                        <span style="font-style: italic; font-weight:bold">
                            
                            "I think she speaks but I can't be bothered to find a quote rn"
                            
                        </span>
                    </div>
                    <div class="card bg-transparent rounded-0 border-0 pl-4 pr-1 pt-2 h-100" style="overflow: auto; transform: scaleX(-1); font-size: 90%; scrollbar-width: thin; scrollbar-color: #31627A rgba(0, 0, 0, 0); text-shadow: #31627A 0px 1px">
                    <div style="transform: scaleX(-1)">
                        <p>
                            This form is much more humanesque than ENA's normal appearance.<br>
                            She appears as a realistic (yet stylized) human girl, with a non-polygonal body, accurate shading and realistic clothing. Her face and left arm is pale blue and her right arm is red.<br>
                            She has dark gray irises and mascara on her lower eyelids. Interestingly, her cap is colored differently than in her normal form, as it has a tan base, a green/yellow ribbon and a gold emblem..
                        </p>
                    </div>
                    </div>
                </div>
                <!-- SIDE 2 END -->
                
                
                
                
            </div>
            <!-- LEFT SIDE END -->
            
            
            <!-- RIGHT SIDE -->
            <div class="col-6 order-3">
                
                <!-- SIDE 3 -->
                <div class="tab-pane fade card rounded-0 show active" id="side3" style="height: 324px; border: solid thin rgba(0,0,0,0.5); border-left: none; background-image: linear-gradient(to bottom, #E64437, #E64437 95%, #A02336 10px, #A02336 10px);">
                    <div class="pt-1 px-2" style='text-align: center; font-size: 20px; font-weight: bold; text-shadow: #A02336 0px 2px;'>
                        
                        SALESPERSON
                        
                    </div>
                    <div class="p-1 mx-1" style="background: #A02336; border-radius: 5px; letter-spacing: -1px;">
                        <span style="font-style: italic; font-weight:bold">
                            
                            "Let me help you invest in your future."
                            
                        </span>
                    </div>
                    <div class="card bg-transparent rounded-0 border-0 pl-4 pr-1 pt-2 h-100" style="overflow: auto; font-size: 90%; scrollbar-width: thin; scrollbar-color: #A02336 rgba(0, 0, 0, 0); text-shadow: #A02336 0px 1px; z-index: 1">
                        <p>
                            Salesperson is ENA's left side. This side of Ena acts energetic and calm, offering deals to potential customers.<br>
                            She is often seen smiling when her face is switched to this side.<br>
                            She also appears to talk much more often with this side.
                        </p>
                    </div>
                </div>
                <!-- SIDE 3 END -->
                
                <!-- SIDE 4 -->
                <div class="tab-pane fade card rounded-0" id="side4" style="margin-top: -324px; height: 324px; border: solid thin rgba(0,0,0,0.5); border-left: none; background-image: linear-gradient(to bottom, #137516, #137516 95%, #0C4C30 10px, #0C4C30 10px);">
                    <div class="pt-1 px-2" style='text-align: center; font-size: 20px; font-weight: bold; text-shadow: #0C4C30 0px 2px;'>
                        
                        CRACKED
                        
                    </div>
                    <div class="p-1 mx-1" style="background: #0C4C30; border-radius: 5px; letter-spacing: -1px;">
                        <span style="font-style: italic; font-weight:bold">
                            
                            "..."
                            
                        </span>
                    </div>
                    <div class="card bg-transparent rounded-0 border-0 pl-4 pr-1 pt-2 h-100" style="overflow: auto; font-size: 90%; scrollbar-width: thin; scrollbar-color: #0C4C30 rgba(0, 0, 0, 0); text-shadow: #0C4C30 0px 1px">
                        <p>
                            In this form, ENA's face is green and cracked, leaking blood. Her mouth is jagged and appears on both sides of her face.<br>
                            She has dark, sunken eyes that are rectangular and has circular pupils.<br>
                            The color of her blood and pupils is purple on the left and blue on the right. Her body, outfit and other features are unchanged.<br>
                            Notably, her cap was updated to have different colors from her base form, the ribbon now being the same shade of green as the panels, the emblem being medium-dark gold, and the brim being very dark gray.
                        </p>
                    </div>
                </div>
                <!-- SIDE 4 END -->
                
            </div>
            <!-- RIGHT SIDE END -->
            
            
            
        </div>
        </div>
        </div>
        <!-- ENA SIDES PANEL END -->
        
    </div>
    <!-- ENA SIDES BOX END -->
    
    
    <!-- REFERENCE IMAGE BOX START -->
    <div class="d-flex ml-2 mb-2" style="position: relative; border-radius: 10px 10px 0px 0px; flex-direction: column; border-top: solid 3px #3D95FF; background-image: linear-gradient(to bottom, #0053E1, #00128B)">
        <div class="d-flex" style="height: 27px; padding: 10px 10px 5px 10px; align-items: center;">
            <!-- app icon + name -->
            <div style="width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; flex-grow: 0; background-image: url(https://static.wikia.nocookie.net/enajoelg/images/6/63/Knickyknocky.png)"></div>
            <p class="text-white pl-1"> - Reference </p>
            <!-- seperator -->
            <div style="flex-grow: 1"></div>
            <!-- navigation -->
            <div style="display: flex; flex-grow: 0;">
                    <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 8px; padding-top: 7px; padding-left: 3px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-solid fa-rectangle"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 14px; padding-left: 2px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-regular fa-window-maximize" style="position: relative; bottom: 1px;"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 20px; padding-left: 1px; margin-left: 2px; background-image: linear-gradient(to bottom right, #EFA28F, #D93807)">
                    <i class="fa-regular fa-xmark" style="position: relative; bottom: 6px;"></i>
                </div>
            </div>
        </div>
        
        <!-- REFERENCE IMAGE START -->
        <div class="px-1 pb-2 pt-3" style="position:relative; margin: 4px; flex-grow: 1; background-image: linear-gradient(to top, #CDCABB 80%, #CDCABB, #ECE8D3); color: black; border: solid 4px #0053E1">
            <!-- CAROUSEL CONTROLS -->
            <div class="d-flex mt-1" style="z-index: 1; position: absolute; bottom: 4px;">
                <a class="carousel-control align-items-center justify-content-center" role="button" data-slide="prev" href="#enaRefs" style="height: 18px; width: 18px;color: #716F64; border: solid thin #716F64; border-radius: 2px; margin-right:1px; background-image: linear-gradient(to top, #CDCABB, #ECE8D3)">
                    <i class="fa-sharp fa-solid fa-arrow-left"></i>
                </a>
                <a class="carousel-control align-items-center justify-content-center" role="button" data-slide="next" href="#enaRefs" style="height: 18px; width: 18px;color: #716F64; border: solid thin #716F64; border-radius: 2px; margin-left:1px; background-image: linear-gradient(to top, #CDCABB, #ECE8D3)">
                    <i class="fa-sharp fa-solid fa-arrow-right"></i>
                </a>
            </div>
            
            <!-- REFERENCE CAROUSEL START -->
            <div class="carousel slide" data-ride="carousel" data-interval="5000" id="enaRefs">
                <div class="carousel-inner">
                    
                    <!-- REF SIZES
                    width: 220px; height: 270px;
                    I recommend keeping this consistent across all refs if you change it- but it won't break the code if they're different. 
                    -->
                    
                    <!-- REF 1 -->
                    <div class="carousel-item active">
                        <div class="p-2" style="background-image: linear-gradient(to top, #dcdcdc, #ffffff 50%); border: solid thin #716F64">
                            <div style="width: 220px; height: 270px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/8/8e/EnaVariant.png
                            
                            )"></div><!-- Image link above -->
                        </div>
                        <div style='font-family: "courier new", courier; font-weight: bold; font-size: 90%; text-align: right; text-shadow: #ACA899 0px 1px;'>
                            <a class="tooltipster" style="color:#0053E1; text-decoration: underline;"
                                
                                title="Art by Joel G" href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)">
                                Meanie/Salesperson
                                
                            </a>
                        </div>
                    </div>
                    
                    <!-- REF 2 -->
                    <div class="carousel-item">
                        <div class="p-2" style="background-image: linear-gradient(to top, #dcdcdc, #ffffff 50%); border: solid thin #716F64">
                            <div style="width: 220px; height: 270px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/2/24/Ena_humanesque.png
                            
                            )"></div><!-- Image link above -->
                        </div>
                        <div style='font-family: "courier new", courier; font-weight: bold; font-size: 90%; text-align: right; text-shadow: #ACA899 0px 1px;'>
                            <a class="tooltipster" style="color:#0053E1; text-decoration: underline;"
                                
                                title="Art by Joel G" href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)">
                                Humanesque
                                
                            </a>
                        </div>
                    </div>
                    
                    <!-- REF 3 -->
                    <div class="carousel-item">
                        <div class="p-2" style="background-image: linear-gradient(to top, #dcdcdc, #ffffff 50%); border: solid thin #716F64">
                            <div style="width: 220px; height: 270px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/4/4e/Ena_green.png
                            
                            )"></div><!-- Image link above -->
                        </div>
                        <div style='font-family: "courier new", courier; font-weight: bold; font-size: 90%; text-align: right; text-shadow: #ACA899 0px 1px;'>
                            <a class="tooltipster" style="color:#0053E1; text-decoration: underline;"
                                
                                title="Art by Joel G" href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)">
                                Cracked
                                
                            </a>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
            <!-- REFERENCE CAROUSEL END -->
            
        </div>
        <!-- REFERENCE IMAGE END -->
        
    </div>
    <!-- REFERENCE IMAGE BOX END -->
    
    
    <!-- MOODBOARD BOX START -->
    <div class="d-flex ml-2 mb-2" style="position: relative; border-radius: 10px 10px 0px 0px; flex-direction: column; padding: 4px; border-top: solid 3px #3D95FF; background-image: linear-gradient(to bottom, #0053E1, #00128B)">
        <div class="d-flex" style="height: 27px; padding: 10px 10px 5px 10px; align-items: center;">
            <!-- app icon + name -->
            <div style="width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; flex-grow: 0; background-image: url(https://static.wikia.nocookie.net/enajoelg/images/5/58/Pleasedonttaptheglass.png)"></div>
            <p class="text-white pl-1"> - Moodboard </p>
            <!-- seperator -->
            <div style="flex-grow: 1"></div>
            <!-- navigation -->
            <div style="display: flex; flex-grow: 0;">
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 8px; padding-top: 7px; padding-left: 3px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-solid fa-rectangle"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 14px; padding-left: 2px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-regular fa-window-maximize" style="position: relative; bottom: 1px;"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 20px; padding-left: 1px; margin-left: 2px; background-image: linear-gradient(to bottom right, #EFA28F, #D93807)">
                    <i class="fa-regular fa-xmark" style="position: relative; bottom: 6px;"></i>
                </div>
            </div>
        </div>
        
        <!-- MOODBOARD START -->
        <div class="d-flex px-1 py-2" style="width: 340px; flex-wrap: wrap; margin-top: 4px; justify-content: center; background-image: linear-gradient(to top, #CDCABB, #ECE8D3); border: solid 4px #0053E1;">
            
            <!-- MB ROW 1 -->
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/1e/78/06/1e780653fa33ee78b3dfbaa788f44bca.gif
            
            )"></div>
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/bb/3f/08/bb3f08d2f8d0bfd9e4574701906dc6fd.gif
            
            )"></div>
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/8c/dc/13/8cdc13272525d79e858afba733529235.gif
            
            )"></div>
            
            
            <!-- MB ROW 2 -->
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/d7/ce/03/d7ce03c2bd7a700675878904dce7b8cc.gif
            
            )"></div>
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/736x/2c/f8/b5/2cf8b55ef6a38bf6be9ab4104f72bfe9.jpg
            
            )"></div>
            <div class="fa-flip-horizontal" style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/d7/ce/03/d7ce03c2bd7a700675878904dce7b8cc.gif
            
            )"></div>
            
            
            <!-- MB ROW 3 -->
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/fe/87/02/fe8702f675e40acf4120a8699645318b.gif
            
            )"></div>
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/35/7e/de/357ede9d1018a17859f5148acf1d6fbb.gif
            
            )"></div>
            <div style="width: 100px; height: 100px; margin: 4px 2px 2px 2px; background-size: cover; border: solid thin #716F64; background-image: url(
            
            https://i.pinimg.com/originals/84/e4/7b/84e47b366e49de9a0114b10428e63c2c.gif
            
            )"></div>
            
            <div style='font-family: "courier new", courier; font-weight: bold; font-size: 90%; width: 100%; text-align: right; text-shadow: #ACA899 0px 1px; color: black;'>
                GIFs from Pinterest
                <!-- 
                NOTE: if you want to credit more properly, you can change all the <div> into <a> and add href="source url" in order to redirect to the image's specific source.
                You can also change this <div> into an <a>, in which case I recommend borrowing the <a> code from the Reference section!
                -->
            </div>
            
        </div>
        <!-- MOODBOARD END -->
        
    </div>
    <!-- MOODBOARD BOX END -->
    
    
    <!-- INFORMATION BOX START -->
    <div class="d-flex ml-2 mb-2" style="position: relative; border-radius: 10px 10px 0px 0px; flex-direction: column; border-top: solid 3px #3D95FF; background-image: linear-gradient(to bottom, #0053E1, #00128B); max-width: 500px;">
        <div class="d-flex" style="height: 27px; padding: 10px 10px 5px 10px; align-items: center;">
            <!-- app icon + name -->
            <div style="width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; flex-grow: 0; background-image: url(https://static.wikia.nocookie.net/enajoelg/images/f/f0/EnaSeason2_Talk.gif)"></div>
            <p class="text-white pl-1"> - ENA.txt </p>
            <!-- seperator -->
            <div style="flex-grow: 1"></div>
            <!-- navigation -->
            <div style="display: flex; flex-grow: 0;">
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 8px; padding-top: 7px; padding-left: 3px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-solid fa-rectangle"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 14px; padding-left: 2px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-regular fa-window-maximize" style="position: relative; bottom: 1px;"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 20px; padding-left: 1px; margin-left: 2px; background-image: linear-gradient(to bottom right, #EFA28F, #D93807)">
                    <i class="fa-regular fa-xmark" style="position: relative; bottom: 6px;"></i>
                </div>
            </div>
        </div>
        
        <!-- INFORMATION START -->
        <div class="p-2 d-flex" style="margin: 4px; flex-grow: 1; background-image: linear-gradient(to top, #CDCABB 70%, #ECE8D3); color: black; border: solid 4px #0053E1; flex-direction: column;">
            <div class="d-flex">
                
                <!-- ICON CAROUSEL START -->
                <div class="d-flex mr-2" style="flex-direction: column; align-items: center;">
                    <div class="carousel slide" data-ride="carousel" data-interval="5000" id="enaIcons" style="width:100px; height:100px; border: solid thin #716F64;">
                        <div class="carousel-inner" style="width: 100%; height: 100%">
                            
                            <!-- ICON 1 -->
                            <a href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)" class="carousel-item active" style="width: 100%; height: 100%; background-size:cover; background-position:center; background-image:url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/b/b8/Screenshot_2025-04-13_6.08.52_PM.png
                            
                            )"></a>
                            
                            <!-- ICON 2 -->
                            <a href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)" class="carousel-item" style="width: 100%; height: 100%; background-size:cover; background-position:center; background-image:url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/2/29/Screenshot_2025-04-13_6.08.20_PM.png
                            
                            )"></a>
                            
                            <!-- ICON 3 -->
                            <a href="https://enajoelg.fandom.com/wiki/Ena_(Dream_BBQ)" class="carousel-item" style="width: 100%; height: 100%; background-size:230px; background-position:120px; background-image:url(
                            
                            https://static.wikia.nocookie.net/enajoelg/images/1/16/BBQEnaFormConceptArt.jpeg
                            
                            )"></a>
                            
                        </div>
                    </div>
                    
                    <!-- CAROUSEL CONTROLS -->
                    <div class="d-flex mt-1">
                        <a class="carousel-control align-items-center justify-content-center" role="button" data-slide="prev" href="#enaIcons" style="height: 18px; width: 18px;color: #716F64; border: solid thin #716F64; border-radius: 2px; margin-right:1px; background-image: linear-gradient(to top, #CDCABB, #ECE8D3)">
                            <i class="fa-sharp fa-solid fa-arrow-left"></i>
                        </a>
                        <a class="carousel-control align-items-center justify-content-center" role="button" data-slide="next" href="#enaIcons" style="height: 18px; width: 18px;color: #716F64; border: solid thin #716F64; border-radius: 2px; margin-left:1px; background-image: linear-gradient(to top, #CDCABB, #ECE8D3)">
                            <i class="fa-sharp fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <!-- ICON CAROUSEL END -->
                
                <!-- FIELDS START -->
                <div class="d-flex" style="flex-direction: column; flex-grow: 1">
                    
                    <!-- NAME -->
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 220px'>
                        <span style="flex-grow: 0">
                            
                            Goes by
                            
                        </span>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            ENA
                            
                        </span>
                    </div>
                    
                    <!-- PRONOUNS -->
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 220px'>
                        <span style="flex-grow: 0">
                            
                            Pronouns
                            
                        </span>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            she/her
                            
                        </span>
                    </div>
                    
                    <!-- ADD FIELD -->
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 220px'>
                        <span style="flex-grow: 0">
                            
                            Field
                            
                        </span>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            Wohhoo
                            
                        </span>
                    </div>
                    
                    <!-- ADD FIELD -->
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 220px'>
                        <span style="flex-grow: 0">
                            
                            Field
                            
                        </span>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            Yippe
                            
                        </span>
                    </div>
                    
                </div>
                <!-- FIELDS END -->
                
            </div>
            
            <!-- OTHER TEXTBOX -->
            <div class="px-1 mt-1" style='max-height: 250px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ACA899 rgba(0, 0, 0, 0); font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; font-size: 90%; background-image: linear-gradient(to top, #dcdcdc, #ffffff, #ffffff 30%); border: solid thin #716F64'>
                <p>
                    I would tell you about ENA's backstory here if I knew exactly what was going on with it.<br>
                    So like, yeah, I recommend you talk about your character's personality or story here... If your character is an ENA then the personality bit's kinda covered by the sides section, though.
                </p>
                <p>
                    You know, ultimately, you can put anything you want here. I'm not the boss of you...
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <!-- COPY PASTE HERE IF YOU WANT MORE BOXES -->
            
        </div>
        <!-- INFORMATION END -->
        
    </div>
    <!-- INFORMATION BOX END -->
    
    
    <!-- RELATIONSHIPS BOX START -->
    <div class="d-flex ml-2 mb-2" style="position: relative; border-radius: 10px 10px 0px 0px; flex-direction: column; border-top: solid 3px #3D95FF; background-image: linear-gradient(to bottom, #0053E1, #00128B); max-width: 500px;">
        <div class="d-flex" style="height: 27px; padding: 10px 10px 5px 10px; align-items: center;">
            <!-- app icon + name -->
            <div style="width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; flex-grow: 0; background-image: url(https://static.wikia.nocookie.net/enajoelg/images/f/fa/Ena_meanie_icon.png)"></div>
            <p class="text-white pl-1"> - Contacts </p>
            <!-- seperator -->
            <div style="flex-grow: 1"></div>
            <!-- navigation -->
            <div style="display: flex; flex-grow: 0;">
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 8px; padding-top: 7px; padding-left: 3px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-solid fa-rectangle"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 14px; padding-left: 2px; margin-left: 2px; background-image: linear-gradient(to bottom right, #8EB0F8, #0053E1)">
                    <i class="fa-regular fa-window-maximize" style="position: relative; bottom: 1px;"></i>
                </div>
                <!-- -->
                <div style="width: 21px; height:21px; border: solid thin white; border-radius: 3px; font-size: 20px; padding-left: 1px; margin-left: 2px; background-image: linear-gradient(to bottom right, #EFA28F, #D93807)">
                    <i class="fa-regular fa-xmark" style="position: relative; bottom: 6px;"></i>
                </div>
            </div>
        </div>
        
        <!-- RELATIONSHIPS START -->
        <div class="p-2 d-flex" style="margin: 4px; flex-grow: 1; background-image: linear-gradient(to top, #CDCABB 70%, #ECE8D3); color: black; border: solid 4px #0053E1; flex-direction: column; max-height: 350px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ACA899 rgba(0, 0, 0, 0);">
            
            <!-- RELATIONSHIP 1 -->
            <div class="d-flex mb-1">
                <div style="width: 100px; height: 100px; border: solid thin #716F64; background-size:cover; background-position:center; background-image:url(
                
                https://static.wikia.nocookie.net/enajoelg/images/c/c3/FroggyBanner.gif
                
                )"></div><!-- Character avatar above -->
                <div class="ml-1 d-flex" style="flex-direction: column; flex-grow: 0">
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 250px'>
                        <a style="color:#0053E1; text-decoration: underline; font-weight: bold;" href=
                            
                            "https://enajoelg.fandom.com/wiki/Froggy">
                            Froggy
                            
                        </a>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            Coworker
                            
                        </span>
                    </div>
                    <div class="px-1" style='height: 72px; max-width: 375px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ACA899 rgba(0, 0, 0, 0); font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; font-size: 80%; background-image: linear-gradient(to top, #dcdcdc, #ffffff, #ffffff 30%); border: solid thin #716F64'>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        
                    </div>
                </div>
            </div>
            <!-- RELATIONSHIP 1 END -->
            
            <!-- RELATIONSHIP 2 -->
            <div class="d-flex mb-1">
                <div style="width: 100px; height: 100px; border: solid thin #716F64; background-size:cover; background-position:center; background-image:url(
                
                https://media1.tenor.com/m/HU9P-IhSOl4AAAAC/ena-coral-glasses.gif
                
                )"></div><!-- Character avatar above -->
                <div class="ml-1 d-flex" style="flex-direction: column; flex-grow: 0">
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 250px'>
                        <a style="color:#0053E1; text-decoration: underline; font-weight: bold;" href=
                            
                            "https://enajoelg.fandom.com/wiki/Coral_Glasses">
                            Coral Glasses
                            
                        </a>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            Coworker
                            
                        </span>
                    </div>
                    <div class="px-1" style='height: 72px; max-width: 375px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ACA899 rgba(0, 0, 0, 0); font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; font-size: 80%; background-image: linear-gradient(to top, #dcdcdc, #ffffff, #ffffff 30%); border: solid thin #716F64'>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        </p>
                        
                    </div>
                </div>
            </div>
            <!-- RELATIONSHIP 2 END -->
            
            <!-- RELATIONSHIP 3 -->
            <div class="d-flex mb-1">
                <div style="width: 100px; height: 100px; border: solid thin #716F64; background-size:cover; background-position:center; background-image:url(
                
                https://static.wikia.nocookie.net/enajoelg/images/2/21/TaskiEgg.png
                
                )"></div><!-- Character avatar above -->
                <div class="ml-1 d-flex" style="flex-direction: column; flex-grow: 0">
                    <div class="px-1 mb-1 d-flex" style='font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; align-items: center; background-image: linear-gradient(to top, #dcdcdc, #ffffff 60%); border: solid thin #716F64; min-width: 250px'>
                        <a style="color:#0053E1; text-decoration: underline; font-weight: bold;" href=
                            
                            "https://enajoelg.fandom.com/wiki/Taski_Maiden">
                            Taski Maiden
                            
                        </a>
                        <div class="mx-2" style="flex-grow: 1; height:1px; border-top: solid thin #716F64;"></div>
                        <span style="flex-grow: 0">
                            
                            Client
                            
                        </span>
                    </div>
                    <div class="px-1" style='height: 72px; max-width: 375px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ACA899 rgba(0, 0, 0, 0); font-family: "courier new", courier; text-shadow: #ACA899 0px 1px; font-size: 80%; background-image: linear-gradient(to top, #dcdcdc, #ffffff, #ffffff 30%); border: solid thin #716F64'>
                        
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        
                    </div>
                </div>
            </div>
            <!-- RELATIONSHIP 3 END -->
            
            <!-- CODE CREDIT!! You may move this but not remove it! (can be moved right before the end </div> of any box) -->
            <a class="tooltipster align-items-center justify-content-center" title="Code by PURPURC4T" href="https://toyhou.se/PURPURC4T" style="position: absolute; bottom: 10px; right: 10px; height: 20px; width: 20px;color: #716F64; border: solid thin #716F64; border-radius: 2px; background-image: linear-gradient(to top, #CDCABB, #ECE8D3)">
                <i style="font-size: 12px" class="fa-sharp fa-solid fa-code"></i>
            </a>
            <!-- CODE CREDIT END -->
        </div>
        <!-- RELATIONSHIPS END -->
        
    </div>
    <!-- RELATIONSHIPS BOX END -->
    
</div>