:root {
    --color-one: #5e0632;
    --color-two: #b3f1be;
    --periwinkle: #baa7fe;
    --lightgreen: #93f99bcc;
    --dark-purple: #2a013a;
    --light-pink:  rgb(223, 172, 249);
    --dark-red: #941c4e;
    --pink: #f78ff5;
    --background-color: rgb(162, 101, 202);
}
* {box-sizing: border-box;}

body,html {
    margin:0;
    padding:0;
  }
  
body {
    font-family: 'Lora';
    font-size: .80rem;
    background-image: url('/IMGs/sprites.png');
    background-attachment: fixed;
}

.wrapper {
    background-color: var(--background-color);
    padding: 0 2rem;
    outline: 6px solid var(--pink);
    border-left: 3px solid black;
    border-right: 3px solid black;
}
.wrap-width {max-width: 70vw;}

.header {
    text-align: center;
    margin: 1.5rem;
    width: 90%;
    background-color: #f78ff5;
    background-image: url(/IMGs/z15-heart-line.gif);
    background-repeat: repeat-x;
    background-position-y: top;
    border: 4px solid var(--lightgreen);
    border-radius: 25px;
}

h1 {
    font-family: 'Closetome';
    font-size: 4.5rem;
    font-style: italic;
    color: var(--dark-purple);
    margin: 0;
    margin-top: 2rem;
    text-shadow: 2px 2.5px 3px var(--lightgreen);
}
h2 {
    font-size: 1.6rem;
}
/* Header Orchids */
h1::before, h1::after {
    display: inline-block;
    width: 100px;
    min-height: 72px;
    background-image: url(/IMGs/purplespots.png);
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: 55% 55%;
    content: "";
}
/********/

header > p {
    font-family: 'Lora';
    font-style: italic;
    letter-spacing: 1.2px;
}


.left-sidebar, .right-sidebar {
    display: inline-flex;
    flex-flow: column;
    align-items: center;
}

.right-sidebar {
    background-color: var(--dark-purple);
    background-image: url(/IMGs/80x80th_cloud1b.gif);
    border: 2px solid var(--light-pink);
    background-size: 60px;
    background-repeat: repeat-x;
}

.left-sidebar {
margin-right: 1rem;
                                                                                                                                                                
}

.inner-box {
    padding: 1rem;
    border: 2px solid var(--dark-red);
    border-radius: 5px;
    background-color: var(--periwinkle);
}
.title-box  {
    border-image: url(/IMGs/small-lace.png);
    border-image-slice: 8 8 9 8;
    border-image-width: 7px 7px 7px 7px;
    border-image-outset: 4px 4px 4px 4px;
    border-image-repeat: round round;
    background-color: #a9ffbf; 
    background-clip: padding-box;
    box-shadow: 0 0 9px rgb(255, 136, 195);                   
}
.nav-title {
    padding: .3rem;
    margin-bottom: .2rem;
    font-size: 2rem;
    font-family: 'NugieRomantic';
    margin-top: .8rem;
    margin-left: .6rem;
    color: rgb(255, 0, 128);
}
nav {
    display: inline-block;
    width: 12rem;
    padding: 1rem;
    text-align: center;
    overflow: none  scroll;
    margin: auto;
  
}

.navlink {
    display: block;
    font-size: 1rem;
    border-radius: 25px 0px 25px 0px;
    border: 2px solid rgb(255, 171, 234);
    margin: .2rem;
    background: rgb(182,100,157);
    background: linear-gradient(180deg, rgba(182,100,157,1) 0%, rgba(30,6,68,1) 100%);
    font-family: 'Igiari';
    font-weight: bolder;
    font-size: 1rem;
    text-decoration: none;
    padding: .3rem;
    font-style: italic;
    color: rgb(223, 172, 249); 
}

.navlink:hover {
    text-shadow: 0px 1px 3px rgb(249, 191, 255);
    filter: drop-shadow(1px 3px 2px #342fd4);
}
nav h3 {
    text-align: left;
}
#info {
    margin-bottom: 2rem;
    padding: .6rem 2rem;
    position: relative;    
    
}
#info > ul {
    margin: 1rem;
    list-style-position: outside;
    }

    #info > ul li {
       margin-bottom: 1rem;
        }
#info > div:nth-child(3) {
    width: 100%;
    }

/*=====  Neighborhood  ======*/
#neighborhood {
    max-height: 20rem;
    display: inline-flex;
    padding: 1.8rem;
    @media (max-width: 800px) 
        {flex-direction: column;
        max-height: max-content;}
    }

#neighborhood div {
    flex: 1 1;
        }

#neighborhood h3 {
    display: inline-block;
    width: 100%;
    text-align: center;
}
        
