/* 
Character Sheeet CSS by ST4REYE. 
Started on December 21, 2019.
WIP til hell freezes over, baby!

"CHARS" theme goals:
   custom bg
   custom borders?
   immediate goal: responsive character info page
   portrait icons (plus a space to add pixels later maybe)
    text space for name/pronouns
    boxes rearrange (but dont stretch if possible?) upon window resize
     (when screen is less than xxx px wide, width changes to 100%)
    make a variant of this thats a base for detailed character pages

dark box clr: #0e0b20
lght box clr: #2d255b
text color (base): #A693DE
kaja text color: #60CAEE
*/

body {
  font-family: courier;
  font-weight: 900;
  padding: 20px;
  background-image: url("/assets/bgstar.gif"); /* interchangeable background. */
  background-repeat: repeat;
  color: #2D224D;
}

.header {
  padding: 5px;
  margin: auto;
  font-size: 15px;
  text-align: center;
  background: #93AADE;
  width: 500px;
  border-radius: 10px;
  color: #a693de;
}

/* COLUMNS */
.column1 {   
  float: left;
  width: 200px;
}
.column2 {
  float: left;
  width: 200px;
  padding-left: 10px;
}
.column3 {
  float: left;
  width: 200px;
  padding-left: 10px;
}
.column4 {
  float: left;
  width: 200px;
  padding-left: 10px;
}

/* Character Portraits */
.icon {
  background-color: rgba(33,33,60,0.5);
  height: 146px;
  width: 146px;
  border: 2px double #000;
  border-radius: 5px;
  margin-bottom: 5px;
}

/* Add a card effect for articles */
.card {
   background-color: #93AADE;
   padding: 15px;
   margin-top: 20px;
   border: 4px double #21213C; 
   border-radius: 5px;
   max-height: 230px;
   text-align: center;
   word-wrap: break-word;
   /*color: #93C9DE;
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;*/
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.wrapper {
  width: 900px;
  margin: auto;
}

/* Footer */
.footer {
  margin: auto;
  padding: 10px;
  width: 500px;
  text-align: center;
  background: #000;
  border: 4px double #93AADE;
  border-radius: 5px;
  margin-top: 20px;
  color: #93C9DE;
}

.pixel {
  float: right;
  -moz-transform: translate(15px, -37px);
  -webkit-transform: translate(15px, -37px);
  -o-transform: translate(15px, -37px);
  -ms-transform: translate(15px, -37px);
  transform: translate(15px, -37px);
}

/* Responsive layout - *should* make columns stack instead of hang off smaller pages 
@media screen and (max-width: 550px) {
  .column1 .column2, .column3 .column4 {   
    width: 100%;
    padding: 15px;
}
  
@media screen and (max-width: 300px) {
  .column1, .column2, .column3, .column4 {   
    width: 100%;
    padding: 15px;
}*/


/* navigation pane (floats at bottom, responsive)
.navi {
  padding: 30px;
  font-size: 15px;
  text-align: center;
  background: black;
  color: cyan;
}*/

/* trim any unneeded stuff under this comment later! [12/21]  */

#cloudborder {
  margin: auto;
  border: 14px solid transparent;
  width: 450px;
  height: auto;
  left: 50%;
  border-image: url(/sandbox/cloudborder.png) 108 stretch;
  background-image: radial-gradient(rgba(14,11,32,0.8) 100%,rgba(45,37,91,0.8) 60%);
  border-radius: 80px;
}

#cloudspeek {
  font-family: "courier";
  font-size: 16px;
  color: #a693de;
  text-align: center;
}

#narration {
  font-family: "courier";
  font-size: 16px;
  border: 24px solid transparent;
  padding: 15px;
  border-image: url(/assets/sparkleline.gif) 24 round;
  text-align: center;
  width: 500px;
  margin: auto;
  background-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0.7) 90%);
  color: #a693de;
}

#kajournal {
  font-family: "courier";
  font-size: 16px;
  border: 24px solid transparent;
  padding: 15px;
  text-align: center;
  width: 500px;
  margin: auto;
  font-variant: small-caps;
  background-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0.9) 90%);
  text-shadow: 2px 2px 5px #60CAEE;
  color: #60CAEE;
  animation-name: glowtext;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}