@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Jura:wght@300..700&family=Libre+Barcode+128+Text&family=Nova+Mono&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+Beastly&family=Rubik+Puddles&family=Scope+One&family=Syncopate:wght@400;700&family=Trade+Winds&display=swap');

* {
    font-variant-caps:small-caps;
    margin: auto;
    
}

body {
    background-color: black;
    color: black;
    font-size: 13px;
    font-family: courier;
    width: 900px;
    overflow: hidden;
}
@media only screen and (max-width: 500px) { 
    body {
        overflow: hidden;
    }
}

h1 {
    font-family: "Doto", monospace;
    color: white;
    text-decoration: underline 1px dotted white;
    font-size: 15px;
}

h2 {
   font-family: "Doto", monospace;
    color: white;
    text-decoration: underline 1px dotted white;
    font-size: 12px; 
}

a {
    color: yellow;
    text-decoration: none;
    transition: filter 1s ease;
    transition: transform 1s ease;
}

a img {
    filter: grayscale(1);
}

a:hover, a img:hover {
    cursor: grab;
    filter: grayscale(0); 
    filter: drop-shadow(0px 0px 6px #d7c700);
    font-size: 17px;
    transition: 0.1s ease;
    text-decoration: underline wavy 1px yellow;
}

a:after {
    color: lightsteelblue;
}

/*TOOLTIPS------1container-2item--------------------------------------*/
.toolhouse {
    display: flex wrap;
    margin: auto;
    width: 400px;
    text-align: center;
    position: relative;
    top: 220px;
    left: -180px;
    
}
.tooltip {
    width: 25px;
    height: 24px;
    margin: auto;
    display: inline-block;
    border-bottom: 1px dotted white;
}

/*TOOLTIPSmedia---------------------------------------*/
@media only screen and (max-width: 500px) { 
    .toolhouse {
    display: flex;
    position: absolute;
    margin: auto;
    left: 13%;
    top: 1%;
    width: 75vw;
    }
    .tooltip {
    margin: 2vw;
    width: 24px;
    height: 24px;
    border-bottom: transparent;
    }
}

/*BANNER------1container-2item-3efx--------------------------------*/
.banner {
     width: 50%;
     height: 142px;
     border: 1px solid #fff;
     border-radius: 2px;
     margin: auto;
}
.banImg {
     width: 100%;
     height: 100%;
     filter: saturate(0%) blur(3px);
     transition: filter 0.1s ease;
}
.banImg:hover {
    filter: saturate(100%);
}
/*BANNERmedia---------------------------------------*/
@media only screen and (max-width: 500px) {  
    .banner {
        margin-top: 100vw;
        width: 60vw;
        height: 17vw;
        margin: auto;
        position: absolute;
        left: 20%;
        top: 5%;
    }
}
/*CLYDE------1anim-2cont-3img---------------------------------*/
    @keyframes wiggle {
        0% { transform: rotate(0deg); }
        80% { transform: rotate(0deg); }
        85% { transform: rotate(5deg); }
        95% { transform: rotate(-5deg); }
        100% { transform: rotate(0deg); }
}
    .clyde {
        width: 50px;
        height: auto;
        position: relative;
        top: -70px;
        left: 230px;
}
    .clyde > img {
        rotate: 25deg;
        animation: wiggle 1.5s infinite;
        overflow: hidden;
}

.newEmoticon {
    width: 50px;
    position: absolute;
    top: 90px;
    
}

.newEmoticon > img {
    width: 50px;
    filter: ;
 
}

/*CLYDEmedia---------------------------------------*/
@media only screen and (max-width: 500px) { 
    .clyde img {
        position: absolute;
        top: 2%;
        left: 75%;
    }
    .newEmoticon { 
    display: hidden;
        opacity: 0;
    }
}
/*SCROLLER---------------------------------------*/
 .scroller {
     border: 1px solid #fff;
     border-radius: 3px;	
     margin: auto;
     margin-top: -40px;
     text-align: center;
     width: 60%;
     height: 20px;
     background: grey;
     overflow: hidden;
}
    .marquee {
	overflow: hidden;
	display: flex;
	line-height: 20px; 
}
    .marquee span{
	white-space: nowrap;
    font-size: 12px;
}
/*SCROLLERmedia---------------------------------------*/
@media only screen and (max-width: 500px) { 
    .scroller {
        width: 70vw;
        font-size: 10vw;
        position: absolute;
        left: 14%;
        top: 19%;
    }
    .marquee span{
        font-size: 11px;
    }
}

/*SONGflourish---------------------------------------*/
.songTitle {
    width: 30%;
    margin: auto;
    font-size: 11px;
    text-align: left;
    position: relative;
    top: -95px;
    right: -665px;
    rotate: -25deg;
    text-decoration: underline dotted 1px grey;
    color: #fff300;
    letter-spacing: 1px;
    line-height: 15px;
}

.boulette1 {
    width: 40px;
    border: 1px dotted white;
    border-left: transparent;
    border-right: transparent;
    position: relative;
    top: -52px;
    right: -519px;
    z-index: 5;
}

.boulette2 {
    width: 10px;
    height: 10px;
    border: 1px solid white;
    border-radius: 100%;
    position: relative;
    top: -58.5px;
    right: -495px;
    z-index: 5;
    background-color: grey;
}

/*SONGflourishMedia---------------------------------------*/
@media only screen and (max-width: 500px) {
    .songTitle { 
        display: hidden;
        opacity: 0;
    }
    .boulette1 {
        display: hidden;
        opacity: 0;
    }
    .boulette2 {
        display: hidden;
        opacity: 0;
    }
}

/*TABS-1tab-2button-3content-------------------------------------*/
.tab {
    /* container */
    max-width: 100%;
    width: 40%;
    margin: auto;
    padding-top: 1.5%;
    transition: .3s ease;
    display: flex;
}
.tab button {
    /* button */
    font-family: courier;
    font-size: 10px;
	color: black;
    background: goldenrod;
    cursor: grab;
    border: 1px solid white;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    margin: auto;
    transition: .3s ease;
}
.tab button > p {
    /* button text */
    color: white;
    width: 0px;
    margin: auto;
    text-align: center;
    overflow: hidden;
    transition: .3s ease;
}
.tab button:hover {
    /* button hover */
    background: white;
    color: black;
    border: 1px white solid;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    transition: .3s ease;
}
.tab button:hover > p {
    /* button text */
    color: darkgoldenrod;
    text-align: center;
    margin: auto;
    overflow: visible;
    font-size: 20px;
    transition: .3s ease;
    font-family: "Jura";
    
}
.tab button::after > p {
    transition: .3s ease;
}
.tab button:active, .tab button:focus {
    /* button clicked/ */
    background: white;
    color: black;
    height: 90px;
    width: 90px;
    margin: auto;
    border: 1px solid white;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    font-size: 15px;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.tab button:active, .tab button:focus > p {
    /* button text on click */
    color: black;
    height: 90px;
    width: 90px;
    text-align: center;
    overflow: visible;
    transition: .3s ease;
    font-family: "Nova Mono", monospace;
    transform: rotate(45deg);
}
.tab button:focus > p {
    padding-top: 43px;
}
.tabcontent {
    background: transparent;
    border-radius: 80px;
    border: 1px solid white;
    margin: 10;
    padding: 5px;
    width: 80%;
    height: 300px;
    z-index: 0;
    overflow: scroll;
    text-align: center;
    background-image: url('/misc/bgY.gif');
    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.tabcontent p { 
    padding: 15px;
}

::-webkit-scrollbar { 
    background: transparent;
}
::-webkit-scrollbar:horizontal {
    background: transparent;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: white;
}

/*TABSmedia-1tab-2button-3content-------------------------------------*/
@media only screen and (max-width: 500px) { 
    .tab { 
        width: 60vw;
        margin-top: 80vw;
        position: absolute;
        left: 20%;
        top: 20%;
    }
    .tab button { 
        width: 10vw;
        height: 10vw;
    }
    .tab button > p { 
        width: 8vw;
    }
    .tabcontent { 
        width: 80vw;
        margin: auto;
        overflow: scroll;
        position: absolute;
        left: 8%;
        top: 25%;
        font-size: 15px;
        background-image: url('/misc/bgmobile.gif');
        color: #444135;
    }
}
/*TABITEMS-------------------------------------------------------*/
.friends {
    color: yellow;
    width: 15%;
    height: 200px;
    display: inline-block;
    margin: auto;
    margin-top: 5%;
    margin-left: 15%;
    overflow: scroll;
    transition: filter 1s ease;
    transition: transform 1s ease;
}
.note {
    display: inline-block;
    color: black;
    width: 25%;
    height: auto;
    margin: auto;
}
.stamps {
	display: inline-block;
	width: 30%;
	height: auto;
    overflow: scroll;
    margin: auto;
}
.stuff {
    border-radius: 3px;
    width: 16%;
    height: auto;
    overflow: scroll;
    transition: 0.3s ease;
    display: inline-block;
    margin: auto;
}
/*TABITEMSmedia-------------------------------------*/
@media only screen and (max-width: 500px) { 
    .stuff {
        width: 10vw
    }
    .stamps { 
    width: 50vw;
    }
    .note { 
    width: 60vw;
    }
    .friends {
    width: 65vw;
    height: auto;
    margin-top: 0%;
    margin-left: 0%;  
    }
}
/*AVI-------------------------------------*/
.blurb {
    width: 15%;
    font-family: monospace;
    position: relative;
    text-align: center;
    bottom: 335px;
    left: -445px;
    animation: float 7.5s infinite;
    opacity: 0.5;
    color: white;
}
    @keyframes float {
        
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-21px);
	}
	100% {
		transform: translatey(0px);
	}
}
.aviB {
    border: 1px dotted white;
    border-radius: 3px;
    max-width: 100%;
    width: 100px;
    height: 100px;
    background-image: url('/misc/bgY.gif');
    filter: saturate(1);
    position: relative;
    right: 435px;
    bottom: 330px;
}
.aviB > img {
    width: 100%;
    height: 100%;
}
.nametag {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-family: "Doto", sans-serif;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 20px;
    width: 20px;
    display: inline;
    color: white;
    margin: auto;
    position: relative;
    left: -52px;
    top: -770px;
}

/*AVImedia-------------------------------------*/
@media only screen and (max-width: 500px) { 
    .blurb {
    display: hidden;
    opacity: 0; 
    }
    .aviB {
    display: hidden;
    opacity: 0;
    }
    .aviB img {
    display: hidden;
    opacity: 0;
    }
    .nametag { 
    width: 5vw;
    position: absolute;
    top: 25%;
    left: 1%;
    }
}
/*EXTRAmedia-----------------------------------------------*/
.miniplayer {
    position: relative;
    left: 550px;
    bottom: 300px;
    width: 30%;
    height: auto;
    border: 1px solid white;
    border-radius: 3px;
    
}
iframe {
    width: 100%;
    height: 200px;
    border: transparent;
    border-radius: 3px;
    max-width: 100%;
    overflow: scroll;
}

.mTon {
    position: relative;
    left: 700px;
    bottom: 550px;
    margin: auto;
    width: 30px;
    display: flex row;
}

.mTon > div {  
    height: 30px;
    width: 100%;
    border: 1px solid white;
    border-radius: 100%;
    text-align: center;
    margin: 10px;
    transition: .3s ease;
}

.mTon > div > p {
    /* button text */
    color: white;
    width: 10px;
    margin: auto;
    text-align: center;
    overflow: hidden;
    transition: .3s ease;
    padding-top: 5px;
}

/*EXTRAmedia-----------------------------------------------*/
@media only screen and (max-width: 500px) { 
    .miniplayer {
       display: hidden;
        width: 70vw;
        height: 30vw;
        position: absolute;
        top: 70%;
        left: 15%;
        opacity: 0;
    }
    iframe {
        display: hidden;
        width: 70vw;
        height: 30vw;
    }
    .mButt {
        display: hidden;
        opacity: 0;
    }
    .mTon {
        display: hidden;
        opacity: 0;
        width: 0vw;
    }
}

/*MISC-----------------------------------------------*/
footer {
    width: 500px;
    height: 20px;
    text-decoration: underline 1px wavy white;
    text-align: right;
    display: inline-block;
    margin: auto;
    position: relative;
    left: 610px;
    bottom: 560px;
    color: yellow;
}

.counter {
    position: relative;
    bottom: 1740px;
    right: 410px;
    width: 5%;
    border: transparent;
    border-bottom: white 1px dotted;
}
/*MISCmedia-----------------------------------------------*/
@media only screen and (max-width: 500px) { 
    footer {
        position: absolute;
        width: 40vw;
        bottom: 5%;
        left: 30%;
        text-align: center;
    }
    .counter {
        display: hidden;
        opacity: 0;
    }
}
/*BG---------------------------------------------------------------*/
.intshadowB {
    /* blurred outer */
    border-radius: 100px;
    border: 5px solid white;
    width: 70%;
    height: 300px;
    padding: 25px;
    filter: saturate(100%) blur(10px);
    position: relative;
    bottom: 990px;
    left: -100px;
    z-index: -1;
}
.intshadow {
    /* blurred bg inner */
    text-align: center;
    background-image: url('/misc/bgY.gif');
    background-position: center;
    background-size: cover;
    border-radius: 65px;
    border: 1px dotted white;
    width: 100%;
    height: 300px ;
    margin: 5px auto;
    filter: saturate(100%) brightness(1) blur(80px);
    color: black;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.oshadow {
    filter: saturate(100%) blur(3px);
    width: 10%;
    height: 100px;
    border-radius: 100px;
    border: 1px solid white;
    position: relative;
    bottom: 1200px;
    right: 400px;
    z-index: -2;
    animation: float 6.5s infinite;
}

.oshadow2 {
    filter: saturate(100%) blur(5px);
    width: 10%;
    height: 100px;
    border-radius: 100px;
    border: 1px dotted white;
    position: relative;
    bottom: 1650px;
    left: 250px;
    z-index: -2;
    animation: float 10.5s infinite;
}

.oshadow3 {
    filter: saturate(100%) blur(2px);
    width: 10%;
    height: 100px;
    border-radius: 100px;
    border: 1px solid white;
    position: relative;
    bottom: 1400px;
    left: 700px;
    z-index: -2;
    animation: float 8.5s infinite;
}

.oBord {
    border: 1px dotted white;
    border-radius: 65px;
    width: 84%;
    height: 250px;
    position: relative;
    bottom: 1600px;
    left: 0px;
    z-index: -1;
}
/*BGmedia-----------------------------------------------*/
@media only screen and (max-width: 500px) { 
    .oshadow {
        display: hidden;
        opacity: 0;
    }
    .oshadow2 {
        display: hidden;
        opacity: 0;
    }
    .oshadow3 {
        display: hidden;
        opacity: 0;
    }
    .oBord {
        display: hidden;
        opacity: 0;
    }
    .intshadow {
        display: hidden;
        opacity: 0;
    }
    .intshadowB {
        display: hidden;
        opacity: 0;
    }
}