/* user styles */

            /* styles are what change the color and sizes of stuff on your site. */

            /* these are variables that are being used in the code
    these tended to confuse some people, so I only kept 
    the images as variables */

            :root {
                --header-image: url('./images/banner2.png');
                --body-bg-image: url('./images/bg1.1.png');
                --maincolor1:linear-gradient(180deg,rgba(68, 42, 120, 1) 0%, rgba(36, 20, 69, 1) 5%);
                --maincolor:linear-gradient(0deg,#121219 0%, #3c3c54 100%);
                --mainsidemargin:0px;
                --globalradius:px;
                /* colors */
                --content: red;
            }

            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree 
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!
    
    */

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }



            @font-face {
                font-family: digital;
                src:url('/fonts/DS-DIGIB.TTF');
    
}

            @font-face {
                font-family: trajan;
                src:url('/fonts/TrajanPro-Bold.otf');
    
}


            @font-face {
                font-family: ethnocentric;
                src:url('/fonts/Ethnocentric-Regular.otf');
    
}

            @font-face {
                font-family: metro;
                src:url('/fonts/Metro.otf');
}

@font-face {
    font-family:mspgothic;
    src:url('/fonts/ms-pgothic-regular.ttf');
}
@font-face{
    font-family:aldrich;
    src:url('/fonts/Aldrich-Regular.ttf');
}

            body {
                font-size:100%;
                font-family: mspgothic;
                margin: 0;
                background-color: black;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: cover ;
                background-position: center;
                background-attachment: fixed;
                color: white;
                background-image: var(--body-bg-image);
                cursor:url('https://files.catbox.moe/gcegov.cur'),auto;
            }



            * {
                box-sizing: border-box;
            }

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                width: 1100px;
                position:relative;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
            background:url('./images/stripes2.png');
                  abackground: var(--maincolor);
                background-size:;
                border:1px solid lightgray;
                padding:10px;
                margin-top:10px;
                margin-bottom: 34px;
                border-radius: var(--globalradius);
                
                
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: lawngreen;
                font-weight: bold;
                }
#container a:hover{
    color:white;
}
#headerArea{

    margin-top:0px;
    margin-bottom:10px;
}
#header{
    background-image: avar(--header-image);
    background-position: center;
    background-repeat:no-repeat;
    border-radius:var(--globalradius);
    height:150px;
    display: block;
}

#header img{
    width: 100%;
    border: 1px solid lightgray;
    
}
::selection{
    background-color:lawngreen;
    text-shadow: 0 0 7px black;
    color:black;
}










            #flex {
                display: flex;
                aborder:1px solid lightgray;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                abackground:var(--maincolor);    
                width: 200px;
                background-blend-mode:;
                font-size:smaller;
                apadding: 10px;
                abox-shadow: 0px 0px 10px 2px black;
                /* this makes the sidebar text slightly smaller */
                aborder:1px solid lightgray;
                display: flex;
                flex-direction: column;
                gap:10px;
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                font-size:smaller;
                background: var(--maincolor);
                flex: 1;
                padding: 20px;
                order: 2;
                abox-shadow: 0px 0px 10px 2px black;
                border:1px solid lightgray;
                border-radius:var(--globalradius);
                
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

            */ 
#leftSidebar {
                order: 1;
            }


h2 {
    color:black;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    margin: -10px;
    margin-bottom:10px;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left:4px;
    align-self:stretch;
    position: relative;
}
.h2sub{
    flex-direction: row;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.h2sub img{
    height: 20px;
    margin-right: 2px;
}

            #rightSidebar {
                order: 3;
            }

            footer {
                margin-top: 10px;
                background-color: #13092D;
                background:var(--maincolor);
                /* background color for footer */
                width: 100%;
                height: 40px;
                border:1px solid lightgray;
                padding: 10px;
                text-align: center;
                margin-bottom: px;
                font-family: monospace;
                /* this centers the footer text */
            }

            
            h
             {
                color: lightgray;
            }

            h1 {
                font-size:130%;
                text-decoration: underline;
                background: rgba(150,150,150,0.4)
            }

            strong {
}

            /* this is just a cool box, it's the darker colored one */


            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size:;
                background-color: #13092D;
            }


            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

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

                aside {
                    width: 100%;
                }


                main {
                    order: 1;
                    flex:1 1 auto;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;

                }

            } 


