@font-face{
    font-family:"8bit";
    src:url(8bit.ttf) format("truetype")
}
*{
    box-sizing:border-box!important;
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges
}
body,html{
    width:100%;
    height:128%;
    padding:0;
    margin:0;
    font-family:"8bit";
    letter-spacing:-1px;
    color:#342161
}
b{
    font-family:"8bit";
    color:#342161
}
.trello{
    width:400px;
    height:50px;
    transform:rotate(3deg);
    position:absolute;
    margin-left:220px;
    margin-top:1050px
}
button:hover{
    transform:scale(1.1);
    box-shadow:0 0 20px #fff
}
button{
    border-radius:10px;
    height:40px;
    width:auto;
    background-color:#e5c7fc;
    border:3px solid #b888ea;
    gap:0;
    margin:0;
    line-height:0;
    display:flex;
    align-content:center;
    float:left;
    margin:5px;
    transition:.3s all ease-in-out;
    box-shadow:0 0 5px #fff
}
button>b{
    display:flex;
    align-self:center;
    padding-left:0
}
path{
    fill:#b888ea
}
.white{
    background-image:url(images/white.png);
    width:100%;
    height:100%;
    background-size:150% 130%;
    background-position:center;
    text-align:left;
    padding:10px;
    z-index:1
}
.pagedoll{
    margin-top:50px;
    background-image:url(gifs/pagedoll.gif);
    width:201px;
    height:147px;
    transform:scaleX(-1)
}
.sidenav{
    height:100%;
    width:200px;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    background-color:#342161;
    overflow:hidden;
    padding-top:20px;
    padding-right:10px;
    opacity:.8
}
.sidenav:hover{
    opacity:1
}
.sidenav a{
    margin-top:10px;
    text-align:left;
    padding:6px 8px 6px 16px;
    text-decoration:none;
    font-size:25px;
    color:#fff;
    display:block;
    opacity:1;
    letter-spacing:-2px
}
.sidenav a:hover{
    color:#fcfca0
}
.sidenav-a>img{
    box-shadow:0 0 10px #26154f
}
.commissionguide{
    height:75%;
    position:fixed;
    margin-top:80px;
    margin-left:1165px
}
.main{
    margin-left:250px;
    width:1000px;
    flex-direction:column;
    align-items:center
}
@media screen and (max-height:450px){
    .sidenav{
        padding-top:15px
    }
    .sidenav a{
        font-size:18px
    }
}
div,h1,h2,p{
    text-align:center
}
body{
    background-image:url(gifs/rainbowstr2.gif)
}
.title{
    background-image:url(gifs/purpleanimstar.gif);
    border:3px solid #b888ea;
    width:1000px;
    height:100px;
    margin-top:50px;
    color:#342161;
    font-weight:700;
    margin-bottom:20px;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center
}
.links{
    size:100%
}
.button{
    padding:16px 32px;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:20px;
    margin:4px 2px;
    transition-duration:.4s;
    cursor:pointer;
    background-color:#6b00b8;
    color:#fff;
    border:6px solid #c778ff;
    border-radius:500px;
    font-family:8bit
}
.button:hover{
    background-color:#c778ff;
    color:#fff
}
@-moz-keyframes scroll-left{
    0%{
        -moz-transform:translateX(100%)
    }
    100%{
        -moz-transform:translateX(-100%)
    }
}
@-webkit-keyframes scroll-left{
    0%{
        -webkit-transform:translateX(100%)
    }
    100%{
        -webkit-transform:translateX(-100%)
    }
}
@keyframes scroll-left{
    0%{
        transform:translateX(100%)
    }
    100%{
        transform:translateX(-100%)
    }
}
.dashed{
    height:10px;
    width:1000px;
    border-top:3px dashed #b888ea
}
.dashed2{
    height:10px;
    width:90%;
    border-top:3px dashed #7316c9
}
.parent{
    display:grid;
    grid-template-columns:repeat(60,15px);
    grid-template-rows:repeat(300,15px);
    width:100%;
    height:800px;
    justify-content:center;
    margin-top:20px
}
.yellow{
    background:url(gifs/yellowstars.gif);
    border:3px solid #f79e20;
    width:100%;
    height:950px
}
.open{
    background-image:url(images/white.png);
    background-position:bottom;
    background-size:450px 20px;
    position:absolute;
    margin-left:500px;
    margin-top:-5px;
    width:450px;
    height:30px;
    background-repeat:no-repeat;
    overflow:hidden;
    text-align:left;
    text-shadow:0 0 5px #fff
}
.open>p{
    text-shadow:0 0 10px #fff
}
.parent>div{
    margin:10px
}
.item1{
    grid-column:1/span 20;
    grid-row:1/span 30;
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9;
    overflow:auto
}
.item2{
    grid-column:21/span 40;
    grid-row:1/span 20;
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9
}
.examples{
    height:100%;
    overflow:auto;
    overflow-x:hidden
}
.examples>a>img{
    max-height:230px;
    max-width:400px;
    transition:.3s all ease-in-out
}
.examples>a>img:hover{
    transform:scale(1.1);
    box-shadow:0 0 15px #fff
}
.item3{
    grid-column:21/span 40;
    grid-row:21/span 20;
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9
}
.item3>img{
    max-height:230px;
    max-width:400px
}
.item4{
    grid-column:21/span 40;
    grid-row:41/span 20;
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9
}
.item4>img{
    max-height:230px;
    max-width:400px
}
.item5{
    grid-column:1/span 20;
    grid-row:31/span 30;
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9;
    overflow:auto
}
.home1{
    background:url(gifs/rainbwline.gif);
    border:3px solid #7316c9;
    width:100%;
    height:100%
}
.scrollable{
    overflow-y:auto
}
::-webkit-scrollbar-thumb{
    background-color:#f99;
    border:1px s#7316c9
}
::-webkit-scrollbar-thumb:hover{
    background-color:#ff9
}
::-webkit-scrollbar-thumb:active{
    background-color:#f7e7ff
}
::-webkit-scrollbar{
    background-color:#9cf;
    width:12px;
    border:1px #7316c9
}