@font-face {                  
font-family: 'F5.6';
src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'F5.6';
src: url(https://humantooth.neocities.org/fonts/F5.6-Regular.woff) format('woff');
font-weight: normal;
}




            body {
                font-family: 'F5.6', sans-serif;
                margin: 0;
                background-color: #ffffff;

                background-size: 65px;
                color: #d5d5d5;
                background-image: var(--body-bg-image);
                text-align: center
            }

            * {
                box-sizing: border-box;
            }


            #container {
                max-width: 1200px;
                max-height: 1000px;

                margin: 0 auto;

            }

    
            #container a {
                color: #181818;
                font-weight: bold;
                

            }

            #header {
                width: 100%;
                padding: 10px;
                background-color: rgba(94, 78, 140, 0);

                height: 10px;
                
                

            }

                
            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #a8a8a8;
                /* navbar color */
                width: 100%;
            }

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

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


            #navbar li a {
                color: #9f9f9f;

                font-weight: 800;
                text-decoration: none;

            }

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

            #flex {
                display: flex;
            }

            aside {
                background-color: rgba(50, 33, 24, 0.32);
                width: 170px;
                height:715px;
                padding: 20px;
                font-size: smaller;
                border-radius: 86px;
               justify-content: center;
                border: 5px solid rgba(0, 0, 0, 0.5);
            


            }


            main {
                background-color: #505051;
                flex: 1;
                max-width: 900px;
                height: 100%;
                padding: 20px;
                order: 2;
                border-radius: 86px;
                border: 5px solid rgba(0, 0, 0, 0.5);
                  background: url('https://64.media.tumblr.com/33b269f01dc188d6cddd39887b486b59/tumblr_inline_mkjkxoxwl51qz4rgp.jpg');
                overflow: hidden


                box-shadow:  30px 30px 60px rgba(0, 0, 0, 0.56),
             -30px -30px 60px rgba(183, 183, 183, 0.11);
             margin-right: 40px;
             margin-left: 40px;
            }


            */ #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
                overflow: auto;

            }

            footer {
                background-color: rgba(12, 12, 12, 0);

                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;

            }

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

            h1 {
                font-size: 25px;
            }

            strong {

                color: #ffffff;
            }


            .box {
                background-color: #504440;
                height:70px;
                border: 1px solid rgba(237, 100, 245, 0);
                padding: 10px;
                border-radius: 20px;
               justify-content: center;
                border: 5px solid rgba(0, 0, 0, 0.5);
                margin-bottom: 20px;
                  position: static;
                box-shadow:  30px 30px 60px rgba(0, 0, 0, 0.56),
             -30px -30px 60px rgba(183, 183, 183, 0.11);
            }

.fpbutton {
  width: 110px;
  position: static;
}

           .betterbox {
                background-color: #6a5e57;
                border: 5px solid rgba(0, 0, 0, 0.34);
                padding: 10px;
                border-radius: 86px;
               justify-content: center;
               

                box-shadow:  30px 30px 60px rgba(0, 0, 0, 0.36),
             -30px -30px 60px rgba(183, 183, 183, 0.11);
            }




            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #313131;
            }
    .floatright {
    float: right;
  }
    .floatleft {
    float: left;
  }


  .pagedoll {
    display: none;
  }
  
  
 .center {
  text-align: center;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

}

img {
  transition: all 0.4s;
}

img:hover {
  transform: scale(1.05);
}


            

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

                aside {
                    width: 100%;
                }


                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
/* vvvvv code from Aithere's layouts!! vvvvvvv */
    /* button styling */
    button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        outline: none;
        border: 0;
        vertical-align: middle;
        text-decoration: none;
        font-family: inherit;
        font-size: 15px;
        margin-bottom: 15px;
    }

    button.buttonstyle {
        font-weight: 600;
        color: rgb(0, 0, 0);
        text-transform: uppercase;
        padding: 0.25em 1em;
        background: #afafaf;
        border: 2px solid #000000;
        border-radius: 0.75em;
        transform-style: preserve-3d;
        transition:
            background 150ms cubic-bezier(0, 0, 0.58, 1),
            transform 150ms cubic-bezier(0, 0, 0.58, 1);
    }

    button.buttonstyle::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #525252;
         border: 2px solid #000000;
        border-radius: inherit;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.37), 0 0.625em 0 0 rgba(0, 0, 0, 0.3);
        transform: translate3d(0, 0.75em, -1em);
        transition:
            transform 150ms cubic-bezier(0, 0, 0.58, 1),
            box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    }

    button.buttonstyle:hover {
        background: #868686;
        transform: translate(0, 0.25em);
    }

    button.buttonstyle:hover::before {
        box-shadow: 0 0 0 2px rgba(72, 72, 72, 0.45), 0 0.5em 0 0 rgba(0, 0, 0, 0.64);
        transform: translate3d(0, 0.5em, -1em);
    }

    button.buttonstyle:active {
        background: #636363;
        transform: translate(0, 0.75em);
    }

    button.buttonstyle:active::before {
        box-shadow: 0 0 0 2px #000000, 0 0 #000000;
        transform: translate3d(0, 0, -1em);
    }





/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: rgba(42, 33, 28, 0.59) rgba(122, 122, 122, 0);
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 8px;
  }

  *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
  }

  *::-webkit-scrollbar-thumb {
    background-color: rgba(49, 40, 34, 0.73);
    border-radius: 5px;
    border: 3px dotted rgba(62, 17, 17, 0.33);
  }