.son {
transform: scale(1);
}


.marquee1container {
    position:fixed;
    bottom:0px;
    overflow: hidden;
    width: 100%;
}
.marquee1 {
    display: flex;
    animation: marquee1 1s linear infinite;
    font-size: 16px;
    font-family:monospace;
    color:red;
    width: 200%;
}

.marquee1 span {
    padding-right:50px;
    width: 50%;
}

@keyframes marquee1 {
    0% {transform: translate(0,0)}
    100% {transform: translate(-25%,0)}
}

.musicbutton {
    background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 50%, rgba(200,200,200,1) 100%);
    width: 10%; 
    padding: 0px;
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 20px;  
}
.musicbutton2{
    background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(255,255,255,1) 50%, rgba(200,200,200,1) 100%);
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 20px; 
    width: 30px;
    line-height: 0px;

}

.musicbuttonimg {
    height: 15px;
}
.musicbuttonimg2 {
    display: block;
    height: 100%;
    margin-left: 10px;
}

.audioplayer {
     background: linear-gradient(0deg,rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200, 1) 100%);
    z-index: 1;

    top:0px;
    left:0px;
    font-family: digital;
    font-weight: bold;
    color:white;
    padding: 0px;
    font-size: smaller;
    border-style: outset;
    border-color: gray;
    width: 400px;
    display: flex;
    align-items:center;
    border-width: 2px;
    border-radius: 0px 23px 23px 0px; 
}
.audioplayer2 {
    abackground: linear-gradient(0deg,rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200, 1) 100%);
    z-index: 1;
    margin-right: 10px;
    color:white;
    font-size: smaller;
    flex-wrap:wrap;
    display: flex;
    align-items:center;
    padding: 1px;
}
.controls{
    display: flex;
}
.controls2{
    display: flex;
    margin: 2px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.volumeslider {
    display: flex;
    align-self:center;
    appearance:none;
    width: 20%;
    cursor: pointer;
    height: 10px;
    margin-left:4px;
    border:2px solid dimgray;
    border-radius:0px;
    background: linear-gradient(90deg,rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200, 1) 100%);
}
.volumeslider::-webkit-slider-thumb{
    -webkit-appearance:none;
   appearance:none;
    width: 10px;
    height: 15px;
    margin-left:0px;
    border:2px solid gray;
    border-radius:20px;
    background: white;
    box-shadow: none;
}
.volumeslider::-moz-range-thumb{
    width: 10px;
    height: 15px;
    margin-left:0px;
    border:2px solid gray;
    border-radius:20px;
    background: white;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0;
}

.nowplaying{
    width:200px;
    height: 16px;
    background:darkslateblue;
    margin-left: 2px;
    margin-right: 2px;
    border-style:inset;
    border-color: gray;
        border-width: 2px;
    line-height: 13px;
    margin-top:2px;
    border-radius: 0px 25px 25px 0px;
}
.nowplaying2{
    display: block;
    width: 139px;
    height: 16px;
    font-style: italic;
    line-height: 13px;
    margin-top:3px;
    font-size: 95%;
}

#topbar1{
    z-index: 15;
    display:flex;
    bottom:0px;
    position: fixed;
    width: 100%;
    height: 24px;
    
}
.topbarcontent{
    flex:1;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(0deg,rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200, 1) 100%);
    border-style:outset;
    border-width: 2px;
    border-color:gray;
    
}
.topbartext{
    background-color:darkslateblue;
    color:white;
    width:100%;
    margin: 2px;
    height: 16px;
    border-style: inset;
    border-color:gray;
        border-width: 2px;
    font-family: monospace;
    text-align: right;
    line-height: 10px;
    
}


#fig1 {
    position:absolute;
    filter:saturate(110%);
    right:-15px;
    top:-6px;
    pointer-events:none; 
    z-index: 4;
}

