/*
MySpace93 CSS sheet Version 2.3
May 13, 2021, 10:38 AM

written by pannacottafugo
https://myspace.windows93.net/?id=27579

Changes in 2.3
  - Added Rounded Corners
To fix later
  - "Current Front" message not viewable when page is too narrow
*/

/*font of site*/
div#header{
    background-color: black;
    font-family: Georgia;}
/*formatting of the header*/
div#hSub{
    background-image: url("https://s3.amazonaws.com/image.blingee.com/images12/content/output/2007/6/25/215032681_7ba68198.gif?4");
    font-family: Georgia;
    text-align: center;}

#container:before {
    content: "Current Front: Bees";
    font-family: Georgia
    color: white;
    display: block;
    height:10px;
    margin-top: 15px;
    margin-left: 5px;
}

/*removes "myspace.windows93.net" so it can be replaced with other text*/
.logo{visibility: hidden;}

/*formatting for said other text*/
.logo::after {
    content: "This ain't no ordinary ice cream shop";
    font-family: Pacifico;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    color: yellow;
    visibility: visible;
    animation: lemonblink .5s linear infinite;}

/*changes text to something different when cursor hovers over it*/
.logo:hover::after {
    content: "Alright, Alright. Make me hip hop cherry pop";
    font-family: Pacifico;
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    color: yellow;
    visibility: visible;
    animation: lemonblink .5s linear infinite;}

/*fake notification*/
span#hUp::before {
    content: "The sky is not blue";
    color: #8800f0;
    font-size: small;
    text-decoration: underline;
    animation: blinker .5s linear infinite;}

/*changes fake notif. to something different when cursor hovers over it*/
span#hUp:hover::before{
    content: "The grass is not green";
    color: #8800f0;
    font-size: small;
    text-decoration: underline;
    animation: blinker .5s linear infinite;}

/*changes cursors*/
* {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1049.cur), auto !important;} /*default*/
img{cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym56.cur), auto !important;} /*hover over image*/
a:-webkit-any-link {
    color: #a863e4;
    cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym56.cur), auto !important;} /*hover over link*/

/*changes the background of the site*/
body {
    font-family: Georgia;
    font-variant: small-caps;
    background-image: url("https://i.imgur.com/aGm9ouh.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    animation: bounce 4s;
    animation-iteration-count: infinite;}

/*changes text colors*/
p{color: white;}
b{color: white;}
ul{color: white;}

div.box{
  border-radius: 15px;
  padding: 20px;
  border: 3px solid red;
}
/*changes"Edit your profile"/"pannacottafugo is in your extended network" box*/
div.extended.box{
    background-image: url("https://i.pinimg.com/originals/ac/25/4e/ac254e3b47185dfc8accba22f06bbc38.gif");
    color: white;}


/*changes that box at the top with your username*/
h2#name.uName{
    background-image: url("https://p.favim.com/orig/2018/10/08/red-glitter-gif-Favim.com-6406274.gif");
    color:white;
    text-align: center;
    visibility: visible;}

/*adds a nice little color changing effect when cursor hovers over it*/
h2#name.uName:hover{
    background-image: url("https://p.favim.com/orig/2018/10/08/red-glitter-gif-Favim.com-6406274.gif");
    color:white;
    text-align: center;
    visibility: visible;
    animation: lemonblink .5s linear infinite;}

/*changes those things that say "About me" and "Who id like to meet"*/
h4{
    background-image: url("https://i0.wp.com/64.media.tumblr.com/1f3ad12dfb8cca16e68e1e7be9553b23/ca21c741efa4e4f0-25/s640x960/0d69a7e2cf5f6b69f18d7f1978d62989861fc565.gif");
    color: white;}

/*kinda just fixes up the avatar image on ur page*/
.avatar {
    width: 100%;
    margin-top: 20px;
    margin-right: 20px;
    cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym56.cur), auto !important;}

/*changes color of the blurbs(thing with ur quote, age and gender)*/
.blurbs, #top, #box, /*.box,*/ #header, #hSub{
    background: black;
    color: black;}

/*more random bullsh!t to do with the blurbs*/
td.shortRight {
    background-color: black;
    color: white;
    background-size: 100%;}
td.shortRight:hover {
    background-color: black;
    color: white;
    background-size: 100%;
    animation: blinker 2s linear infinite;}

/*changes look of the submit buttons for when u submit a comment*/
button{
  background-image: url("https://i0.wp.com/64.media.tumblr.com/1f3ad12dfb8cca16e68e1e7be9553b23/ca21c741efa4e4f0-25/s640x960/0d69a7e2cf5f6b69f18d7f1978d62989861fc565.gif");
  color: white;
  cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym56.cur), auto !important;}
input{
  background-image: url("https://i0.wp.com/64.media.tumblr.com/1f3ad12dfb8cca16e68e1e7be9553b23/ca21c741efa4e4f0-25/s640x960/0d69a7e2cf5f6b69f18d7f1978d62989861fc565.gif");
  color: white;
  cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym56.cur), auto !important;}

