/*********************
##ROOT VARIABLES
*********************/

/* Root for ALL rems*/
html { font-size: 16px; }

:root {

  --pure-white:#fff; /*white*/
  --lite-grey:#a7a8aa; /*quick-silver*/
  --pure-black:#000; /*black*/
  --osc-peach:#f5c89b; /*peach-crayola*/
  --osc-pink:#f64786; /*french-rose*/
  --osc-red:#fb0b3b; /*red-munsell*/
  --osc-yellow:#f99514; /*yellow-orange-color-wheel*/
  --osc-blue:#0b4d60; /*midnight-green-eagle-green*/
  --osc-black:#07080C; /*rich-black-fogra*/

  --gigantic-texts:3.5rem;
  --huge-texts:2.125rem;
  --large-texts:1.875rem;
  --medium-texts:1.5rem;
  --small-texts:1rem;
  --flat-text:.75rem;

  --roxy-gataud:'bely-display', 'Helvetica', sans-serif;
}

/* medium+ root variables */
@media screen and (min-width: 40em) {
  :root {
    --gigantic-texts:7.5rem;
    --huge-texts:5.125rem;
    --large-texts:3.75rem;
    --medium-texts:2.25rem;
    --small-texts:1.25rem;
    --flat-text:.75rem;
}} 

/* large+ root variables */
@media screen and (min-width: 64em) {
  :root { --gigantic-texts:11.5rem; }} 


  
/*********************
##FONT SIZING
*********************/

/*** Base font sizes ***/
h1,.h1{font-size:1.5rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}
h2,.h2{font-size:1.25rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}
h3,.h3{font-size:1.1875rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}
h4,.h4{font-size:1.125rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}
h5,.h5{font-size:1.0625rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}
h6,.h6{font-size:1rem;line-height:1.4;margin-top:0;margin-bottom:.5rem}

/*** Base font sizes: medium and up ***/
@media print,screen and (min-width:40em){
  h1,.h1{font-size:3rem} h2,.h2{font-size:2.5rem} h3,.h3{font-size:1.9375rem}
  h4,.h4{font-size:1.5625rem} h5,.h5{font-size:1.25rem} h6,.h6{font-size:1rem}}

/* gigantic_texts (56px|3.5rem - 120px|7.5rem - 184px|11.5rem) */
.gigantic-texts { font-size:var(--gigantic-texts); }
/* huge_texts (35px|2.125rem- 82px|5.125rem) */
.huge-texts { font-size:var(--huge-texts); line-height:var(--huge-texts);}
/* large_texts (39px|1.875rem - 60px|3.75rem) */
.large-texts { font-size:var(--large-texts); }
/* medium_texts (24px|1.5rem - 36px|2.25rem) */
.medium-texts { font-size:var(--medium-texts); }
/* small_texts (16px|1 rem - 20px|1.25rem) */
.small-texts { font-size:var(--small-texts); }
/* flat_text (12px|0.75rem - 16px|1 rem) */
.flat-text { font-size:var(--flat-text); }



/*********************
##GLOBAL
*********************/

* { 
  font-family: ff-chambers-sans-web, sans-serif; 
    font-weight: 400;
    font-style: normal;
  } 

.pure-white{color:var(--pure-white);}
.lite-grey{color:var(--lite-grey);}
.pure-black{color:var(--pure-black);}
.osc-peach{color:var(--osc-peach);}
.osc-pink{color:var(--osc-pink);}
.osc-red{color:var(--osc-red);}
.osc-yellow{color:var(--osc-yellow);}
.osc-blue{color:var(--osc-blue);}
.osc-black{color:var(--osc-black);}


.pure-white-hover:hover{color:var(--pure-white);}
.lite-grey-hover:hover{color:var(--lite-grey);}
.pure-black-hover:hover{color:var(--pure-black);}
.osc-peach-hover:hover{color:var(--osc-peach);}
.osc-pink-hover:hover{color:var(--osc-pink);}
.osc-red-hover:hover{color:var(--osc-red);}
.osc-yellow-hover:hover{color:var(--osc-yellow);}
.osc-blue-hover:hover{color:var(--osc-blue);}
.osc-black-hover:hover{color:var(--osc-black);}

.pure-white-bg{background-color:var(--pure-white);}
.lite-grey-bg{background-color:var(--lite-grey);}
.pure-black-bg{background-color:var(--pure-black);}
.osc-peach-bg{background-color:var(--osc-peach);}
.osc-pink-bg{background-color:var(--osc-pink);}
.osc-red-bg{background-color:var(--osc-red);}
.osc-yellow-bg{background-color:var(--osc-yellow);}
.osc-blue-bg{background-color:var(--osc-blue);}
.osc-black-bg{background-color:var(--osc-black);}

