/* ew, don't look! */
 :root {
     --pink: #FFA0FB;
     --blue: #95E0FF;
     --dkblue: #49CAFF;
     --purp: #C794FF;
     --yell: #FFEDA1;
}
 @font-face {
     font-family: 'Cyberpunk';
     src: url('https://ladytron.neocities.org/fonts/CyberpunkWaifus.ttf') format('truetype');
}
 @font-face {
     font-family: 'Barbie';
     src: url('https://ladytron.neocities.org/fonts/barbie.ttf') format('truetype');
}
 html, body {
     height: 100%;
     width: 100%;
}
 body {
     font-family: 'Cyberpunk', monospace;
     margin: 0;
     background-color: #fff;
     color: #444;
     background-image: url(https://ladytron.neocities.org/img/bg/dot_pastel.png);
     background-attachment: fixed;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     line-height:1.3em;
}
 * {
     box-sizing: border-box;
}
 #container {
     max-width: 740px;
    /* this is the width of your layout! */
    /* if you change the above value, scroll to the bottom and change the media query according to the comment! */
     margin: 0 auto;
     border: 1px solid var(--pink);
}
/* the area below is for all links on your page EXCEPT for the navigation */
 #container a {
     color: var(--dkblue);
     text-decoration:none;
}
 #header {
     width: 100%;
}

.links {
  margin:auto;
  border-bottom:0px;
}

/* navigation section!! */
 #nav {
     background-color: white;
     width: 100%;
     border-bottom: 1px solid var(--pink);
     padding: 5px;
     height: auto;
     color: var(--purp);
     padding-top: 10px;
     margin:0;
}
/* navigation links*/
 #nav li a {
     color: var(--dkblue);
     text-decoration: none;
}
 #nav li a:hover {
     color: var(--dkblue);
     text-decoration: none;
     cursor: pointer;
}
 #nav li a:visited {
     color: var(--blue);
     text-decoration: none;
}
 #flex {
     display: flex;
}
/* this colors BOTH sidebars if you want to style them separately, create styles for #leftSidebar and #rightSidebar */
 aside {
     background-color: white;
     width: 200px;
     padding: 0;
     border-right: 1px solid var(--pink);
}

 main {
     background-color: white;
     flex: 1;
     padding: 5px 20px;
     order: 2;
     overflow-x:hidden;
}

 #leftSidebar {
     order: 1;
}
 #footer {
     background-color: white;
     width: 100%;
     border-top: 1px solid var(--pink);
     padding: 5px;
     height: auto;
     text-align: center;
 }

 h1 {
     font-family: "Barbie", sans-serif;
     font-size: 100px;
     margin:60px auto 0;
     letter-spacing: 1px;
     text-shadow: -1px 0 #444, 0 1px #444, 1px 0 #444, 0 -1px #444;
     text-align: center;
     padding:0;
     font-weight: bold;
}

h2 {
     text-align: center;
     color: var(--purp);
     font-family: ms gothic, monospace;
     padding:0;
     font-weight:normal;
}
h3, h4 {
   font-family: ms gothic, monospace;
     padding:0;
     font-weight:normal;
     text-align: left;
     color: var(--pink);
}
 em {
     color: var(--purp);
}
/* CSS for extras */
 #top {
     width: 100%;
     height: 40px;
     padding-top: 10px;
}

.center {
  margin-left:auto;
  margin-right:auto;
}

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "★";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--purp); /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.4em; /* Also needed for space (tweak if needed) */
  margin-left: -2em; /* Also needed for space (tweak if needed) */
}

.up {
  margin:0px;
  border-bottom:1px solid var(--pink);
  padding:10px 20px;
  width:auto;
}

.current {
  margin:0px;
  border-bottom:1px solid var(--pink);
  padding:10px 20px;
  height:250px;
  width:auto;
  overflow-y:auto;
}

.joined {
  margin:0px;
  padding:10px 20px;
  height:auto;
  width:auto;
  overflow:hidden;
}

.tr {
  width: 100%;
  max-height: 150px;
  display: flex;
  margin: 20px auto;
}
.td {
  border: 1px solid var(--pink);
  background-color: white;
}
 .td img {
    width: 150px;
    height: 100%;
  }
  
  .td p {
    font-size:16px;
    color:#444;
    line-height:1.2em;
  }
  .center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .td h3 {
    padding: 0;
    margin: 0;
  }
  
hr {
  border: 0;
  border-top: 1px dotted var(--purp);
  padding-bottom: 15px;
}

.gallery img {
  border: 1px solid var(--pink); 
  padding: 0px; 
  margin: 5px;
  height: 200px;
}

#statuscafe {
    padding: .5em;
    border: 1px dashed var(--purp);
    margin:auto;
    font-size: 14px;
    line-height:1.2;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0;
}