#pic1 {
    position:absolute;
    left: -200px;
    top:300px;
    transform: rotate(-5deg);
}
#pic1:hover {
    transform: scale(1.2);
}

#pic1:focus {
    position: fixed;
    height:100%;
}

#blinktext{
    text-shadow: 0px 0px 5px red;
    animation-name:blink;
    animation-duration:0.2s;
    animation-timing-function:linear;
    animation-iteration-count: Infinite;
}

@keyframes blink{
    0%{color:white;}
    50%{color:red;}
    100%{color:white;}
}


#title{

    font-weight: bold;
    margin: 0px;
    color:white;
    font-family: metro;
    font-size:16px;
    background: linear-gradient(30deg, #a0a0a0 0, white 10%, #a0a0a0 15%);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    animation: blinktitle 2s linear infinite;
    padding-top:20px;
    padding-bottom:20px;
}
.mainsubtitle{
    margin-top:-10px;
    display: flex;
    justify-content: space-between;
}

@keyframes blinktitle{
    0% {background-position: -200px;}
    65%{background-position:450px; }
    100% {background-position: 450px;}
}

.marquee1container {
    position:fixed;
    bottom:0px;
    overflow: hidden;
    width: 100%;
}
.marquee1 {
    display: flex;
    animation: marquee1 1s linear infinite;
    font-size: 16px;
    font-family:monospace;
    color:white;
    width: 200%;
}

.marquee1 span {
    padding-right:50px;
    width: 25%;
}

@keyframes marquee1 {
    0% {transform: translate(0,0)}
    100% {transform: translate(-25%,0)}
}


#lastfm{
    height:38px;
    background-color:darkslateblue;
    border-style: inset;
    border-width: 4px;
    padding-top:px;
    padding-bottom:px;
    padding-left:2px;
    padding-right:2px;
    pointer-events: ;
    width: 100%;
}
#lastL{
    background: linear-gradient(0deg,rgba(200, 200, 200, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(200, 200, 200, 1) 100%);
    border-style:outset;
    border-width:4px;
    padding:4px;
    padding-top: 0;
    color:black;
}
#lastL p{
    margin-bottom: 3px;
}

#chattable{
    width:100%;
    height:120px;
    border:none;
}
.chattable p{
    padding-left: 7px;
}
.chattable{
    background: black;
    font-family: monospace;
    font-size: larger;
    font-weight: bold;
}

.blogposttitle {
    font-size:;
    color:#303030;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    margin: -4px;
    padding-bottom: 4px;
}

.blogposttitle strong{
    margin-left:4px;
    margin-right:4px;
    font-size:160%;
    color:black;
    text-decoration: underline;
}

.blogsubtitle, h3 {
    font-size:larger;
    font-weight:bold;
}
.blogmain{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.blogpost {
    font-size:1;
    padding:4px;
    text-align:justify;
    box-shadow: 0px 0px 0px 0px black;
    border-style:solid;
    border-width: 1px;
    border-color:lightgray;
    color:white;
    margin-bottom: 0px;
    background:#3c3c54;
}


.newnotif{
    margin-left:5px;
    font-size:70%;
    color:black;
    animation:newnotif 1s linear infinite;
}

@keyframes newnotif {
    0%{color:black;}
    49%{color:black;}
    50%{color:darkred;}
    99%{color:darkred;}
    100%{color:black;}
}


.navbutton, .navbuttonoff, .navbuttonoff2{
    cursor:pointer;
    height:100%;
    flex: 1;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    font-size: 18px;
    z-index: 2;
    transition: all 100ms ease;
    border:2px outset gray;
    text-decoration: none;
    color:black!important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbutton2{
    cursor:pointer;
    height:25px;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    font-size: 18px;
    z-index: 2;
    transition: all 100ms ease;
    border:2px outset gray;
    text-decoration: none;
    padding-left: 10px;
    color:black!important;
    display: flex;
}
.navbutton:hover{
    transform: scale(1.05);
    border-width: 2px;
    z-index: 30;
    box-shadow: 0px 0px 10px 2px black;
}
.navbutton2:hover{
    transform: scale(1.05);
    border-width: 2px;
    z-index: 30;
    box-shadow: 0px 0px 10px 2px black;
}
.navbuttonoff, .navbuttonoff2{
    pointer-events: none;
    z-index: ; 
}

#navbar1 {
    margin-top: 10px;
    gap:10px;
    display: flex;
    height: 30px;
    abackground: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    width: 100%;
    aborder:2px outset gray;
    abox-shadow: 0px 0px 10px 2px black;
}
#navbar1-2{
    gap:px;
    display: flex;
    flex-direction: column;
    width: 100%;
    abox-shadow: 0px 0px 10px 2px black;
    abackground: lightgray;
    aborder:2px outset gray;
}
#navbar1-2 p{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:10px;
    font-weight: bold;
    font-size: larger;
    text-align:;
}
#navbar1-2 span{
    color: blue;
    display: flex;
    justify-content: flex-end;
}
.mediadropdown{
    position: relative;
    display: flex;
    flex: 1;
}