.display {
  font-family:var(--roxy-gataud);
  font-weight: 400;
  font-style: normal; 
}


p,
li {
  font-style: normal;
  line-height: 1.25;
/*  font-family:var(--sub-reg)*/
}

ul {
  list-style: "+ ";
  list-style-position: outside;
}

ul>li::marker {
  font-family:'Helvetica', sans-serif;
  font-weight: 700;
}

ul.no-intro {
  list-style-type: none;
  /*margin-left: 0;*/
  margin-left:.5rem;
}



/* hr */
hr:not(.thinhr, .dothr) { border-bottom:1px solid transparent; margin-bottom:2rem; margin-top:2rem; }
.dothr{ border-bottom:2px dotted var(--lite-grey); margin-bottom:2rem; opacity:.5 }

#comments { display:none; }
.article-header { display:none; } .tag-poetry .article-header { display:block; }

.flex-it {
  height:100%;
  display:grid;
  place-items:center; 
}

.legroom {
  padding-bottom:2rem;
}

img { border-radius:0.125rem; }

/* content alignments for small and under */
@media screen and (max-width: 39.9375em) {
  .align-left-small-max{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
  .align-right-small-max{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
  .align-center-small-max{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
  .align-top-small-max{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .align-middle-small-max{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .align-bottom-small-maxy{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end}
  .align-justify-small-max{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
  .align-spaced-small-max{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
  .text-center-small-max {text-align:center;}
}

/* content alignments for medium and under */
@media screen and (max-width: 63.9375em) {
  .align-left-medium-max{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
  .align-right-medium-max{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
  .align-center-medium-max{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
  .align-top-medium-max{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .align-middle-medium-max{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .align-bottom-medium-max{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end}
  .align-justify-medium-max{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
  .align-spaced-medium-max{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
  }
  
/* content alignments for medium and up */
@media screen and (min-width: 40em) {
  .align-left-medium{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
  .align-right-medium{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
  .align-center-medium{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
  .align-top-medium{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .align-middle-medium{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .align-bottom-medium{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end}
  .align-justify-medium{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
  .align-spaced-medium{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
  }

  /* content alignments for large and up */
  @media screen and (min-width: 64em) {
    .align-left-large{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
    .align-right-large{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
    .align-center-large{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
    .align-top-large{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
    .align-middle-large{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .align-bottom-large{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end}
    .align-justify-large{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}
    .align-spaced-large{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
    }




body {
    background:var(--osc-black);
    background-size: 30px 30px;
    background-image:
      linear-gradient(to right, var(--lite-grey) 2px, transparent 1px),
      linear-gradient(to bottom, var(--lite-grey) 2px, transparent 1px);
}



h1 {

}

h2, h2 span {
  font-weight:700;
  color:var(--pure-white);
  font-size:var(--large-texts);

}

main {
    
}

section {
    padding:2rem;
    /*border: 5px solid var(--osc-pink);*/
    border-radius:2.5rem; 
}

.cell {
  
 
}


#header-wrapper {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 85%, transparent 100%);
}

#header {
  background-image: url('../img/storybook.jpg');
  background-size: cover; /* scales the BGimg down, instead of giving it at 100% screen size */
  background-position:center; /* centers the BGimg inside div. it is shorthand for: 
  """" background-position: center center; (background-position: horizontal vertical); """" */
  padding-top:15rem;
  padding-bottom:20rem;
  margin-bottom:3rem;
  text-align:center;
}

#header h1 {
  text-shadow: rgba(0,55,255,1) 0px 0px 20px, rgba(0,55,255,.5) 0px 0px 20px;
}


/* content FIXX alignments for small and under */
@media screen and (max-width: 39.9375em) {
  #header h1 {
    font-size:5rem;
    line-height:5rem;
  }

  #header {
    padding-top:5rem;
    padding-bottom:10rem;

  }

  .creator-photo {
    margin-bottom:1rem;
  }
}




.the-comic {
    background-image: url('../img/star-lands.jpg');
    background-size: cover; /* scales the BGimg down, instead of giving it at 100% screen size */
    background-position:center; /* centers the BGimg inside div. it is shorthand for: 
    """" background-position: center center; (background-position: horizontal vertical); """" */
}

span.bg-head {
  /*box-shadow:0px 0 0 5px var(--osc-black); */
  color:var(--pure-white);
  text-shadow: 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70);
  box-decoration-break: clone # Fix Firefox;
  
}

span.bg-head-black {
  /*box-shadow:0px 0 0 5px var(--osc-black); */
  color:var(--pure-white);
  text-shadow: 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1);
  box-decoration-break: clone # Fix Firefox;

}

span.bg-callout {
  /*box-shadow: 0px 7px 13px -5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 7px 13px -5px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 7px 13px -5px rgba(0,0,0,0.5);*/
  color:var(--pure-white);
  text-shadow: 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70);
  box-decoration-break: clone # Fix Firefox;
  line-height:1.5;

}

span.bg-body {
  /*box-shadow:0px 0 0 5px var(--osc-black); */
  text-shadow: 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70);
  box-decoration-break: clone # Fix Firefox;
  line-height:1.5;

}






#team-star-chaser {
/*  background-color:var(--osc-black);*/
background-image: url('../img/endlessspace.png');
background-size: 100%; /*cover;  scales the BGimg down, instead of giving it at 100% screen size */
background-position:center; /* centers the BGimg inside div. it is shorthand for: 
"""" background-position: center center; (background-position: horizontal vertical); """" */
background-repeat:repeat;
}

.creator {
  color:var(--osc-black);
}

.creator p, .creator h3, .creator h4 {
  color:var(--pure-white);
  text-shadow: 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1), 3px 2px 6px rgba(0,0,0,1);
}

.creator li span {
  box-decoration-break: clone # Fix Firefox;
  line-height:3;
  padding:.75rem 1rem;
  border-radius:.5rem;

}

li.twitter span {
  color:var(--pure-white);
  background-color:rgb(29, 155, 240);
}

li.instagram span {
  color:var(--pure-white);
  background:linear-gradient(72.44deg, #FF7A00 11.92%, #FF0169 51.56%, #D300C5 85.69%);
}

li.whatnot span {
  color:var(--pure-black);
  background:#FFF351;
}

li.youtube span {
  color:var(--pure-white);
  background:#FF0000;
}

#follow li span {
  font-size:var(--medium-texts);
  padding:10px 15px !important;
  margin:0px 10px;
  border-radius:.5rem;
}

li span:hover {
  color:var(--pure-black);
  background:var(--pure-white);
}



.creator-credit h4 {
  margin-top:-12px;
}


#TVM > div:nth-child(2) > h3:nth-child(1) {
  margin-bottom:.5rem;
}

#TVM > div:nth-child(2) > h3:nth-child(1) > span:nth-child(1) {
line-height:.5;
}

#TVM > div:nth-child(2) > h4:nth-child(2) > span:nth-child(1) {
  line-height:.5;
}


.creator:not(:last-of-type) {
  padding-bottom:1.5rem;
}

.creator-credit {
  text-align:center;
}

.creator-credit li.twitter {

}

.creator-credit li.instagram {
 
}

.creator-photo img {
  border-radius:1rem;
}


#where-to-buy {
  background-image: url('../img/yurbilzir.jpg');
  background-size: cover; /* scales the BGimg down, instead of giving it at 100% screen size */
  background-position:center; /* centers the BGimg inside div. it is shorthand for: 
  """" background-position: center center; (background-position: horizontal vertical); """" */
}

#where-to-buy p span {
  text-shadow: 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70), 3px 2px 6px rgb(18, 19, 70);
  line-height: 1.5;

}


#follow {
  background-image: url('../img/axis-panels.jpg');
  background-size: cover; /* scales the BGimg down, instead of giving it at 100% screen size */
  background-position:center; /* centers the BGimg inside div. it is shorthand for: 
  """" background-position: center center; (background-position: horizontal vertical); """" */
}



#follow a {
    color:inherit;

}

#follow ul {
    
}

#follow li {
    display:inline;
}


#footer-wrapper {
    background:var(--osc-black);
    mask-image: linear-gradient(to top, rgb(7, 8, 12) 85%, transparent 100%);
  }
  

footer {
    margin-top:2rem;
    padding:6rem 0rem 5rem 0rem;
    color:var(--lite-grey);
    text-align:center;
    opacity:.7;
}

footer p {
    line-height:1;
}

#issue-two, #issue-one, #issue-zero {
  padding:2rem;
}

#issue-two img, 
#issue-one img, 
#issue-zero img
{
  box-shadow: 5px 5px 10px var(--osc-black);
  position: relative;
  -webkit-animation: action 2s linear infinite alternate;
  animation: action 2s linear infinite alternate;
}

@-webkit-keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}




.gradient-border {
  --border-width: 8px;
  position: relative;
  border-radius: var(--border-width);
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  /*background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);*/
 background: linear-gradient(60deg, #EF68A0, var(--osc-red));
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 2s alternate infinite;
  box-shadow: 0 0 50px 7px rgba(255, 0, 255, 0.15);
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}


#legal a { color:(var(--lite-grey)); }
#legal a:hover { text-decoration: underline; color:#fff; }