@font-face {
src: url(https://dl.dropbox.com/s/16ntpxj8fny66d6/Quick%20Love.ttf);
font-family: quick-love;
}
@font-face {
font-family: magica;
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}
::selection, ::-moz-selection {
background: #ffebf3;
text-shadow: -1px 0 #FF84AB, 0 1px #FF84AB, 1px 0 #FF84AB, 0 -1px #FF84AB;
color: #FFFFFF;
}
mark {
    font-family: quick-love;
    font-size: .8em;
    color: #FF84AB;
    background-color: #ffebf3;
    padding: .1em;
    border-radius: .5em;
    border: dashed 1px #ff9fd4;
}
a,a:visited {
    color: #FF87B8;
    text-decoration-style: wavy;
    transition: 0.5s;
}
a:hover {
    letter-spacing: -.1em;
    font-style: italic;
}
b {
    color: #FF84AB;
}
body {
    padding: 1em 5em 2em 5em;
    width: 45em;
    margin: auto;
    background-image: url('https://i.postimg.cc/x8KjVySv/image.png');
    font-family: magica;
    color: #555;
}
#s-m-t-tooltip{
	/* basic */
	max-width: 350px;
	z-index: 10;
	margin: 24px 14px 7px 12px;
	/* style and design */
    border-width: 7px;
    border-style: solid; 
    border-image: url("https://i.postimg.cc/CMnhb0X3/image.png") 8 fill round;
    border-image-outset: 6px;
  background: white;
  color: black;
}
    #hello{
        border-width: 7px;
        border-style: solid; 
        border-image: url("https://i.postimg.cc/CMnhb0X3/image.png") 8 fill round;
        background-color: white;
        height: 46.8em;
        padding: .5em 0 0 0;
        display:flex;
        justify-content: flex-end;
        flex-direction: column;
    }
        header {
            background-color: #ffebf3;
            border-image-source: url(https://i.postimg.cc/s2KdC689/image-psd-1.png);
            border-image-slice: fill 30%;
            border-image-width: 30px;
            border-image-outset: 10px;
            border-image-repeat: round; 
            margin: auto auto .35em auto;
            width: 98%;
            height: 5.8em;
            margin-bottom: 1em;
            text-align: center;
        }
            #heading {
                font-size: 4.5em;
                font-family: quick-love;
                background-image: url("https://64.media.tumblr.com/53c150a227ddcde4594fe65c54c009d7/fd75870c69147eae-67/s540x810/27604414e7ec6f144196ae64cc196b75aec6cc8f.gif");
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke-width: 1.5px;
                -webkit-text-stroke-color: #555;
            }
        footer {
            height: 3.4em;
            padding: .5em;
        }
        #container {
            box-shadow: #ff9fd4 inset 0 0 3px;
            border: 1px solid #555;
            border-radius: 5px;
            background: url('https://64.media.tumblr.com/c97a0dbf58984e14d3b8446d40906c44/bc39cd05086fab60-8d/s250x400/2e9d11ccd2b6e06e7a386ac2dafafc881cbf4ca6.pnj');
            display: grid;
            grid-template-columns: 34% 65%;
            align-items: flex-start;
            column-gap: .5em;
            align-content: flex-start;
            overflow: hidden;
            white-space: nowrap;
            height: auto;
        }
            .box {
                padding: .7em;
            }
                #profile {
                    height: 15em;
                    text-align: center;
                }
                    #pfp {
                        width: 100%;
                        border-image-source: url(https://files.catbox.moe/08ew8c.pnj);
                        border-image-slice: fill 30%;
                        border-image-width: 30px;
                        border-image-outset: 10px;
                        border-image-repeat: round; 
                    }
                    #name {
                        font-size: 3em;
                        position: relative;
                        bottom: .8em;
                        font-family: quick-love;
                        color: #FF84AB;
                        text-shadow: -1px 0 #FB3A5F, 0 1px #FB3A5F, 1px 0 #FB3A5F, 0 -1px #FB3A5F, 0 0;
                    }
                #ext {
                    height: 14em;
                    background: url('https://64.media.tumblr.com/8843b2003fbad89508c388836ac20ed2/314dc981b19f7ad7-47/s250x400/b191e596bc2fa3bc6014901b53edac9b8d8fcd47.gif');
                    background-size: cover;
                    border: 1px dashed #555;
                    padding: .1em 5.4em 0 1.8em;
                    text-wrap: wrap;
                    overflow-y: scroll;
                }
                #basic {
                    height: 10em;
                    border: solid #555 1px;
                    border-radius: 0 10px 10px 0;
                    padding: .1em;
                    text-align: center;
                    background: url('https://64.media.tumblr.com/f3d4f9100ec5dd1070048e2e1e86c190/54dbdd530a69c1c9-f8/s75x75_c1/554afeed0758997760577ced06f2027841b0b628.pnj');
                }
                    #info {
                        font-size: 1.3em;
                    }
                    #infoscroll {
                        height: 6.5em;
                        overflow-y: scroll;
                        overflow-x: hidden;
                        margin-bottom: .5em;
                        padding-top: .2em;
                        text-align: left;
                        text-wrap: wrap;
                        background: #fff;
                        border: 1px solid pink;
                    }
                        #infoscroll img:hover {
                            transform: scale(1.1);
                            -webkit-transition: all 0.1s ease-in-out;
                            -moz-transition: all 0.1s ease-in-out;
                            transition: all 0.1s ease-in-out;
                        }
                    #shinybuttons {
                        width: 95%;
                        overflow-x: scroll;
                        margin: auto;
                        display: block;
                    }
                    #shinybuttons::-moz-scrollbar{
                        display: none;
                        }
                #int {
                    height: 10.5em;
                    border: 1px solid #555;
                    border-radius: 0 0 10px 10px;
                    margin-top: .5em;
                    background: #fff;
                }
                    .tab {
                        background: url('https://64.media.tumblr.com/f3d4f9100ec5dd1070048e2e1e86c190/54dbdd530a69c1c9-f8/s75x75_c1/554afeed0758997760577ced06f2027841b0b628.pnj');
                        border-bottom: 1px solid #555;
                        padding: .2em;
                        text-align: center;
                    }
                    .tablinks {
                        font-size: 1em;
                        font-family: quick-love;
                        color: #FF84AB;
                        background: #ffebf3;
                        border-radius: 5px;
                        border: 1px dashed #ff9fd4;
                        transition: 0.5s;
                    }
                    .tablinks:hover, .active {
                        background: #fff;
                        font-style:italic;
                    }
                    .tabcontent {
                        font-size:1em;
                        overflow-y: scroll;
                        height: 8.65em;
                        white-space: nowrap;
                        overflow-x: auto;
                        box-sizing: border-box;
                        overflow-y: hidden;
                    }
                        #ints1 {
                            width: 10em;
                            overflow-y:scroll;
                            overflow-x:hidden;
                            white-space: normal;
                            display: inline-block;
                            height: 90%;
                            padding: .3em;
                            vertical-align: middle;
                        }
                        #ints2 {
                            background: #ffebf3;
                            padding: .2em;
                            width: 10em;
                            overflow-y:scroll;
                            overflow-x:hidden;
                            white-space: normal;
                            display: inline-block;
                            height: 90%;
                            padding: .3em;
                            vertical-align: middle;
                            overflow-y:scroll;
                            overflow-x:hidden;
                            white-space: normal;
                            display: inline-block;
                            height: 90%;
                            padding: .3em;
                            vertical-align: middle;
                        }
                        #faves, #kin {
                            text-wrap: wrap;
                            padding: .2em;
                            overflow-y: scroll;
                            overflow-x: hidden;
                        }
                            .portraits {
                                margin: .3rem .1rem 0;
                                overflow-x: scroll;
                                width: 100%;
                                white-space: nowrap;
                        overflow-x: auto;
                        box-sizing: border-box;
                        overflow-y: hidden;
                            }
                            .portraits > img {
                                width: 20%;
                                border: dashed 1px #ff9fd4;
                            }
                #contact {
                    height: 5em;
                    border: 1px dashed #555;
                    margin: .5em 0 .5em 0;
                    background: #fff;
                }
                    h1 {
                        background: #ffebf3;
                        color: #FF84AB;
                        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
                        font-size: 1em;
                        font-family: quick-love;
                        text-align: left;
                        padding: .1em;
                        margin: 0;
                    }
                    #contactcontent {
                        padding: .2em;
                        text-align: center;
                        text-wrap: wrap;
                        height: 3em;
                        overflow-y: scroll;
                    }
                #quiz {
                    height: 8em;
                    margin: .5em 0 .5em 0;
                    padding: .2em;
                    background: #fff;
                    border: 1px dashed #555;
                    overflow-y: scroll;
                }
                    #quiz img {
                        display: block;
                        margin: auto;
                        max-width: 70%;
                    }
                        #quiz img:hover {
                            transform: scale(1.1);
                            -webkit-transition: all 0.1s ease-in-out;
                            -moz-transition: all 0.1s ease-in-out;
                            transition: all 0.1s ease-in-out;
                        }
                #upp {
                    height: 3em;
                    z-index: 99;
                    overflow-y: hidden;
                }
                    .song {
                        
                    }
                    #img {
                        width: 5%;
                        float: left;
                        position: absolute;
                        bottom: 4.5rem;
                        right: 69.5rem;
                        z-index: 99;
                    }
                    #img:hover,
                    #img:focus {
                        -webkit-animation-name:bounce;
                        animation-name:bounce;
                        -webkit-transform-origin:center bottom;
                        transform-origin:center bottom;
                    }
                    #blinky {
                        display: block;
                        animation: marquee 5s linear infinite;
                        float: right;
                        }
                            @keyframes marquee {
                                0% {
                                -webkit-transform: translate(0, 100%);
                                transform: translate(0, 100%);
                                }
                                100% {
                                -webkit-transform: translate(0, -100%);
                                transform: translate(0, -100%);}
                            }
                            #blinky:hover {
                                animation-play-state: paused;
                            }
                        #blinky img {
                            display: block;
                            width: 100%;
                        }
                    #side {
                        overflow: hidden;
                        z-index: 99;
                    }
                        #stampy {
                            animation: marquee1 5s linear infinite;
                            height: 100%;
                            animation-iteration-count: infinite;
                                display: flex;
                                flex-direction: row;
                                gap: 0.5rem;
                            }
                                @keyframes marquee1 {
                                    0% {
                                    -webkit-transform: translate(50%, 0);
                                    transform: translate(50%, 0);
                                    }
                                    100% {
                                    -webkit-transform: translate(-100%, 0);
                                    transform: translate(-100%, 0);}
                                }
                            #stampy:hover {
                                animation-play-state: paused;
                            }
#back {
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
  font-size: 1.3em;
  text-decoration: underline 1px wavy;
}