/* 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;
}


@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:#46afe6; text-decoration:none;}
.main-nav a:visited {color:#46afe6; text-decoration:none;}
.main-nav a:hover {color:cyan; text-decoration:underline;font-style:italic}
.main-nav a:active {color:#46afe6; text-decoration:none;}

.collage { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:54vw; /* this can be modified to make the gallery wider */
  margin:auto;
  margin-top:1em;
  justify-content:center;
  background:rgba(0,0,255,0.5);
  border:2px dotted magenta;
  column-gap:0.5em;
  padding:0.5em;
}

.collage img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.collage > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
 /* margin-right:10px;  this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.collage img:hover {
  transform:scale(2); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}






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

.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:10vw;
	border:2px dotted cyan;
	margin:auto;
}

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

.column div {
  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:#46afe6;
  border:2px dotted magenta;
  border-radius:3px;
}

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