.dropdown-content{
    display: none;
    position:absolute;
    top:100%;
    left:0px;
    width:100%;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) -50%, rgba(255, 255, 255, 1) 90%, rgba(135, 135, 135, 1) 100%);
    box-shadow: 0px 0px 10px 2px black;
    z-index: 1;
    flex-direction: column;
    border-style: outset;
    border-color:gray;
    border-width: 2px;
    
    padding:8px;
}
.dropdown-content a{
    padding:2px;
    display:block;
    text-decoration: none;
    color:black!important;
    transition: all 100ms ease;
}
.dropdown-content a:hover{
    transform: translate(5px,0); 
}

.showdropdown {
    display:block;
}

.guestbutton{
    --glow:lawngreen;
    cursor: pointer;
    width: 100%;
    height: 40px;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(135, 135, 135, 1) 100%);
    background:var(--maincolor);
    background-color:black;
    font-weight: bold;
    font-family: monospace;
    transition: all 50ms ease;
    color: white;
    text-shadow:0 0 7px var(--glow),0 0 10px var(--glow),0 0 21px var(--glow),0 0 42px var(--glow),0 0 82px var(--glow),0 0 92px var(--glow),0 0 102px var(--glow),0 0 151px var(--glow)!important;
    animation: flicker 2s linear infinite;
    border:3px ridge lightgray;
    display:flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size:120%;
}
.guestbutton:hover{
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0px 0px 10px 3px white;
}
@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {color:white;}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999%
    {color:rgba(0,0,0,0);}
}
/*
.mainboxinside li{
    list-style: none;
    padding-left:;
    margin-bottom: 10px;
}
.mainboxhalf{
    display:flex;
    flex: 1;
}
.mainhalf{
    flex-direction: column;
    gap:10px;
}
.mainboxhalf div{   
    color:red;
}
.mainboxfull{
    width:100%;
}
*/
.maingrid{
    display: grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:;
    grid-gap: 10px;
}
.basegrid{
    background-color:#3c3c54;
    border : 1px solid lightgray;
    padding:10px;
}
.maingrid p img{
    vertical-align: middle;
}
.grid1{
    grid-row: span 2;
    grid-column: span 1;
    text-align: justify;
}
.gridintrosite{
    padding: 0!important;
    border: none!important;
}
.grid1-1{
    grid-row: span 1;
    
}

.grid2{
    grid-row: span 2;
    grid-column: span 1;
}
.grid4{
    grid-row: span 2;
    grid-column: span 2;
    text-align: justify;
}

.grid4-2{
    grid-row: span 1;
    grid-column: span 1;
}
.grid4-3{
    grid-row: span 1;
}
.grid4-2 div{
    font-family: monospace;
}
.grid3{
    grid-row: span 1;
    grid-column: span 3;
    height:;
}
.grid3 div, .grid3, .grid3-1{
    padding: 0!important;
    border:none!important;
    background: none!important;
}
.grid3-1{
    grid-column: span 2;
}
.grid3-1 img{
    display: block;
}
.buttonmarquee{
    overflow: hidden;
    position: relative;
    height: 56px;
}
.buttonmarquee div{
    display: flex;
    width: max-content;
    height: 56px;
    position: absolute;
    overflow: hidden;
    animation: marqueeb 15s linear infinite;
}
.buttonmarquee span{
    display: flex;
    width: auto;
    gap:5px;
}
@keyframes marqueeb{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}

