/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  font-family:Ubuntu, Consolas;
  background-image:url(/images/assets/space.gif);
  color:#bb005c;
}


.decor {
  padding:0.5em 0;
}

.decor img{
  width:100px;
}

@font-face {
    font-family: Ubuntu;
    src: url("fonts/Ubuntu.woff") format("woff");
}

@font-face {
    font-family: FE2;
    src: url("fonts/Russell_Square.woff") format("woff");
}

a.hidden:link {color:#bb005c; text-decoration:none;}
a.hidden:visited {color:#bb005c; text-decoration:none;}
a.hidden:hover {color:#bb005c; text-decoration:underline;}
a.hidden:active {color:#bb005c; text-decoration:none;}

.main-nav a:link {color:#6ca6f7; text-decoration:none;}
.main-nav a:visited {color:#6ca6f7; text-decoration:none;}
.main-nav a:hover {color:cyan; text-decoration:underline;font-style:italic}
.main-nav a:active {color:#6ca6f7; text-decoration:none;}

.column {
  padding-top:3em;
}

.img {
  margin:2em;
}

.flex {
  display:flex;
  justify-content:center;
  column-gap:2em;
  align-items:flex-start;
}

.flex2 {
  display:flex;
  justify-content:space-between;
  
}


.img .left {
  margin:0 2em 1em 0;
}
  
.kosmic, .kosmic2 {
  background:#f8e0f9;
  background-image:linear-gradient(#f8e0f9 70%, #cfccff);
  border:5px outset #f8e0f9;
  max-width:55vw;
  overflow:hidden;
}

.kosmic {  padding:0 1em;}

.window-head {
  background:#787fff;
  background-image:linear-gradient(#787fff 60%, #a378ff);
  border:5px outset #f8e0f9;}
  
  .tab-title {
  display:inline-block;
  padding-left:1em;
}

h1 {
  color:#bb005c;
  font-size:18px;
}

.inv {
  background:#bb005c;
  color:#787fff;
}

.outline {
  max-width:55vw;
  border:2px solid blue;
}

.banner{
  display:block;
  transform-origin: center center;
	transform: scale(1);
	transition: transform 180ms ease;
	border:2px dotted cyan;
	margin:auto;
  width:99%;
}

.banner:hover {
  transform:scale(1.02);
  filter:brightness(1.2);
}

.shadow {
  box-shadow: 0 0 10px 0 rgba(0,0,255,0.8);
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,255,0.8);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,255,0.8);
}

.topnav{
  width:100vw;
}

.topnav ul{
  background: rgba(111, 0, 213,0.5);
  background-image:linear-gradient(45deg, rgba(230, 0, 115,0.5) ,rgba(172, 92, 255,0.5), rgba(230, 0, 115,0.5));
  padding:0.5em;
  border:2px dashed #787fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  list-style-type: none;
  
}

.topnav li {
  float:left;
}

.topnav li a {
  display: inline-block;
  text-align: center;
  padding: 0.2em 1em;
  text-decoration: none;
  color:#f8e0f9;
  
  transform-origin: center center;
	transform: scale(1);
	transition: transform 180ms ease;
}

.topnav li a:hover {
  transform:scale(1.2);
  filter:brightness(1.2);
}

.active {
}

.chat {
  display:inline;
  background:white;
  border:3px solid grey;
  color:black;
  padding:0.3em;
  border-radius:5px;
  white-space:nowrap;
}

.column div, .banner {
  margin-bottom:1em;
}

.main-nav ul{
  padding-top:0;
  padding:0.5em;
  list-style:none;
  margin:0;
}

.to-do-list ul{
  padding-top:0;
  padding:0.5em;
  padding-left:1em;
  list-style:"✦ ";
  margin:0;
}

.avatar{
  float:right;
  
}

.avatar img{
  height:240px;
  width:auto;
}

.side-bar {
  width:10vw;
  max-width:12em;
  padding:1em;
}
.pink{ 
  background:rgba(128, 0, 70,0.8);
  color:#6ca6f7;
  border:2px dotted magenta;
  border-radius:3px;
}

.cyan{ 
  background:rgba(0, 41, 65,0.8);
  color:#6ca6f7;
  border:2px dotted orange;
  border-radius:3px;
}

#new-art-container{
  width:60%;
}

#new-art{
  display:block;
  margin:auto;
  width:300px;
  height:200px;
  margin-top:1em;
  border:2px dotted blue;
}

#new-art img{
  object-fit:cover;
  width:100%;
  height:100%;
}

.stamps1 #long-button {
  width:100%;
  height:auto;
}

.stamps1 {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  max-width:40%;
  align-items:flex-start;
}

.stamps1 img{
  width:112px;
}

#change-log {
  overflow:auto;
  max-height:20em;
  margin:auto;
}


#change-log table, th, td {
  background:#16161d;
  color:#6ca6f7;
  border:2px dotted magenta;
  padding:0.5em 1em;
  border-collapse:collapse;
}