body {
  background-color: white;
  color: black;
  font-family: Garamond;
  font-family: 'PixelOperator';
}
@font-face {
    font-family: "PixelOperator"; 
    src: url('https://flourishrose.neocities.org/fonts/PixelOperator/PixelOperator.ttf') format("truetype");
  }
@font-face {
    font-family: "PixelOperator"; 
    src: url('https://flourishrose.neocities.org/fonts/PixelOperator/PixelOperator-Bold.ttf') format("truetype");
    font-weight: bold;
  }
            h1,
            h2,
            h3,
            h4 {
                color: #460033;
            }

            h1 {
                font-family: Garamond;
                font-size: 35px;
            }

            strong {
                /* this styles bold text */
                font-family: Garamond;
                color: #460033;
            }
            
            p {
              font-size: 18px;
            }
            g {
                color:#1ea749;
                outline: #00222c;
                outline-width: 2;
            }
            pg {
                font-size: 18px;
                color: #1ea749;
                font-weight: 800;
                font-family: Garamond, sans-serif;
                outline: #00222c;
                outline-width: 2;

            }
            altp{
              color:#00020a;
              font-size: 18px;
            }
            .sidebar-text {
              color: #582157;
            }


            body {
                font-family: 'PixelOperator';
                margin: 0;
                background-color: #000000;
                background-size: 130px;
                color: #00222c;
                background-image:url('https://flourishrose.neocities.org/ignition/images/starsblank.gif') ; 
            }

            * {
                box-sizing: border-box;
            }
            #container {
                max-width: 1300px;
                margin: 0 auto;
            }
            #header {
                width: 100%;
                background-color: #f4d7df;
                height: 100px;
            }
             #navbar {
                height: 40px;
                background-color: #260f1e;
                /* navbar color */
                width: 100%;
                /* old navbar color: #111013 */
            }
            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }
            #navbar li {
                padding-top: 10px;
            }
            #navbar li a {
                font-family: Garamond, sans-serif;
                color: #DE3798;
                font-weight: 800;
                text-decoration: none;
            }
            #navbar li a2 {
                font-family: Garamond, sans-serif;
                color: #37de6c;
                font-weight: 800;
                text-decoration: none;
            }
            #navbar li a:hover {
                color: #5aff7b;
                text-decoration: underline;
            }
            #navbar li a2:hover {
                color: #5aff7b;
                text-decoration: underline;
            }

            #modbar { font-size: 130%;
                height:500px;
                background-color: #260f1e;
                width: 95%;
                margin:auto;
            }
            #modbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }
            #modbar li {
                padding-top: 10px;
            }
            #modbar li a {
                font-size: 250%;
                font-family: Garamond, sans-serif;
                color: #37de6c;
                font-weight: 800;
                text-decoration: none;
            }
            #modbar li a3 { /*The one that doesn't have hover color*/
                font-family: Garamond, sans-serif;
                color: #37de6c;
                font-weight: 800;
                text-decoration: none;
            }
            #modbar li a:hover {
                color: #5aff7b;
                text-decoration: underline;
            }
            #footbar {
                height: 40px;
                background-color: #260f1e;
                /* navbar color */
                width: 95%;
                margin:auto;
            }
            #footbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: flex-end;
            }
            #footbar li {
                padding-top: 10px;
            }
            #footbar li a {
                font-family: Garamond, sans-serif;
                color: #DE3798;
                font-weight: 800;
                text-decoration: none;
            }
            #footbar li a2 {
                font-family: Garamond, sans-serif;
                color: #37de6c;
                font-weight: 800;
                text-decoration: none;
            }
            #footbar li a3 { /*The one that doesn't have hover color*/
                font-family: Garamond, sans-serif;
                color: #37de6c;
                font-weight: 800;
                text-decoration: none;
            }
            #footbar li a:hover {
                color: #5aff7b;
                text-decoration: underline;
            }
            #footbar li a2:hover {
                color: #5aff7b;
                text-decoration: underline;
            }
            #flex {
                display: flex;
            }
            aside {
                background-color: #ffc4ec;
                width: 200px;
                padding: 20px;
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }

            .invisbox{
                font-size: 200%;
                width: 100%;
                margin:auto;
                display: grid;
                place-items: center;
                 height: 100%;
                padding:20%;
            }

            #footbar li {
                padding-top: 10px;
            }
            main {
              background-image: linear-gradient(#ffc4ec, #ff73d3);
              flex: 1;
              padding: 20px;
              order: 2;
              }
               #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            .postbox{
                background-color: #eccae2;
                border: 1px solid #ED64F5;
                padding: 10px;
                padding-inline-start: 0%;
                padding-inline-end: 0%;
                width: 100%;
                /*from 900px*/
            }
            .infobox{
                background-color: #ac19fc4b;
                border: 1px solid #ED64F5;
                /*height:40;
                min-height:15%;*/
                width:95%;
                padding: 10px;
                margin: auto;
            }
            .postmargin{
                background-color: #eccae2;
                height: 10px;
                width: 100%;

            }
            .row {
                display : flex;
                align-items : center;
                margin-bottom: 15px;
            }
            .commentrow{
                display : flex;
                align-items : center;
                margin-bottom: 5px;
            }
            .box {
            height: 80px;
            width: 80px;
            border: 1px solid black;
             margin-right : 5px;
            }
            .bigbox{
            height: 160px;
            width: 160px;
            border: 1px solid black;
             margin-right : 5px;
            }
            .tinybox{
                height: 20px;
                width: 20px;
                border: 1px solid black;
             margin-right : 5px;
            }
            img {max-width:100%;}
            #footer {
                background-color: #1c1c1c;
                width: 100%;
                height: 40px;
                text-align: center;
            }
            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            /*text colors */

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

                aside {
                    width: 100%;
                }
             }