.updateli{
    overflow-y: auto;
    overflow-x: hidden;
    border:none!important;
    padding:0px!important;
    height: 150px;
}
.contentli{
    height:px;
    line-height: px;
    scrollbar-width:thin;
}
.contentli li{
    margin-bottom:5px!important;
    margin-right:0px!important;
}
.todo1{
    height:90px;
}
.updateli li{
    margin-bottom: 20px;
}
.grid2 img{
    width:;
}
.grid5{
    grid-row: span 2;
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    
}
.grid5 img{
    width: 100%;
    object-fit: cover;
}
.leongrid{
    border: none!important;
    padding: 0!important;
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}
.griddiv{
    border:none!important;
    background:none!important;
    padding: 0!important;
}
.griddiv img{
    height: ;
}
.grid6{
    grid-column: span 2;
}
.grid7{
  
}
.grid8{
    grid-column: span 3;
    border:none!important;
    background:none!important;
    padding: 0!important;
    justify-content: center;
    display: flex;
}
.grid9{
    grid-column: span 3;
}
.grid9 div{
    display: flex;
    justify-content: center;
    border:none!important;
    background:none!important;
    padding: 0!important;
    gap:5px;
}
.grid10{
    grid-column: span 3;
}
.grid2imggrid{
    padding:0px!important;
    border:none!important;
    display: grid;
    grid-template-columns: auto auto;
    grid-gap:10px;    
}
.grid2-2{
    grid-row: span 2;
}
.grid2-3{
    grid-row: span 2;
}



.idmaingrid{
    display: grid;
    grid-template-columns:;
    grid-template-rows:auto ;
    grid-gap: 10px;
}
.idmaingrid div{
    background-color:#3c3c54;
    border : 1px solid lightgray;
    padding:10px;
    border-radius:var(--globalradius);
}
.idgrid1 h2{
    padding: 
}
.idgrid1{
    grid-column:span 2;
    grid-row: span 1;
}
.idtext{
    border:none!important;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 0!important;
    margin:0 20px;
}
.idtext p {
    margin-bottom: 5px;
}
.idtext .idimg{
    width: 150px;
    
}
.idgrid1box1, .idgrid1box2{
    border: none;
}
.idgrid1title{
    grid-column: span 1;
}

