html {
    @import url('https://fonts.cdnfonts.com/css/public-pixel');
    /*cursor: url(),url(),auto; to change cursor -> use 32x32px up to 128px*/
    color: #9A468A ;
}


:root {
    --lavender: #9A468A;
    --tangerine: #ff6e00;
    --spacewhite: #CBE5FA;
    --textcolor: #4A2C6F;
    --ponk: #D87496;
}



body{
    background-image: url(https://files.catbox.moe/4vvqz6.png) ;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
    background-size:cover;
    background-size:cover; -moz-

    color: #9A468A ;

}

p::selection{
    background-color: pink;
}


h1{
    font-family: "Press start 2p","consolas", sans-serif;
    font-size: 25px;
}

h1::first-letter{
    font-size: 30px;
}


h2{font-family: "Press start 2p","consolas", sans-serif;font-size: 15px;}
h3{font-family: "consolas", sans-serif;}
hr{color:pink;}
p{font-family: "consolas", sans-serif;}
li{font-family: "consolas", sans-serif;}


button{
    background-color: pink;
    color: #9A468A;
    width: 100px;
    border: solid #9A468A 2px;
    border-radius: 2px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 5px 5px 2px #9A468A;

    padding: 2px;
    margin: 2px;
}


/* Button nr2 nav---------- */
.b2{
    background-color: pink;
    color: #5e3b84;
    width: 100px;
    border: solid #9A468A 0px;
    border-radius: 0px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 0px 5px #9A468A;

    padding: 1px;
    margin: 5px 2px 5px 5px;
}

button:hover{
    font-size:14px;
    box-shadow: 0px 0px 5px blue;
}

span:hover{
    font-size:30px;
    text-shadow: 0px 0px 2px red;
}


/* LAYOUT------------------------------------------------------------------------- */


.top{
    text-align: center;
}


.flexcont{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}


.left{width: 220px;}


.center{
    width: 540px;
    disply: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.right{width: 220px;}




/* BOX STYLING GENERAL------------------------------------------------------------------- */

.box1{
    background-image: url(https://files.catbox.moe/i2rlsl.png);

    text-align:center;

    border:8px solid pink;
    border-radius: 10px;

    padding: 25px; /*   this adds space inside the box - between border and content   */
    margin:10px;/*   This adds space outside of the border between other elements   */

    overflow-y: scroll;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: #D87496 pink;

}

.box2{
    color: white;
    background: rgba(232, 79, 140, 0.4);
    text-shadow: 2px 2px 5px darkblue ;


    border: 5px dotted pink;
    border-radius: 10px;

    padding: 25px; /*   this adds space inside the box - between border and content   */
    margin:10px;/*   This adds space outside of the border between other elements   */

    overflow-y: scroll;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: #D87496 pink;
}


.nobgtext{
    color: white;
}


.pagedoll {
    position: fixed;
    bottom: 0;
    right: 0;
}



/* STYLING SPECIFIC------------------------------------------------------------------- */

/* Home ------------*/

#aboutbox{
    height: 200px;
}


#stampbox{
    height: 250px;
}


#todo{
    height: 150px;
}



#sticker1{
    position: fixed;
    z-index: 1;
    right:8em;
    top:5em;
}






/* MEDIA Smallscreen------------------------------------------------------------------- */

@media only screen and (max-width: 1500px) {

    body {
        background-image: url(https://files.catbox.moe/4vvqz6.png) ;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment:fixed;
        background-size:cover;
        background-size:cover; -moz-
    }

    .pagedoll{
        display: none;
    }

    #sticker1{
        display: none;
    }

}