:root{
    --rainlightblue: #e6e6f3;
    --rainblue: #619AC2;
    --mborderblue: #678cae;
    --darkblue: #23395d;
    --darksky: #3f3f3f;
    --yellowclouds: #edddbc;
}

p, div{
    margin: 0px;
    padding: 0px;
    color: var(--darksky);
}

.button{
    width: 88px;
    height: 31px;
}

/*                                           navigation bar */
#navigationbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
}
.navigationbarbutton{
    margin-left: 10px;
    margin-right: 10px;
    padding: 6px;
    padding-left: 8px;
    padding-right: 8px;
    
    text-align: center;
    text-decoration: none;
    border: none;
    font-size: 20px;
    color: var(--darksky);
    background-color: white;
}
.navigationbarbutton:hover{
    font-size: 22px;
}



/*                                           gloomlee on home page*/
#websiteheader{
    width: 100%;
    position: relative;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#titlearea{
    display: flex;
    justify-content: center;
    width: 350px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 100px;
    background-image: url("assets/paperedge.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#titlearea:hover{
  transform: rotate(5deg);
}

#titletext{
    font-size: 50px;
    border: none;
    text-align: center;
    padding: 20px;
    margin-bottom:20px;
}
#titleimage{
    width: 400px;
}

#homepagemessagearea{
    margin: 0 auto;
    position: relative;
}

#homepagemessage{
    background-color: white;
    position: absolute;
    width: 200px;
    padding: 10px;
    left: 290px; 
    bottom: 15px;
    transform: rotate(5deg);
}

.homepagemessagetext{
    text-align: center;
    color: var(--darksky);
}

#linkmysitearea{
    position: relative;
    margin: 0 auto;
}
#sitebutton{
    text-align: center;
    position: absolute;
    right: 400px;
    bottom: 10px;
}
#sitebuttontext{
    color: white;
}

#homepage{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#accesscounter{
    width: 100px;
    height:100px;
}

.hotlinelinks:link{
    color: lightgray;
    
}
.hotlinelinks:visited{
    color: lightgray;
}

#spotifyplayer:hover{
    height: 300px;
    overflow: visible;
    z-index: 1;
}


/* left section */
#leftsidebar{
    width: 300px;
    position: relative;
}

#introduction{
    background-image: url("assets/largepaperclip.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    
    width: 300px;
    height: 250px;
    
}
#introduction:hover{
  transform: rotate(-5deg);
}
#homepagemott{
        z-index: 1;
    position: absolute;
    left: 210px;
    top: 175px
}
#homepagemottimg{
    width: 100px;
}


#introtitle{
    margin-left: 100px;
    padding-top: 28px;
    font-size: 30px;
}

#introdesc{
    margin: 25px;
    margin-left: 40px;
    margin-top: 0px;
    transform: rotate(1deg);
    line-height: 15.1px;
}

#guestbook{
    margin-bottom: 10px;
} 

#updates{
    width: 300px;
    height: 400px;
    background-image: url("assets/notepad.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#updatestitle{
    margin-left: 40px;
    padding-top: 30px;
    font-size: 30px;
}

#updateposts{
    height: 320px;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 30px;
    overflow-y: scroll;
}

.updatepost{
    margin-left: 20px;
    margin-top: 13px;
    margin-right:1px;
    margin-bottom: 23px;
}

#updatedate{
    margin:2px;
}

#updatetext{
    line-height: 21px;
    margin: 2px;
    
}

#todo{
    height: 250px;
    background-image: url("assets/paperclippaper.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#todo:hover{
  transform: rotate(5deg);
}

#todotitle{
    transform: rotate(-4deg);
    font-size: 30px;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 12px;
}
#todotextarea{
    transform: rotate(-8deg);
    margin: 2px;
    padding-left: 40px;
}

.todotext{
    margin: 2px;
    font-size: 15px;
    line-height: 13px;
}



/* middle section */
#mainsection{
    position: relative;
    background-color: var(--rainlightblue);
    border: solid;
    border-width: 5px;
    
    width: 800px;
    height: 800px;
    margin-top: 10px;
    margin-right: 10px;
}
#mainsectioninside{
    flex: 1;
    flex-direction: column;
    height: 750px;
    width: 770px;
    margin: 20px;
}
.mainsectionsub{
    overflow: auto;
    margin-bottom: 30px;
}
#miyukiclipout{
    z-index: 1;
    position: relative;
    float: right;
    margin-top: -590px;
    margin-right: -70px;
    width: 330px;
    clip-path: polygon(63% 0, 59% 5%, 55% 7%, 56% 10%, 56% 11%, 61% 14%, 53% 39%, 47% 38%, 50% 34%, 48% 33%, 45% 25%, 40% 21%, 31% 19%, 23% 19%, 16% 21%, 12% 24%, 10% 29%, 6% 31%, 8% 34%, 11% 35%, 13% 38%, 18% 40%, 24% 40%, 22% 43%, 15% 45%, 2% 50%, 2% 57%, 0 66%, 0 69%, 11% 71%, 18% 71%, 22% 76%, 20% 79%, 25% 81%, 21% 85%, 23% 87%, 20% 91%, 21% 94%, 19% 100%, 70% 100%, 76% 92%, 78% 86%, 74% 79%, 71% 77%, 74% 74%, 70% 70%, 75% 59%, 78% 53%, 87% 45%, 91% 42%, 95% 41%, 94% 37%, 100% 30%, 100% 28%, 97% 24%, 84% 13%, 80% 10%, 77% 8%, 75% 4%, 70% 0);
}
#lumclipout{
    z-index: 1;
    position: relative;
    float: right;
    margin-top: -625px;
    margin-right: -50px;
    width: 350px;
}

