/* 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." */


@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");
}

.fe2 {
  font-family:FE2, Serif!important;
}

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

a:link {color:#313197;}
a:visited {color:#bb005c;}
a:hover {color:#4c3ac4;}
a:active {color:#bb005c;}

a.fun:link {color:#bb005c; text-decoration:none;}
a.fun:visited {color:#bb005c; text-decoration:none;}
a.fun:hover {color:#bb005c; text-decoration:underline;}
a.fun: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;}

.profile {
  display:block;
}

.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;
	width:99%;
	border:2px dotted cyan;
	margin:auto;
}

.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 {
}

#me {
  float:left;max-width:35%;border-right:2px dashed blue;margin-right:1em;padding-right:1em;padding-bottom:1em;text-align:center;
}
  .profile {
width:100%;margin-bottom:1em; box-sizing:border-box;
 }
  
.profileMobile {
   display:none;
}

/*For anything on the side columns*/

.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;
}

.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;
}


/*stuff for smaller divs in middle row*/



#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;
}


  

/*old media queries to make it readable on mobile*/
@media all and (max-width: 800px) {
  .banners {
    display:none;
  }
  
  .main {
    max-width:90vw;
  }
  
  .tab-title {
    display:block;
      box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
  }
  #dots {
    display:none;
  }
  #sitebutton {
    width:100px;
  }
  
  #me {
    float:none;
    max-width:100%;
    border-right:none;
    border-bottom:2px dashed blue;
    padding-bottom:0;
    /*overflow:hidden;*/
    display:flex;
    align-content:center;
    justify-content:center;
    
  }
 .profile {
    /*float:left;*/
    max-width:50%;
    /*padding-top:1em;*/
  }
  
  #maintxt {
    padding-top:0;
  }
  
 #about {
    /*float:right;*/
    max-width:50%;
  }
  
}

@media all and (max-width: 500px) {
  .kosmic{
    padding:0.5em;
  }
  
   #me {
    float:none;
    max-width:100%;
    border-right:none;
    border-bottom:2px dashed blue;
    padding-bottom:0;
    /*overflow:hidden;*/
    display:block;
    
  }
 .profile {
   display:none;
  }
  
  .profileMobile {
   display:block;
   float:left;
   width:50%;
   margin:0;
  }
  
  #maintxt {
    padding-top:0;
  }
  
 #about {
    max-width:100%;
    margin-right:0;
    padding:0;
  }
  
}