<style>
            /* BELOW THIS POINT IS CSS */

             @font-face {
                font-family: Barlow;
                src: url('https://heartgrooooove.neocities.org/Fonts/Barlow-Regular.ttf');
            }

            @font-face {
                font-family: Barlow;
                src: url('https://heartgrooooove.neocities.org/Fonts/Barlow-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Barlow;
                src: url('https://heartgrooooove.neocities.org/Fonts/Barlow-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Barlow;
                src: url('https://heartgrooooove.neocities.org/Fonts/Barlow-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }
            
            ol li::marker{
    font-weight: bold;
    color: #D33369 !important;}
  
    
            ul li::marker{
    font-weight: bold;
    color: #D33369 !important;
  
  }

            body {
                font-family: sans-serif;
                margin: 0;
                background-color: #ede4ea;
                background-size: 200px;
                color: #43364d;
                word-wrap: break-word;
            }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 900px;
                margin: 0 auto;
            }

            #container a {
                color: #3caad0;
                font-weight: bold;
            }
            
            #container a:hover {
                color: #D33369;
                font-weight: bold;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
            }

            #header {
                width: 100%;
                height: 150px;
                background-color: #D33369;
                background-image: url('https://heartgrooooove.neocities.org/header.png');
                background-size: 100%;
                background-repeat: no-repeat; 
                background-position: center;
            }

            #navbar {
                height: 40px;
                background-color: #D33369;
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

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

            #navbar li a {
                color: #f7f4f6;
                font-weight: bold;
                text-decoration: none;
                text-transform: uppercase;
                font-size: 18px;
                font-family: 'Barlow';
                padding: 10px;
            }

            #navbar li a:hover {
                color: #43364d;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
                text-decoration: none;
            }

            #flex {
                display: flex;
            }

            aside {
                background-color: #f7f4f6;
                width: 200px;
                line-height: 17px;
                font-size: 13px;
            }

            main {
                background-color: #f7f4f6;
                flex: 1;
                padding: 10px 40px;
                order: 2;
                line-height: 19px;
                font-size: 16px;
                
            }

            footer {
                background-color: #13092D;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }
            
            textarea {
                color: #43364d;
                border: 1px solid #3caad0;
                outline: none;
                background-color: #ecf0f3;
                resize: none;
                width: 150px;
                height: 31px;
            }
            
            button {
                padding: 4px;
                font-family: 'Barlow';
                font-weight: bold;
                text-align: center;
                text-transform: uppercase;
                background-color: #43364d;
                color: #f7f4f6;
                border: 3px solid #43364d;
                height: 31px;
            }
          

            button:hover {
                color: #f7f4f6;
                border: 3px solid #3caad0;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s;
                background-color: #3caad0;
                cursor: pointer;
            }
            
            
            .imggallery {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
             
            }
        
            
            .imggallery_item {
                padding:2px;
                  flex: 1;
                                
            }
            
            
            
            h2,
            h3 {
                color: #f7f4f6;
                text-transform: lowercase;
                font-family: 'Barlow';
                font-size: 20px;
                background-color: #3caad0;
                padding: 10px;
                width: 100%;
            }

            h1 {
                font-size: 25px;
                text-align:right;
                color: #D33369;
                text-transform: lowercase;
                font-family: 'Barlow';
                line-height:25px;
            }
            
            h1::after{
                display: block;
                content: '';
                margin-top: 10px;
                border-bottom: 3px dotted #3caad0;
            }

            strong {
                color: #D33369;
            }

            .bluebox {
                background-color: #ecf0f3;
                border: 1px solid #3caad0;
                padding: 10px;
                margin-bottom: -5px;
                height: 120px;
                overflow: auto;
            }

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

            /* BELOW THIS POINT IS MEDIA QUERY */
            
             @media only screen and (max-width: 768px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                    line-height: 19px;
                    font-size: 16px;
                    margin-right: -10px !important;
                    padding: 0 40px;
                    margin-top:10px;
                }

                main {
                    order: 1;
                    width: 100%;
                }

                #leftSidebar {
                    order: 2;
                }
                
                #navbar ul {
                    flex-wrap: wrap;
                }
                
                #header {
                    background-repeat: no-repeat; 
                    background-position: center;
                    height:130px;
                }
              
                
             }
                
              @media only screen and (max-width: 488px) {
                #navbar {
                  height:70px;
                }
                
              #header {
                    background-repeat: no-repeat; 
                    background-position: center;
                    height:80px;
              }
            
              }
               
             
             
</style>