/*i seriously forgot what this does */
#imgPreview img {
    width: auto;
    height: auto;
    max-height: calc(100% - 10px );
    max-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 5px solid #fff0;
    cursor: zoom-out;
    background: #fff0;}

/*Add Friend/Block Buttons*/
#add {
    background-repeat: no-repeat;
    background-image: url(https://i.ibb.co/gzwdSy9/Image-869513-1.png);
    background-size: 30px;}
#sMsg {
    background-repeat: no-repeat;
    background-image: url(https://cdn.techjourney.net/2007/06/agf_purple.png);
    background-size: 30px;}
#report {
    background-repeat: no-repeat;
    background-image: url(https://cdn.discordapp.com/attachments/716339893063778375/722706355697221695/1592377015590.png);
    background-size: 30px;
    /*display: none;*/}
#block {
    background-repeat: no-repeat;
    background-image: url(https://i.ibb.co/25nw8Tj/error.png);
    background-size: 30px;
    /*display: none*/;}
div.boxInfo.box{
  background-color: black;
}
div.box.blog{background-color: black;}
div.blogs {color:white;}
div.topRight {
    background-color: black;
    text-align: center;}
div.url.box{background-image: url("https://s3.amazonaws.com/image.blingee.com/images12/content/output/2007/6/25/215032681_7ba68198.gif?4")}

/*changes the image above the audio*/
.player::before {
    content: "";
    color: #000000;
    background-image: url("https://external-preview.redd.it/TA5E-qkzqcIdYQLX7lvuuYbU0aaIA58VK3Sy2IOtrz0.jpg?auto=webp&s=de295b91cbb4d873699ba41c24cff890a78132e3");
    background-size: 100%;
    image-position: center;
    white-space: pre-wrap;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    text-align: center;
    height: 430px;
    }

/*formatting for comment imput sections*/
div.player.box{
    background-image: url("https://s3.amazonaws.com/image.blingee.com/images12/content/output/2007/6/25/215032681_7ba68198.gif?4");
    width: 88%;
  }

textarea#commentInput{
    background-image: url("https://p.favim.com/orig/2018/10/08/red-glitter-gif-Favim.com-6406274.gif");
    color: white;
    border: 2px dashed white;}
.tableLeft {
    width: 25%;
    padding: 10px;
    vertical-align: top;
    overflow: hidden;
    border: 2px dashed white;
    color: white;
    background-image: url("https://i0.wp.com/64.media.tumblr.com/1f3ad12dfb8cca16e68e1e7be9553b23/ca21c741efa4e4f0-25/s640x960/0d69a7e2cf5f6b69f18d7f1978d62989861fc565.gif"); }
.tableRight {
    width: 75%;
    padding: 10px;
    vertical-align: top;
    border: 2px dashed white;
    color: white;
    background-image: url("https://64.media.tumblr.com/e60bdc0da23dc7f9bd1b1a6990372fa4/tumblr_ogecdxyARX1vsjcxvo1_640.gifv");
    overflow-wrap: anywhere;}
.rightHead, .boxHead {
    background-image: url("https://s3.amazonaws.com/image.blingee.com/images12/content/output/2007/6/25/215032681_7ba68198.gif?4");
    background-color: #000000;
    color: white;
    font-weight: none;}

/*Sets the top fwiend profile pics to a standard size*/
.fwiendFace img {
    width: calc( 100% );
    height: 135px;
    object-fit: cover;}
/*animates the profile images when cursor hovers over them*/
.fwiendFace img:hover{
  animation: fwiendbounce 1s;
  animation-iteration-count: 1;
}

/*makes images wiggle*/
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;
  /* When the animation is finished, start again */
  animation-iteration-count: infinite;}

/*crediting myself again just in case someone tries to plagiarize this code: THIS WAS MADE BY PANNACOTTAFUGO ON MYSPACE MY URL IS https://myspace.windows93.net/?id=27579 GO FRIEND ME INSTEAD OF THIS CSS THIEF*/
/*An ungodly amount of keyframes for an ungodly amount of animations*/
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  @keyframes bounce {
      50% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }

@keyframes fwiendbounce {
      0%   { transform: scale(1,1)      translateY(0); }
      10%  { transform: scale(1.1,.9)   translateY(0); }
      30%  { transform: scale(.9,1.1)   translateY(-100px); }
      50%  { transform: scale(1.05,.95) translateY(0); }
      57%  { transform: scale(1,1)      translateY(-7px); }
      64%  { transform: scale(1,1)      translateY(0); }
      100% { transform: scale(1,1)      translateY(0); }
    }

@keyframes blinker {
      20% {color: magenta;}
      40% {color: yellow;}
      60% {color: lime;}
      80% {color: cyan;}
      100% {color: #8800f0;}
    }
@keyframes lemonblink{
      0% {color: yellow;}
      50% {color: red;}
}
/*
written by pannacottafugo
https://myspace.windows93.net/?id=27579
*/