.maintitle{
    display: inline-block;
    font-size: 25px;
}

.blogdate{
    float: right;
    margin-top: 10px;
    display: inline-block;
}
#blogtext{
    clear: both;
    border: solid;
    padding: 10px;
    height: 100px;
    overflow-y: auto;
    margin-top: 5px;
}

#blogsection{
    height: 170px;
}

#artupdate{
    height: 140px;
    width: 690px;
}
#artupdatedate{
    float: right;
    margin-top: 10px;
    display: inline-block;
}

.pixelart{
    margin: 5px;
}


#homepagecards{
    height: 100px;
    width: 530px;
    border: solid;
    overflow-y: auto;
    
}
.homepagecard{
    margin: 5px;
}
#newcardsdate{
    float: right;
    margin-top: 10px;
    margin-right: 235px;
    display: inline-block;
}


#followingsection{
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 550px;
}

#bottomsection{
    width: 800px;
    margin-top: 10px;
    margin-right: 10px;
    
}
#bottomsectioninside{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
#blinkies{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
.blinkie{
    margin: 1px;
    height: 20px;
    width: 150px;
}


/* right side */
#current{
    position: relative;
    width: 270px;
    height: 380px;
    margin-top: px;
    background-image: url("assets/rippedside.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#currentinside{
    display: flex;
    flex-direction: column;
    padding: 15px;
    padding-right: 30px;
    padding-top: 30px;
}
#currentfriend{
    position: absolute;
    width: 250px;
    top: -110px;
}
#acclaim{
    position: absolute;
    left: 130px;
    bottom: 10px;
    
}
#currentsectiontitle{
    text-align: center;
    font-size: 23px;
}
.currentitem{
    margin-top: 10px;
}
#currenttitle{
    font-size: 20px;
    
}
#imood{
    text-align: center;
}
#currentstatus{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 70px;
}

#webrings{
    width: 270px;
    height: 300px;
    background-image: url("assets/tackedpostit.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#webringtitle{
    text-align: center;
    transform: rotate(-3deg);
    font-size: 20px;
}
#webringsinside{
    padding: 25px;
    padding-top: 50px;
}
.webringitem{
    margin: 10px;
}
.cliqueitem

#rightsidebar{
    width: 300px;
}

.randomtext{
    display: inline-block;
    background-color: white;
    color: black;
    size: 10px;
    padding: 5px;
    margin: 5px;
    margin-left: 20px;
}

#cbox{
    margin-top: 10px;
    width: 270px;
}



/* bottom section */
#homepageblinkies{
    
}
#creditsection{
    text-align: center;
}

#creditsection{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding: 10px;
}


/*                                          sitemap */
.headsitemaplink{
    font-size: 20px;
}
.headsitemaplink:link{
    color: black;
}
.headsitemaplink:visited{
    color: black;
}
.subsitemaplink{
}
.subsitemaplink:link{
    color: black;
}
.subsitemaplink:visited{
    color: black;
}


/*                                              credits page */
#creditsmainsectioninside{
    margin: 70px;
    margin-top:100px;
    margin-bottom: 70px;
}

.creditsitem{
    
}


/*                                              toybox page */
#toyboxsection{
    margin-top: 40px;
}
#toyboxsectiontitle{
    font-size: 30px;
}
.toyboxsectionitem{
    margin: 10px;
}

#toyboxcollection{
    display:flex;
    flex-direction: row;
    overflow-y: wrap;
}

.toyboxcollectionitem{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:10px;
}
.toyboxlink{
 text-align: center;
}

.pngcollectionitem{
    max-height: 200px;
}

/*                                              art page */
.artpageitem{
    display: block;
    
}
.artpageimage{
    height: 350px;
    margin: 10px;
}
.artpagedate{
    
}
.artpagedesc{
    
}


/*                                              colors tcg page */



/*                                                            Sticker Sheet Club Styling
http://www.stickersheetclub.neocities.org 
*/

/* Table Styling */
table {
  background-color: #fdc2ce; 
  border: 1px solid #fdc2ce;
  width: 750px;
}
    /* Space between the stickers */
    td img {
  padding:0px 15px;
    }

/* Black shadow around stickers
You can change or remove this if you want */
    .stickersimg img {
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
    }

/* To customize mulitple sets of tables:
Each sticker sheet has 3 tables: ssclubheader_#, ssclubstickers_#, and #ssclubfooter_#. 
Give each set of tables a different number.
*/

#ssclubheader_1 {
/* You can use the background header image code here and remove it from the HTML.
 background-image:url('https://stickersheetclub.neocities.org/images/stickersheetheader.png'); 
background-repeat: no-repeat; 
background-position: top center;
*/
}

#ssclubstickers_1 {
/* You can add a different background color or image here too! */
}

#ssclubfooter_1 {
/* Here too! */
}




/* new css */
.flex{
    display: flex;
}
.fwrap{
  flex-wrap: wrap;  
}
.section{
    margin: 5px;
}