::selection {
            color: white;
            text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 2px #0025b8, 0 0 3px #00619c;
        }

        @font-face {
            font-family: spirit;
            src: url('../fonts/Spirit.ttf');
        }

        body {
            cursor: url("cursor.ico"), default;
            font-family: ms ui gothic;
            font-size: 13px;
            background-image: url('../media/homebg.png')
        }

        a {
            color: rgb(102, 165, 207);
        }

        #statuscafe a {
            font-family: spirit;
        }

        #navlink a:hover {
            text-decoration: dotted;
            filter: blur(.05rem);
        }

        li {
            list-style-image: url('http://i205.photobucket.com/albums/bb186/mhilkas/Currently/sentindo.gif');
            margin-left: 14px;
        }

        .container {
            width: 825px;
            margin: auto;
        }

        .mainbox {
            width: 825px;
            height: auto;
            padding: 5px;
            border-width: 7px;
            border-style: solid;
            border-image: url('https://i.postimg.cc/Dfgj5YXm/widerscallops.png') 9 fill round;

        }

        #header {
            height: 200px;
            border: 1px solid #000;
            margin: 0 0 10px 0;
        }

        #header_img {
            width: 100%;
            height: 100%;
            background-position: top;
            background-image: url('../media/headerbg.gif'), url('../media/sona.jpg');
            background-repeat: repeat-x, no-repeat;
            background-position: top center, 100% 8%;
            background-size: 5em, 100%;
        }

        .maincontent {
            display: grid;
            grid-template-columns: 176px 424px 204px;
            grid-template-rows: 0px 125px;
            gap: 10px;
            grid-template-areas:
                "top top top"
                "sidebar1 info sidebar2"
                "bot bot bot"
                "foot foot foot";
        }

        .footer {
            width: 825px;
            margin-top: 250px;
            padding: 5px;
            text-align: center;
        }



        .top {
            grid-area: top;
        }

        .sidebar1 {
            grid-area: sidebar1;
        }

        .info {
            grid-area: info;
        }

        .sidebar2 {
            grid-area: sidebar2;
        }

        .bot {
            grid-area: bot;
        }

        .infobox {
            margin-right: 15px;
            margin-bottom: 25px;
            width: 400px;
            height: 190px;
            padding: 5px;
            border-width: 7px;
            border-style: solid;
            border-image: url('../media/bluelace.png') 7 fill round;
        }

        .navbox {
            width: 175px;
            height: 205px;
            text-align: center;
            background-color: #fff;
            font-size: 14px;
            color: #000;
            display: inline-block;
            border: 1px solid #000;
            margin-bottom: 15px;
            margin-right: 10px;
            background-image: url('../media/cattop.jpg'), url('../media/catbtm.jpg');
            background-repeat: no-repeat, no-repeat;
            background-position: top center, bottom center;
            background-size: 100%;
            padding-top: 60px;
        }

        #navlink {
            padding: 8px;
        }

        .float {
            height: auto;
            float: left;
        }

        .ad {
            grid-area: sidebar2;
            text-align: center;
            width: 180px;
            border: 1px solid black;
            background-image: url('../media/ad.png');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100%;
            padding-top: 180px;
            margin-left: 10px;
            margin-bottom: 33px;
        }

        .title1 {
            text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
            color: white;
            font-size: 20px;
            font-family: "Questrial", sans-serif;
            padding: 1px;
        }

        .hello {
            text-align: center;
            width: 180px;
            border: 1px solid black;
            background-image: url('../media/ad.png');
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100%;
            padding-top: 180px;
            margin-left: 10px;
        }

        #tab {
            width: 170px;
        }

        #tab .nb {
            width: 149px;
            margin-bottom: 20px;
            padding: 5px 10px 5px 10px;
            background: url(https://31.media.tumblr.com/905e072082d7e170a96e198cf24af6d9/tumblr_inline_nc4ltqDhD21rh7826.png);
            border: 1px solid rgba(0, 0, 0, 0.1);
            -webkit-border-bottom-right-radius: 6px;
            -webkit-border-bottom-left-radius: 6px;
            -moz-border-radius-bottomright: 6px;
            -moz-border-radius-bottomleft: 6px;
            border-bottom-right-radius: 6px;
            border-bottom-left-radius: 6px;
            box-shadow: rgba(0, 0, 0, 0.07)5px 5px;
            height: 90px;
            overflow: scroll;
        }

        #tab .sp {
            height: 14px;
            width: 168px;
            margin: -17px 0 0 -10px;
            overflow: hidden;
            position: absolute;
            background: url(https://31.media.tumblr.com/89d0a73dbfd39d6e6dfcd157efacf73a/tumblr_inline_nc4ltugMJI1rh7826.png);
        }

        #tab .text {
            font-size: 11px;
            line-height: 13px;
        }


        #tab .title {
            margin: -25px 0px 0px 0px;
            text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
            color: white;
            font-size: 20px;
            font-family: "Questrial", sans-serif;
            padding: 1px;
            position: absolute;
            z-index: 1;
        }

        #tab .hl {
            background: linear-gradient(90deg, rgba(184, 221, 245, 1) 0%, rgba(255, 255, 255, 0.29) 50%);
            text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
            font-family: spirit;
        }

        #tab li {
            list-style-image: url('http://i205.photobucket.com/albums/bb186/mhilkas/Currently/sentindo.gif');
            margin-left: 14px;
        }

        #statuscafe {
            width: 155px;
            height: 35px;
            padding: 10px;
            border-width: 1px;
            border-style: inset;
            border-image-source: url('../media/bluelace2.png');
            border-image-slice: 30%;
            border-image-width: 20px;
            border-image-outset: 5px;
            border-image-repeat: round;
        }

        #lastfm {
            width: 204px;
            height: 35px;
            padding: 10px;
            border-width: 1px;
            border-style: inset;
            border-image-source: url('../media/bluelace2.png');
            border-image-slice: 30%;
            border-image-width: 20px;
            border-image-outset: 5px;
            border-image-repeat: round;
            position: relative;
            bottom: 142px;
            left: 189px;
        }

        #cliques {
            width: 236px;
            height: 143px;
            border-width: 1px;
            border-style: inset;
            border-image-source: url(https://files.catbox.moe/fp9ci4.png);
            border-image-slice: 30%;
            border-image-width: 7px;
            border-image-outset: 7px;
            border-image-repeat: round;
            margin-left: -50px;
            padding: 5px;
            margin-top: -20px;
        }

        .scroll {
            overflow-y: scroll;
        }

        #sites {
            margin-top: 15px;
            width: 557px;
        }



        #sites .non:hover {
            filter: grayscale(100%);
            transition: .25s ease-in;
        }

        ul.a {
            list-style-type: url("https://whimsical.heartette.net/_files/material/bullets/bulk5.gif");
        }

        /* falling imgs */
        @-webkit-keyframes snowflakes-fall {
            0% {
                top: -10%
            }

            100% {
                top: 100%
            }
        }

        @-webkit-keyframes snowflakes-shake {

            0%,
            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }

            50% {
                -webkit-transform: translateX(80px);
                transform: translateX(80px)
            }
        }

        @keyframes snowflakes-fall {
            0% {
                top: -10%
            }

            100% {
                top: 100%
            }
        }

        @keyframes snowflakes-shake {

            0%,
            100% {
                transform: translateX(0)
            }

            50% {
                transform: translateX(80px)
            }
        }

        .snowflake {
            position: fixed;
            top: -10%;
            z-index: 9999;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-animation-name: snowflakes-fall, snowflakes-shake;
            -webkit-animation-duration: 10s, 3s;
            -webkit-animation-timing-function: linear, ease-in-out;
            -webkit-animation-iteration-count: infinite, infinite;
            -webkit-animation-play-state: running, running;
            animation-name: snowflakes-fall, snowflakes-shake;
            animation-duration: 10s, 3s;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-play-state: running, running;
            z-index: -1;
        }

        .snowflake:nth-of-type(0) {
            left: 1%;
            -webkit-animation-delay: 0s, 0s;
            animation-delay: 0s, 0s
        }

        .snowflake:nth-of-type(1) {
            left: 10%;
            -webkit-animation-delay: 1s, 1s;
            animation-delay: 1s, 1s
        }

        .snowflake:nth-of-type(2) {
            left: 20%;
            -webkit-animation-delay: 6s, .5s;
            animation-delay: 6s, .5s
        }

        .snowflake:nth-of-type(3) {
            left: 30%;
            -webkit-animation-delay: 4s, 2s;
            animation-delay: 4s, 2s
        }

        .snowflake:nth-of-type(4) {
            left: 40%;
            -webkit-animation-delay: 2s, 2s;
            animation-delay: 2s, 2s
        }

        .snowflake:nth-of-type(5) {
            left: 50%;
            -webkit-animation-delay: 8s, 3s;
            animation-delay: 8s, 3s
        }

        .snowflake:nth-of-type(6) {
            left: 60%;
            -webkit-animation-delay: 6s, 2s;
            animation-delay: 6s, 2s
        }

        .snowflake:nth-of-type(7) {
            left: 70%;
            -webkit-animation-delay: 2.5s, 1s;
            animation-delay: 2.5s, 1s
        }

        .snowflake:nth-of-type(8) {
            left: 80%;
            -webkit-animation-delay: 1s, 0s;
            animation-delay: 1s, 0s
        }

        .snowflake:nth-of-type(9) {
            left: 90%;
            -webkit-animation-delay: 3s, 1.5s;
            animation-delay: 3s, 1.5s
        }

        .snowflake:nth-of-type(10) {
            left: 25%;
            -webkit-animation-delay: 2s, 0s;
            animation-delay: 2s, 0s
        }

        .snowflake:nth-of-type(11) {
            left: 65%;
            -webkit-animation-delay: 4s, 2.5s;
            animation-delay: 4s, 2.5s
        }

        /* falling imgs end */