/*||SPACE THEME||*/
/* Updated to neocities 2022-12-15 */
html{
	background-color: #201F44;
  background-image: linear-gradient(rgba(78, 73, 146, 0.65), rgba(25, 27, 73, 0.65), rgba(87, 45, 100, 0.65), rgba(80, 134, 134, 0.65)), url(/images/Pasted_image_20230903155648.png);
  /* background-color: #141330; */ 
  background-attachment: fixed;
}

#header{
  max-width: 100%;
  padding: 10px;
  margin: 10px; 
	color: #73b7bf;
	text-align: center;
	/*background-color: #201F44;*/
	background-image: url(/images/Pasted_image_20230903155648.png);
	/* this is only for a background image! if you want to put images IN the header, you can add them directly to the <div id="header"></div> element! */
	background-size: 100%;
 /* font-family: candara;*/
	border-radius: 7px;
	border-style: solid;
  border-width: 1px;
	border-color: #ac30a5; /*#51507a; */
}

.container[

]
nav{
  /*display: flex;*/
  flex-wrap: wrap;
  padding: 10px;
  margin: 10px; 
	font-size:16px;
	background-color: #13092D;
	/* this centers the entire page */
	color: #b0afc7;  /*#51507a #342f2c #564740*/
	box-shadow: 0px 2px 4px #111324;
  border-radius: 7px;
	border-style: solid;
  border-width: 1px;
	border-color: #ac30a5; /*#51507a; */
/*float: left; */
content: center;}

#float{
  float: right;
}
#stacked {
  display: flex;
}

/*nav{
	display:grid; 
	grid-auto-flow:column;
	grid-gap:3px;
	width:100%;
}
nav a, .button{
	border-radius: 7px;
	color: #73b7bf;*/
/*background-color: #8c71cf; #4f4f9c; #73b7bf;*/
/*text-decoration:underline;
	text-align:center;
	padding:10px;
}

nav a:hover, .button:hover{*/
	/*color: #73b7bf;*/
	/*text-decoration:none;
  */
 
body{
  /*display: flex;*/
  image-rendering: high-quality, crisp-edges;
  padding: 10px;
  margin: 10px; 
  font-weight:normal;
  color: #8c8bee; /* #51507a #342f2c #564740*/
    font-size:16px;
    line-height:120%; 
    line-height: 23px;
    word-spacing: 4px;
    font-family: 'candara', sans-serif, monospace, arial; /*Alef, Montserrat, Libre Baskerville, consolas; ms gothic;*/
    box-shadow: 0px 2px 4px #111324;
    border-radius: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #ac30a5; /*#51507a; */
    background-color: #13092D; /*#141330; #13092D #22214a #b0afc7 #d8f2c7 #61a097 #6caca2*/
	/*  background-color: #141330, opacity: .5;*/
	/*order: 2;*/
	/* this centers the entire page */
 /*float: center;/*
  width: max;
  position: relative;
*/
text-rendering: optimizeLegibility;
}

.flex {
	display: flex;
	justify-content: center;
}

.auto {
  image-rendering: auto;
}

.pixelated {
  image-rendering: pixelated;
}

.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
 /*||Main Content Area Color||*/

.nospace{
  box-shadow: 0px 2px 4px #111324;
  border-color: #ac30a5; /*#51507a; */
  background-color: #141330; /* #13092D #22214a #b0afc7 #d8f2c7 #61a097 #6caca2*/
}

.column, .column-row {
	display: flex;
	flex-flow: column wrap;
}

.row {
	display: flex;
	flex-flow: row wrap;
}

.gutters {
	column-gap: 2vw;
	row-gap: 3vh;
}

.col {flex: 1 1 0;}

.col-3 {flex: 0 0 25%;}

.col-4 {flex: 0 0 33.33%;}

.col-6 {flex: 0 0 50%;}

.col-7 {flex: 0 0 58%;}

.col-12 {flex: 0 0 100%;}

.main{
  display: flex;
  flex-wrap: wrap;
  flex-flow: column wrap;
  flex-flow: row wrap;
display: grid;
grid-template-columns: 20% 80%;
/*column-gap: 3px;
row-gap: 3px;*/
/* padding: 10px;
  margin: 10px; 
  border-radius: 7px;
	border-style: solid;
  border-width: 1px;
	border-color: #ac30a5; */ /*#51507a; */
/*flex: auto-overflow;*/
}

#text-box{
  padding: 10px;
  margin: 10px;
}

#main2{
  display: flex;
  flex-wrap: wrap;
  display: grid;
grid-template-columns: 20% 30% 30% 20%;
column-gap: 3px;
row-gap: 3px;
}

#content{
  /*flex-wrap: wrap;*/
  border-radius: 7px;
	border-style: solid; 
  border-width: 1px;
	/*border-color: #ac30a5; #51507a; */
  padding: 10px;
  margin: 10px;
	/* this centers the entire page */
}

