Pastel Pink Neocities Theme

<!-- PASTEL PINK THEME BY HAL @FRIENDNETWORK! -->
<!-- Make changes where needed, but do not remove credit! -->
<!-- Have any concerns? Email me at sysarchitect@protonmail.com. -->


<br><br>
  <div id="container">
    <div id="headerArea">
      <div id="navbar">
       <ul>
<!-- This navigation bar will automatically adjust to include more links. -->
            <li><em><a href="_">LINK ONE</a></em></li>
               <li><em><a href="_">LINK TWO</a></em></li>
                  <li><em><a href="_">LINK THREE</a></em></li>
                     <li><em><a href="_">LINK FOUR</a></em></li>
            </ul>
             </div>
              </div>
            <!-- A darker box with a lighter sub-box on the inside. -->
            <div class="box"><div class="lightbox"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. </p>
            </div></div>


            <!-- Left Sidebar Box 1 -->
              <div id="flex">
                <aside id="leftSidebar">
                    <div class="roundcorners">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. </p>
                    </div>
                      <br>
             <!-- Left Sidebar Box 2 -->
                        <div class="roundcorners">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. </p>
                            </div>


                </aside>
                <main>
                   <h1 align="center">The Title of My Awesome Site!</h1>
                    <img src="https://drtheme.neocities.org/host/girls.gif"/>
                     <div class="roundcorners">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. At auctor urna nunc id cursus. Eu sem integer vitae justo eget magna fermentum. Varius vel pharetra vel turpis. </p>
                        </main>

            <!-- Right Sidebar Box 1 -->
                 <aside id="rightSidebar">
                  <div class="roundcorners">
                    <p>Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Et netus et malesuada fames ac turpis egestas. Suspendisse ultrices gravida dictum fusce ut. Ut tellus elementum sagittis vitae et leo duis. Iaculis eu non diam phasellus vestibulum lorem sed risus.</p>
                    </div>
                    <br>
            <!-- Right Sidebar Box 2 -->
                    <div class="roundcorners">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. </p>
                    </div>
                      </aside>
                        </div>

             <!-- A darker box with a lighter sub-box on the inside. -->
                 <div class="box"><div class="lightbox"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus. Nibh praesent tristique magna sit amet purus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Aliquam ut porttitor leo a. Sed elementum tempus egestas sed. Tristique sollicitudin nibh sit amet commodo. </p>
            </div></div>
              </div>
               <style>

            :root {
                --body-bg-image: url('https://drtheme.neocities.org/host/plaid.png');
            }

            /* The style of your body text. */

            body {
                font-family: 'Arial';
                margin: 0;
           /* Affects the size of your image background. */
                background-size: 100px;
          /* Creates a failsafe background color if your background image fails to load. If you'd prefer to use a plain color instead, just remove the body-bg-image portion. */
                background-color: #08031A;
          /* Changes the color of your body text. */
                color: #f53cb3;
                background-image: var(--body-bg-image);
          /* A custom cursor. To use an alternate custom cursor, upload your own file and give it the same name (cursor.jpg/png/gif). */
                cursor: url('https://drtheme.neocities.org/host/cursor.gif'), auto;
            }

            * {
                box-sizing: border-box;
            }
             /* The overall size of your center container. */
            #container {
                max-width: 1100px;
                margin: 0 auto;
                border: 12px solid #7cedff;
                border-radius: 25px;
            }

            #container a {
                color: #ED64F5;
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                height: 150px;
                background-image: var(--header-image);
                background-size: 100%;
            }

            #navbar {
                height: 30px;
                background-color: #fd6fc5;
                width: 100%;

            }

          /* Styling for navbar link list. */
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 0px;
            }

            #navbar li a {
                color: #b53fff;
                font-weight: 800;
                text-decoration: none;
            }

            /* Styling for navbar links on hover. */
            #navbar li a:hover {
                color: #fffe92;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            #leftSidebar {
                background-image: url('https://drtheme.neocities.org/host/checker.gif');
                width: 350px;
                padding: 20px;
                font-size: smaller;
                border: 3px dashed pink;
            }


            #rightSidebar {
                background-image: url('https://drtheme.neocities.org/host/starry.gif');
                width: 350px;
                padding: 20px;
                font-size: smaller;
                border: 5px dashed pink;
            }


            main {
                background-color: #ffb1e1;
                flex: 1;
                padding: 20px;
                order: 2;
            }

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #13092D;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }

         /* Text styles for headers 1-3 and bold text. */

            h1,
            h2,
            h3 {
                color: #ff1da8;
            }

            h1 {
                font-size: 25px;
                font-family: 'Times New Roman';
                text-decoration: underline wavy #ff4fb9 5px;
            }

            strong {
                color: #ED64F5;
            }

            .box {
                background-color: #9bd1ff;
                border: 1px solid #ED64F5;
                padding: 10px;
            }

            .lightbox {
                background-color: white;
                border: 1px solid #ED64F5;
                padding: 10px;
            }

            .roundcorners {
               border: 3px solid #ED64F5;
               border-radius: 30px;
               background-image: url('host/hearts.gif');
               background-size: 200px;
               padding: 10px;
                }

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }


        </style>