#navigation1 {
    width: 730px;
    height: 50px;
    float: left;
    margin: 0 auto;
    line-height:20px;
    text-align:center;
}

#navigation2 {
    height: 50px;
    background: #294229;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 0px solid #444;
    margin: 0px;  border-left:0px solid #FBFEEA;
    border-top:2px solid #FBFEEA;}
      
      #navigation2 a {
    background:transparent; font:10px monospace,georgia;
    text-transform:uppercase;font-style:normal;line-height:20px;
    padding:4px; letter-spacing:3px;margin-right:10px;color:#EFD6D6;}
    
    body {
  background:#f5f5f5 url(https://64.media.tumblr.com/9a8166e8089d86eaa6c1112411c106a0/32232e3b9faa2709-bb/s2048x3072/00ce85b778b37e36b9271e2ff6406c216751c05d.pnj) repeat-x fixed;
  font-family: lato, calibri, Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-shadow: 0px 0px 1px #bbb;
  color:#777;
  letter-spacing: 1px;
  height: 750px}

                    :root {
  --main-fg-color: #F0A8D0;
  --main-fg-color-light: #F7B5CA;
  --main-bg-color: #FFFFFF;
  --text-color: #000;
  --shadow-color: #300;
}
@font-face {
    font-family:  "AstheticPixel-Regular";
    src: url(/media/AstheticPixel-Regular.otf);
}
body {
    font-family: lato, calibri, Verdana, Arial, Helvetica, sans-serif;
    font-smooth: never;
}
#background, #settingsMenu {
    background: url(/media/pink-bg.gif);
    background-size: auto 100%;
    background-repeat: repeat;
}
a  {
    color: #88F;
}
#top_banner {
    font-family: lato, calibri, Verdana, Arial, Helvetica, sans-serif;
    font-weight: bolder !important;
    background: #AAF;
    background: linear-gradient(0deg, var(--main-fg-color) 0%, var(--main-fg-color-light) 50%, var(--main-fg-color) 100%);
    width: calc(100% - 2px);
    border: solid 1px #000;
    border-color: var(--main-fg-color);
    box-shadow: 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 2px #FFF, 0 0 1px #FFF, 0 3px 4px var(--shadow-color);
    text-shadow: 1px 1px 2px #005;
    position: relative;
    z-index: 4;
}
.allMessages {
    background-color: var(--main-bg-color);
    background-size: 100px 100px;
    box-shadow: 0 0 4px #FFF, 0 0 4px #FFF, 0 0 4px #FFF, 0 0 4px #FFF, 0 0 4px #FFF, 0 3px 4px var(--shadow-color);
    border: solid 1px #000;
    border-color: var(--main-fg-color);
    border-radius: 8px;
    margin: 0 20px 0 20px;
    position: relative;
}
.allMessages:before {
  content: " ";
  height: calc(100% - 20px);
  width: 50px;
  max-height: 50px;
  background-image: url("/media/pastel-hearts.webp");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 10px;
  z-index: 1;
}
.allMessages.sent:before {
  left: 10px;
}
.allMessages.recieved:before {
  right: 10px;
  
}
.sent {
  padding-left: 50px;
}
.recieved {
  padding-right: 50px;
}
.allMessages.containsOnlyEmojis .emoji {
    height: 50px;
}
.msgWrapper:has(.pm) {
    padding-top: 26px;
}
.allMessages.pm {
    border-color: #F55;
}
.allMessages.pm:after {
    content: "Private Message";
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F55;
    color: #FFF;
    height: 16px;
    padding: 5px;
    position: absolute;
    right: 5vw;
    bottom: 100%;
    z-index: 5;
    border-radius: 5px 5px 0 0;
}
.msgWrapper + .msgWrapper {
    margin-top: 25px;
    margin-bottom: 15px;
}
.senderInfo {
  display: block;
  text-align: left;
}
.sent > .senderInfo {
  text-align: right;
}
.sent > .msgBody {
  text-align: right;
}
.msgBody, .senderInfo {
  position: relative;
  z-index: 2;
}
#timestamp {
    font-size: 8pt;
    margin-top: 10px !important;
    padding-left: 30px;
}
#input, #nameEntry {
    background-color: #FFF;
    border-radius: 0;
    border-top: 1px solid var(main-fg-color-light);
    font-family: "AstheticPixel-Regular", cursive;
}
#name {
    background-color: #FFF;
    border-radius: 0;
    border: solid 1px #000;
    border-color: var(--main-fg-color-light);
    padding: 2px;
    font-family: "AstheticPixel-Regular", cursive;
}
#settings:hover {
    filter: drop-shadow(0 0 3px #FFF) drop-shadow(0 0 3px #FFF) drop-shadow(0 0 3px #FFF);
    transform: rotate(180deg);
}
#settings {
    filter: drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
    transition: all 250ms linear;
}
#emojiTrayToggle {
    height: 15px;
    width: 15px;
    padding: 6px;
    margin-top: 3px;
    margin-left: 3px;
    background-image: url(/media/pixel-emoji.webp) !important;
    opacity: 0.5;
}
#is_typing {
    filter: drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF) drop-shadow(0 0 1px #FFF);
    background-color: #FFF;
    border: solid 1px #000;
    border-color: var(--main-fg-color-light);
    border-radius: 3px;
    left: unset;
    right: 10px;
    bottom: 27px;
    overflow: visible;
}
#is_typing:hover::after {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    content: "Someone is typing";
    font-size: 10pt;
    position: fixed;
    right: 35px;
    bottom: 0;
    width: 50vw;
    color: #000;
    z-index: 100000;
}
#is_typing > span {
    background-color: var(--main-fg-color-light);
    border-radius: 0;
    height: 2px;
    width: 2px;
}
      