#content2{
  float: right;
  border-radius: 7px;
	border-style: solid; 
  border-width: 1px;
  padding: 10px;
  margin: 10px;
  flex-wrap: wrap;
}
.contain {
margin: 0 auto;
}

.box{

 }
 .rainbowtext {
  background-image: linear-gradient(to right, #e91e63, #ffc107, #0ebdab, #8052d1, #ee2f6f);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;}
/*||Headers||*/
/*
header{
  font-family: ; Montserrat;
  padding-top:4px;
  border-width:8 8 8px 8;
  border-style: solid;
  border-color: #51507a;
  text-align: center;
  font-weight: medium;
}
*/
h1{font-size:30px;
  color: #31d0ec;
  text-align: center;
}

h2{font-size:24px;
  text-align: center;
  color: #316cec;
}

h3{font-size:20px;
  text-align: center;
  color: #a131ec;
}

h4{font-size:15px;
  text-align: center;
  color: #e631ec;
}

h5{font-size:15px;
  text-align: center;
  color: #ec319e;
}

h6{font-size:15px;
  text-align: center;
  color: #ec315a;
}

hr{
  color: #51507a; /*#342f2c #47413e #564740*/
  border-style: solid;
  border-width: 1.5px;
  border-color: #805c9c;
  max-width: 100%;
  text-align: center;
}

bold{
  font-weight: 800;
  color: #54b38e;
}

subtitle{
  color: #f063b0;
  text-align: center;
  font-size: 14px;
  font-family: candara;/*'Old Standard TT', serif;*/
  font-style: italic;
  font-weight:2px;
} /* custom class for quotes at top of pages */

/*||Lists||*/


ul li{
  list-style-type: disc; margin-bottom: 0px; margin-top: 0px; padding: 0px;}

/* 
li:before{
list-style-position: outside;
display: block;
display: list-item;
}
*/

/*||Links||*/

a:link, a:active{
  color: #d96899;
  text-decoration: none;
  padding:2px;
}
/*
a:link, .button{
	border-radius: 5px;
	color: #73b7bf;
	background-color: #36216b; /* #4f4f9c; #73b7bf;*/
/*	
  text-decoration:underline;
	text-align:center;
	padding:3px;
}
*/
a:visited{
  color: #d96899;
  text-decoration:none
}

a:hover{
  color: #7dc4da; /* #371c68;*/
  text-decoration:star;
  box-shadow: 0px 0px 2px 0px; 
  border-width: thin;
}
 a:hover, a.button{
    border-radius: 5px;
    color: #73b7bf, /*#0e0f6e;*/
    /*background-color: #5b6899; #4f4f9c; #73b7bf;*/
    /*padding:2px;*/
    /*background-image: linear-gradient(to right, #e01d78, #45dfc5, #7f47e0);*/
    /*background-image: linear-gradient(to right, #e91e63, #ffc107, #0ebdab, #8052d1, #ee2f6f);*/
    /*box-shadow: 2px;*/
}
/*.container{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio 
}*/
iframe{
  height: 100%;
  width: 100%;
  box-shadow: 0px 2px 4px #5c6299;
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: #ac30a5; /*#51507a; */
  background-color: #141330; /* #13092D #22214a #b0afc7 #d8f2c7 #61a097 #6caca2*/}

.figure{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  border: thin #51507a solid;
  border-radius: 10px;
  margin: 4px;
  }

.figure img{
  box-shadow: 0px 2px 2px 0px; 
	border-radius: 10px;
  width: 100px;
  height: 100px; 
  object-fit: cover;
  border: 2px solid rgb(55, 99, 46);
  /*background: rgb(84, 23, 112);*/
  margin: 2px;
  }
.figure img:hover {
  object-fit: contain;}

  .cropped-ofp {
    width: 100px; 
    height: 100px; 
    object-fit: cover;
    object-position: 25% 25%; 
    }

  /* Future Chron, please don't change these again, they are doing their job just fine, thanks.*/

.figcaption{
 /* background-color: ;*/
 /* padding:1em 0 0 0;*/
  text-align:center;
  display: flex;
  }

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

.port{
  max-width:100%;
  }

.row{
display:flex;
row-gap: 3px;
flex-wrap: wrap;
}

.col{
flex: 0 0 calc(15%);
/*margin: 4px;*/
}

.gallery{
  display: flex;
  /*display: grid;
  row-gap: 3px;
  column-gap: 3px;*/
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  border: thin  solid;
  border-radius: 7px;
	border-style: solid; 
  border-width: 1px;
	/*border-color: #ac30a5; #51507a; */
  padding: 10px;
  margin: 10px; 
  border-radius: 10px; }

  .gallery img {
    /* The width and height here obviously change the shape of the image. I'm not sure if I like it as much as viewing them all in their respective shapes?*/
    box-shadow: 0px 2px 2px 0px; 
    border-radius: 10px;
    width: auto;
    height: 200px; 
    object-fit: cover;
    border: 2px solid rgb(55, 99, 46);
    /*background: rgb(84, 23, 112);*/
    margin: 2px;
    /*object-fit: contain;*/
  }
  .gallery img:hover{
  object-fit: contain;}

  .gallery figure{
		display: flex; /*adding this allowed that blasted button to cover the entire image background, not just the bottom. Huzzah! My galleries and figure's for character profiles are now visually unified and I am pleased.*/
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-end;
		border: thin #51507a solid;
		border-radius: 10px;
		margin: 4px;
		}

    .gallery .art {
      display: flex;
      /*float: left;*/
      /*padding: 4px 3px 4px 3px;*/
      /*margin:1%;*/
      color: black;
    }
/*
retiring this code because I prefer the square grid over the cluttered multi-sized grid. It doesn't allow the eyes to travel as easily and find a desireable image.
  .gallery.columns {
    display: block;
    column-count: 4;
  }    
/*

/* I had thought about using this code, but ended up combining it with my own. So I'll let it sit here, I might find a use for it somewhere else.*/

/*
.gallery2 {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;}
  .gallery2 .art {
    display: flex;
    float: left;
    padding: 4px 3px 4px 3px;
    margin:1%;
    color: black;
  }
.gallery2 .img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgb(55, 99, 46);
  background: rgb(84, 23, 112);
  margin: 2px;}
  
.gallery2 img:hover {
  object-fit: contain;}

  .gallery2.columns {
    display: block;
    column-count: 3;}
*/
  .footer{
	text-align: center;
	/*background-color: #13092D;*/
	padding: 10px;
	font-size: 14px;
  background-color: #13092D;
	max-width: 100%; 
	/* this centers the entire page */
	color: #b0afc7;  /*#51507a #342f2c #564740*/
	box-shadow: 0px 2px 4px #111324;
	padding: 20px;
	border-radius: 7px;
	border-style: solid;
	margin: 10px;
  border-width: 1px;
	border-color: #ac30a5; /*#51507a; */
}

/*||Tilt and Slant Images and Text||*/

.slanted{
  font-size: 30px;
  text-transform: uppercase;
  display:block;
  -webkit-transform: rotate(-20deg); 
  -moz-transform: rotate(-90deg); 
  /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); For IE support*/
  /*background-color: #000*/;
}

/*||Collapsibles||*/

collapsible{
  background-color: transparent;
  cursor: pointer;
  color: #cc003d;
  margin-top:8px;
  margin-left:8px;
  padding: 10px;
  width: 100%;
  border-width: 0 0 3px 0;
  border-style: solid;
  border-color: #47413e;
  text-align: center;
  text-indent:10px;
  font-size: 28px;
  font-family: "EB Garamond",serif;
}

.sub.collapsible{
  font-size:22px;
  font-style:italic;
}

.collapsible:hover {
  color: #3c6c72;
}

.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
}

.categ{
  text-align:left;
}

.collapsible:after {
  content: "â–¸";
  font-style:normal;
  float: right;
  margin-left: 5px;
  margin-top:4px;
}

.active:after {
  content:"â–¾";
}

/*Custom Scroll bar! */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #6e227e;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #8c4899;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #4b56b9;
}
@media only screen and (max-width: 800px){
  img{
     max-width:100%;  }}
    
  @media only screen and (max-width: 800px) {
    iframe{
     min-width:100%;
    }
  
  @media only screen and (max-width: 800px) {
   .tout {
    max-width:100%;
   }
  }
  
  @media only screen and (max-width: 600px) {
     .flex {
    display:block;
    flex-direction: column;
   }
   
     .unit {
    max-width: 100%
     }
     aside {
    width: 100%;
   }
     .navlink {
    text-align: center;
    margin-left: 0px;
    width: 100%;
    padding: 10px 0px 10px 0px;
   }
   /*
   .navlink:hover {
    margin-left: 0px;
    */
  }
  
  }
  .gallery{
    columns: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }
  .gallery.columns {
    display: block;
    column-count: 3;
  }
  .gallery .art {
    display: block;
    float: left;
    padding: 4px 3px 4px 3px;
    margin:1%;
    color: black;
  }
  .work {
  max-height: 100%;
  max-width: 100%;
  }
  @media only screen and (max-width: 800px) {
     .gallery.columns {
    column-count: 2;
   }
  }
  @media only screen and (max-width: 800px) {
     .gallery.columns {
    column-count: 1;
   }
  }
  
  .note {
    background-color:#f1d773;
    width:70%;
    transform:rotate(-2deg);
    padding: 15px;
    margin: 0 auto;
    box-shadow: 0px 3px 6px grey;
  }
  
  .halfd {
    width: 40%;
    float: left;
  }
  
  .halfg {
    width: 60%;
    float: left;
  }
  
  .halfd2 {
    width: 30%;
    float: left;
  }
  
  .halfg2 {
    width: 70%;
    float: left;
  }
  
  @media screen and (min-width: 1000px){
    body{
      width: 1300px;
      /*padding: 35 35px 35px 35px;*/
      margin:auto;
      margin-top: 15px;
      margin-bottom:15px;
    }
  }