/* custom styles */
/* the font declaration is from fontawesome 5.8.1 to add artstation */
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url("fonts/fa-brands-400.eot");
    src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("fonts/fa-brands-400.woff2") format("woff2"), url("fonts/fa-brands-400.woff") format("woff"), url("fonts/fa-brands-400.ttf") format("truetype"); }


/* @font-face { */
/*   font-family: 'Patrick Hand'; */
/*   font-style: normal; */
/*   font-weight: 400; */
/*   font-display: swap; */
/*   /\*src: url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');*\/ */
/*   src: url("fonts/PatrickHand-Regular.ttf") format("truetype"); */
/* } */

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/patrickhand/v14/LDI1apSQOAYtSuYWp8ZhfYe8XsLL.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.fab {
    font-family: 'Font Awesome 5 Brands'; }

.non-fa-artstation::before {
    font-family: "Font Awesome 5 Brands";
    content: '\f77a';
}

.non-fa-tapas::before {
    content: url('../img/tapas.ico');
    display: inline-block;
    opacity: 0.5;
    transform: scale(0.5);
}


/* lightbox customization */
.ekko-lightbox-nav-overlay {
    /* make the arrows stick out of the picture */
    width: 120%;
    position: relative;
    left: -10%;
    justify-content: space-between;
}


.ekko-lightbox-nav-overlay a {
    flex: 0;
    padding: 0 15px;
    opacity: 1;
}

.ekko-lightbox-nav-overlay a:focus {
  /* pinning it (otherwise it is redundant from ekko's main css) */
  outline: none;
  /* disable underline */
  text-decoration: none;
}

.ekko-lightbox-nav-overlay a span {
    flex-grow: 0;
    border-radius: 50%;
    background-color: #99999999;
    padding: 0 12px;
}


/* modal containers */
.ekko-lightbox .modal-dialog {
    margin: 4% auto 1% auto;
}

.ekko-lightbox .modal-header {
    padding: 7px;
}

button.close {
    opacity: 1.0;
}

button span.faux-close-button {
    color: white;
    background-color: #99999999;
    border-radius: 50%;
    /* padding works in tandem with the close character's width/height ratio */
    padding: 8px 12px;
    /* this ends up top right on the modal, small adjustments only */
    position: relative;
    top: -50px;
    right: -7px;
}

/* modal sections */
.ekko-lightbox .modal-body {
    padding: 7px;
}

.ekko-lightbox .modal-footer {
    padding: 7px;
}

.ekko-lightbox button.close {
    padding: 7px;
}


.row {
    /* bootstrap grid's default 15px paddings countered earlier -15px values here */
    margin-left: 0;
    margin-right: 0;
}


.box-post {
    /* adapting to bootstrap's default side paddings at 15px  */
    padding: 15px 0 15px 0;
}


/* sequential art card */

.box-post-stacked {
    position: relative;
    margin: 0 8% 8% 0;
}

.box-post-stacked,
.box-post-stacked::before,
.box-post-stacked::after {
    /* border: 1px solid rgba(255, 255, 255, 1.0); */
    box-shadow: 2px 2px 2px rgba(0,0,0,.35);
}


.box-post-stacked::before,
.box-post-stacked::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Second sheet of paper */
.box-post-stacked::before {
  background-color: #ccc;
  top: -6px;
  left: -6px;
  transform: rotate(-5deg);
  z-index: -1;
}

/* Third sheet of paper */
.box-post-stacked::after {
  background-color: #ddd;
  top: 6px;
  left: 6px;
  transform: rotate(3deg);
  z-index: -2;
}

.box-post-stacked-duvet {
    /* to compensate for absolute not adhering to normal flow */
    content: "";
    height: 18px;
}

.img-sequential {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid grey;
}


.speech-bubble {
  font-family: 'Patrick Hand', cursive;
  font-size: 20px;
    border-radius: 12px;
    border-style: none;
    padding: 12px;
    background-color: #d9ffff;
}

.speech-bubble p {
  margin: 0;
}

.about-row {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  justify-items: center;
}

.about-row-image-container {
  object-fit: contain;
}


.static-post.content-column {
  background-color: white;

}

.navbar-default {
  border-color: transparent;
  background-color: inherit;
  min-height: unset;
}

.container-fluid.outer-container {
  padding: 0;

}

.sidebar-container {
  background-color: #f7fcff;
  /* same min-height as for .content-column.white-background - chk for simplification opportunities */
  min-height: 100vh;
}