.idgrid2{
    grid-row: span 1;
    grid-column: span 1;
}
.idfavli{
    border:none!important;
    height:200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.idgrid2 li{
    list-style: none;
    padding-bottom: 10px;
    padding-top:5px;
}
.idgrid2-2{
    grid-row:span 2; 
}
.idgrid2-2 img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.idgrid3{
    grid-column: span 1;
    grid-row: span 1;
}

.idgrid3 li{
    list-style: none;
    margin-bottom: 10px;
    margin-left: -30px;
    margin-right: 10px;
}

.idgrid4{
    grid-column: span 3;
    grid-row: span 1;
}

.emoji{
    vertical-align: middle;
    height: auto!important;
    width: auto!important;
    
}
.mainboximgline{
    border:none!important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:2px;
}

.box {
    border: 1px solid lightgray;
    padding: 10px;        
    background:var(--maincolor);
    background:#3c3c54;
    border-radius:var(--globalradius);
    margin-bottom:0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    }
.box p{
    margin: 0px;
}
.box ul {
    padding-left: 20px;
    margin:0;
}

.zoom:hover{
    transform:scale(1) rotate(2deg);
    box-shadow: 0px 0px 15px black;
    z-index: 2;
}

.buttons{
    width:;
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    margin:0 auto;    
}
.buttons img{
}

.scrollupdates li{
    margin-bottom:15px;
    text-indent: -20px;
    margin-left:20px;
    
}
.shrinemaingrid{
    display: flex;
    gap:10px;
}
.shrinebox{
    display: grid;
    width: min-content;
    padding: 10px;
    border: 2px outset gray;
    background: linear-gradient(0deg,rgba(135, 135, 135, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(135, 135, 135, 1) 100%); 
    transition: all 100ms ease;
}
.shrinebox img{
    border:4px inset ;
    height: 250px;
    object-fit: cover;
}
.shrinebox p{
    color:black;
    font-weight: bold;
    padding:0;
    margin: 0;
    margin-bottom: 10px;
    font-size: 130%;
}
.shrinebox:hover{
    cursor:pointer;
    box-shadow: 0px 0px 15px 2px black;
    transform: scale(1.05);
}
.backtosite{
    border:1px solid lightgray;
    width: min-content;
    white-space: nowrap;
    margin-bottom: 20px;
    padding: 2px 5px;
}
.backtosite a{
    color:white!important;
    font-weight: normal!important;
}
.mybutton{
    margin-top: -5px;
}

.mybuttonsub{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-style: italic;
    font-weight: normal!important;
    color: white!important;
}
.mybuttoncode textarea{
    resize:none;
    scrollbar-width:none;
    background: none;
    color: white;
    border:1px solid lightgray;
    padding-right: 5px;
    padding-left: 5px;
}
.mybuttoncode{
    width: 100%;
    display: flex;
    justify-content: center;
}

.gridlinks{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}

.neighbors, .webrings{
    border:1px solid lightgray;
    padding: 10px;
}
.siteimg{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:5px;
}
.siteimg img{
    width: 88px;
    height: 31px;
    display: block;
}
.newtext{
    animation: newtext 2s linear infinite;
    transform: scale(0.7);
}
@keyframes newtext{
    0%{color: red;}
    49%{color:red;}
    50%{color: black;}
    99%{color: black;}
    100%{color: red;}
}
.calendarbox{
    border:1px solid lightgray;
    padding: 0px;        
    background:#3c3c54;
    margin-bottom:0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: center;
    gap:10px;
    overflow: hidden;
}
.calendar{
    border:none;
    height: 215px;
    transform: scale(1.17);
    transform-origin: top;
    filter:brightness(0.8) contrast(1.2) invert() saturate(0) sepia() hue-rotate(200deg);
}
.mytime {
    flex-direction: row;
    justify-content: center;
    font-family: courier;
}
.webringsflex{
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 10px;
    flex-direction: column;
    align-items:center;
}
.webringsflex2{
    flex-wrap:nowrap!important;
    height: 100px;
    overflow-x: auto;
    overflow-y:hidden; 
    scrollbar-width:thin;
    flex-direction: row;
    display: flex;
    align-items: center;
    gap:10px;
}
.webring{
    flex-shrink:0;
}

#aero-ring {
    background: linear-gradient(to bottom,#bebebe 0,#777 3%,#232323 55%,#000 55%,#161616 98%,#000 100%);
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5),
    inset 0 2px 1px rgba(255, 255, 255, 0.15),
    inset 0 -2px 1px rgba(0, 0, 0, 0.35);
    margin: 0px auto 0px auto;
    padding: 0.5rem;
    margin-top:0px;
  }
  #aero-ring a,
  #aero-ring a:visited {
    color: white !important;
  }
  #aero-ring a:focus,
  #aero-ring a:hover,
  #aero-ring a:active {
    color: lightgrey !important;
  }
.hotline{
    padding: 10px;
    font-family: nunito;
    color:white;
    background:var(--maincolor);
    border:1px solid ;
}
.hotline a{
    color: white!important;
    text-decoration: none;
}
#fujofans{
    display: flex;
    justify-content: center;
    margin-top:10px;
}
.fujoring{
    transform: scale(0.9);
}
.yaoiringimg{
  background-image:
  linear-gradient(to top,#000,#00000000),
  url('https://www.virtuagirl.net/STORAGEROOM/xxxholic.png');
  background-size:cover;
  display:grid;
  height:80px;
  width:200px;
  color:#fff;
  font-family:'Times New Roman';
  font-size:18px
}

#countrymap{
    width: 100%;
    height: 500px;
    border:none;
    display: block;
    margin: auto;
}

</style>