#webrings {
    height: 16rem;
    overflow: scroll;
    width: 16rem;
    margin: auto;
    align-content: space-around;
}

.textcliq {
    display: block;
    margin: 2px 0;
            text-align: center;
    object-fit: contain;
    width: 100%;
}
/*=====  End of Neighborhood  ======*/

   
#button {
    margin: auto;
    width: 9rem;
    height: 9rem;
    text-align: center;
}
#button img {
    margin: 1rem;
}
#sitely {
    display: inline-block;
    height: 11rem;
    overflow: scroll;
    padding: 1rem;
    font-size: .7rem;
    height: 14rem;
    margin: 1rem;
    & h5 {
        font-size: 1rem;
    }
}
#sitely p:first-of-type {
    background-color: rgb(87, 33, 87);
    border: 2px solid rgb(116, 40, 116);
    color: rgb(242, 198, 251);
    border-radius: 1rem;
    padding: 4px;
}
#stats {
    padding: 1rem;
    margin: 1rem;
    align-items: center;
    height: 10rem;
    width: 10rem;
    border: 1px solid purple;
    & h2 {
        margin: 0;
    }
}

#piclog {
    margin: 1rem;
    padding: .6rem;
    width: 16rem;
    height: 16rem;
    align-items: center;
    overflow: scroll;
}

#piclog img {
    max-width: 180px;
}
#featured img {
    height: 200px;
    width: 100%;
}
#webmistress {
    padding: .5rem;
    margin: 1rem;
}

#currently {
    margin: 1rem;
   }
#currently {
    border: 1px solid purple;
    border-radius: 2rem;
    padding-left: .4rem;
    padding-bottom: .2rem;
    }
#currently > h3:nth-child(1) {
    border-bottom: 2px dotted rgb(70, 9, 34);
    padding: .1rem;
    }
    #currently > p > span {
        font-weight: bold;
        border-bottom: 2px dashed pink;
        background-color: #faa7ed3b;
        border-radius: 10px;
        padding: 2px;
        margin-right: 4px;
    }

/*=============================================
=                   Footer                   =
=============================================*/

footer {
    height: fit-content;
    font-family: 'MS Gothic';
    color: var(--color-one);
    font-weight:bold;
    width: 100%;
    & a {color: #98f8d8;}
    }
    .footer > p:nth-child(2) {
        font-size: 1rem;
        margin-top: 3rem;
    }


#bottom-ads {
    display: inline-flex;
    flex-flow: row;
    padding: 1rem;
    margin: 1rem;    
    justify-content: space-around;
    background-color: var(--dark-purple)
}

/*=============================================
=          ✦•┈๑⋅⋯ EXTRAS ⋯⋅๑┈•✦            =
=============================================*/

/*----------  Status Cafe🍵  ----------*/
#statuscafe {
    background: var(--color-one);
    border-radius: 10px;
    margin: .5em;
    background: rgb(255,228,240);
    background: radial-gradient(circle, rgba(255,228,240,1) 0%, rgba(233,148,193,1) 100%); 
    border: 2px solid var(--dark-purple);
}

#statuscafe-username {
    font-family: 'PixelPoiz';
    font-size: .8rem;
    padding: .5em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #b9ffc8;
    background-color: var(--dark-red);
        & a {color: #b9ffc8;}
}
#statuscafe-username a::before {
    content: url('/IMGs/skull3.gif');
    padding-right: 6px;
}
#statuscafe-content {
    margin: 0 0.8em 0.5em 0.8em;
    font-size: .86rem;
    color: #161049;
    padding: 1rem;
}
/*=====  🫖  ======*/


/*====  IMood ☺️  =====*/
#imood {
    text-align: center;
    display: block;
    margin: .2rem auto;
    font-family: 'NugieRomantic';
    font-size: 1rem;
}
/*=====  ChatBox💬  ======*/
#cbox {
    margin: auto;
    height: 200px;
    }
/* ===== Scrollbar CSS ===== */
  /* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #8054c9 #f9c5fc;
    }

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

*::-webkit-scrollbar-track {
background: #f9c5fc;
        }

*::-webkit-scrollbar-thumb {
background-color: #8054c9;
border-radius: 10px;
border: 3px solid #ffffff;
    }

/*----------  Selection Color  ----------*/
::-moz-selection { 
color: var(--pink);
background: var(--lightgreen);
}

::selection {
    color:  var(--pink);
    background: var(--lightgreen);
    }

#animalcrossingring {
    display: inline-block;
    margin: 1rem;
    font-family: "MS UI Gothic",monospace !important;
    font-size: 7px !important;
        & h2 {
            font-size: .69rem;
        }
    }