#layout {
    margin: 50px auto;
    width: 750px;
    height: 50px;
}
      

      
      
#content1 {
    width: 410px;
    height: 390px;
    float: left;
    margin: 1px auto;}

#content2 {
    background:#fff url();
    border-top: 1px solid #666;
    margin: 0px;
    padding:4px;}

      
      
#leftside {
    width: 160px;
    height: 160px;
    float: left;
    margin: 1 auto;}

#left {
    background:#fff url();
    border-top: 1px solid #666;
    margin: 0px;
    margin-top:0px;
    padding:4px;
    padding-top:5px;
    border-right:1px solid #F5D0D4;
    width: 150px;}
      
      
#rightside {
    width: 160px;
    float: left;
    margin: 0 auto;}

#right {
    background:#fff url();
    border-top: 1px solid #666;
    margin: 0px;
    padding:4px;
    padding-top:5px;
    border-left:1px solid #F5D0D4;}
    
      

#footerwrap {
    width: 560px;
    float: center;
    margin: 0 auto;
    clear: both;
    line-height:10 px;
    text-align:center;}

#footer {
    height: 30px;
    background: transparent;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: 0px solid #999;border-top:0px;
    margin: 0px;font:10px calibri;
       position: fixed;
   left: 0;
   bottom: 0;}



.title {font:10px arial;text-transform:uppercase;color:#875D76;background:#F4E0EB;
      letter-spacing:2px;padding-left:4px;padding:0px;border-bottom:1px solid #fff;margin-bottom:4px;line-height:10px;}
    
.content-title {text-align:center;font:13px arial;text-transform:uppercase;color:#875D76;background:#F6D0D4;
      letter-spacing:2px;padding-left:4px;border-bottom:1px solid #fff;line-height:10px;margin-bottom:4px;}    
    
    	
        
a:link, a:visited, a:active { 
color:#444;text-decoration:none;}
      
a:hover {
color:#999;}

b {color:#D18E8C;font-weight:normal;}

      
      
 .button {
display:block;background:#f5f5f5;margin-bottom:1px;padding-left:5px;text-transform:uppercase;border-left:5px solid #F6D0D4;letter-spacing:2px;
font:9px monospace, arial;color:#333;
}
.button:hover {
display:block;background:#f5f5f5;margin-bottom:1px;padding-left:5px;text-transform:uppercase;border-left:5px solid #D18E8C;letter-spacing:2px;
font:9px monospace, arial;color:#666;
}
      
      
::-webkit-scrollbar-thumb {
background-color: #294A31;  
border-radius: 0px;
border:1px solid #ccc;
}
::-webkit-scrollbar {
width: 8px; height: 10px; 
background: transparent;
}


            #musicplayer{
                font-family:'Arial'; /* default font */
                background:white; /* background color of player */
                border:4px solid #D18E8C; /* border around player */
                width:133px; /* width of the player - make it 100% if you want it to fill your container */
                padding:10px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
            }
 
            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#e74492; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color:#f5f5f5; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }
            
            element.style {
}

  .container
    Specificity: (0,1,0)
 {
    display: flex;
    justify-content: center;
}

            #musicplayer{
                font-family:'Arial'; /* default font */
                background:white; /* background color of player */
                border:1px solid #D18E8C; /* border around player */
                width:125px; /* width of the player - make it 100% if you want it to fill your container */
                padding:10px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
            }
 
            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#e74492; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color:#f5f5f5; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:5px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:5px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }