/* Star - https://www.cursors-4u.com/cursor/sym20 */
html, footer {
  cursor: url('https://cdn.cursors-4u.net/previews/star-f80bf935-32.webp') 32 32, default !important;
}
/* End www.Cursors-4U.com Code */
            
            
            :root {
                --header-image: url('/pictures/gem-run.gif');
                --body-bg-image: url('/bgs/steven.png');
                --content: #43256E;
            }

            body {
                font-family: "Indie Flower", cursive;
                font-weight: 400;
                font-style: normal;
                margin: 0;
                background-color: #F27A79;
                background-size: 65px;
                color: #F7C841;
                background-image: var(--body-bg-image);
                background-size: 209px 104px;
                font-size:large;
            }

            * {
                box-sizing: border-box;
            }
            #container {
                max-width:850px;
                margin: auto;
                margin-top:7px;
                margin-bottom:7px;
            }

            #container a {
                color: #F27A79;
                font-weight: bold;
            }
            
            #container a:hover {
                color:lightpink;
            }

            #header {
                width: 100%;
                height: 250px;
                background-image: var(--header-image);
                background-size: 100%;
                border-radius:10px;
                margin-bottom:10px;
            }

            /* navigation section */
            #navbar {
                height: 40px;
                background-color: lightpink;
                width: 100%;
                border-radius:10px;
                /*border-top-right-radius:10px;*/
                
            }

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

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

            /* navigation links*/
            #navbar li a {
                color: lavenderblush;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: cornsilk;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }

            aside {
                background-color: pink;
                width: 200px;
                padding: 20px;
                border-radius:10px;
                color:lavenderblush;
            }

            main {
                background-color: lavenderblush;
                flex: 1;
                padding: 20px;
                order: 2;
                border-radius:10px;
            }

            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: lightpink;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                border-radius:10px;
                color:lavenderblush;
            }

            h1,
            h2,
            h3,
            h4 {
                color: #F27A79;
                font-family: "Courgette", cursive;
                font-weight: bold;
                font-style: normal;
                margin-top:0;
            }

            h1 {
                font-size: 25px;
            }
            
            p {
              margin-top:0;
            }

            strong {
                color: #F27A79;
            }

            
            
            
            html::-webkit-scrollbar {
                width: 0;
                /* remove scrollbar space */
                background: transparent;
                /* to make scrollbar invisible */
            }
    
            body::-webkit-scrollbar {
                width: 0;
                /* remove scrollbar space */
                background: transparent;
                /* to make scrollbar invisible */
            }
            
            
            
            
            /*my code*/
            
            .image-text {
              display:flex;
              align-items:center;
              gap:10px;
            }
            
            .wrap-text {
              float:left;
            }
            
            #white {
              display:flow-root;
            }
            
            figcaption {
              color:#F27A79;
              font-size: medium;
            }
            
            figure, html, body {
              margin:0;
              padding:0;
            }
            
            .BIG {
              font-size:40px;
            }
            
            #footer a:hover {
              color:lavenderblush;
            }
            
            
            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

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

                aside {
                    width: 100%;
                    margin:10px;
                }
                
                main {
                    order: 1;
                    margin:10px;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
                
                .image-text {
                  display:grid;
                }
            }