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


.sky	{font-family:Ubuntu, Consolas; background-image:url("/images/assets/sky.png");
}

@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:black; text-decoration:none;}
a.hidden:visited {color:black; text-decoration:none;}
a.hidden:hover {color:black; text-decoration:none;}
a.hidden:active {color:black; text-decoration:none;}*/

/* sky theme ends, paracosmic theme begins */

.blackbg {background-color:black; font-family:courier;
}

.img {
  margin:2em;
}

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


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

.window-head {
  background:#827abc;
  background-image:linear-gradient(#7444da 60%, #8a4fc0);
  border:5px outset #f8e0f9;}
  
  .tab-title {
  display:inline-block;
  background:#787fff;
  background-image:linear-gradient(#787fff 60%, #a378ff);
  padding:0.2em 1em;
  box-shadow: 14px 0 6px 0 rgba(60,60,180,0.43);
-webkit-box-shadow: 14px 0 6px 0 rgba(60,60,180,0.43);
-moz-box-shadow: 14px 0 6px 0 rgba(60,60,180,0.43);
}

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

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

.main {
  max-width:50vw;
  border:4px solid #0200d8;
}

.shadow {
  box-shadow: 1px 17px 23px 0 rgba(0,18,147,0.5);
-webkit-box-shadow: 1px 17px 23px 0 rgba(0,18,147,0.5);
-moz-box-shadow: 1px 17px 23px 0 rgba(0,18,147,0.5);
}

.topnav {
  margin:auto auto 2em auto;
  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.3em;
    box-shadow: 1px 17px 23px 0 rgba(172, 92, 255,0.5);
-webkit-box-shadow: 1px 17px 23px 0 rgba(172, 92, 255,0.5);
-moz-box-shadow: 1px 17px 23px 0 rgba(172, 92, 255,0.5);
}

.topnav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:0.5em;
  list-style-type: none;
}

.topnav li {
  float:left;
}

.topnav li a {
  display: inline-block;
  background:#f8e0f9;
  background-image:linear-gradient(#f8e0f9 70%, #cfccff);
  text-align: center;
  padding: 0.2em 1em;
  text-decoration: none;
  color:#bb005c;
  border:3px solid #0200d8;
  font-size:30px;
}

.topnav li a:hover {
    background:#787fff;
  background-image:linear-gradient(#787fff 70%, #9f78ff);
}

.active {
  background-color: red;
}

@media all and (max-width: 500px) {
  .banners {
    display:none;
  }
  
  .main {
    max-width:90vw;
  }
  
  .tab-title {
    display:block;
    max-width:70%;
      box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
  }
  #dots {
    display:none;
  }
  #sitebutton {
    width:100px;}
}