/* ---------------------------- customizations -------------------------- */
 
:root {
    --body-font:'Inter';
    --text-size:11px;
    --text-align:justify; /* left, center, or justify */
    --title-font:'Cormorant';
 
    --background-color:#f3ede8;
    --text-color:#444444; /* text color */
    --accent:#c5ad98;
    --headings:#222222;
    --links:#a2a2a2;
    --borders:#f3ede8;
    --drop-cap:#444444;
    --drop-cap-background:#f3ede8;
 
    --featured-image:url('https://images.unsplash.com/photo-1575126516997-9a17eff5e434?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MjZ8ODQ2ODc5M3x8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60');
}
/* ---------------------------------------------------------------------- */
 
/* ---  fade in  --- */
 
@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; } }
 
@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; } }
 
@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; } }
 
 
/*----- BASIC STYLING -----*/
 
body {
    font-family:monospace;
    font-size:12px;
    color:black;
    background-color: #fff;
    background-image: url('naturebugtiling.png'); /* your tile image */
    background-position: 80px 80px;
    background-repeat: repeat; /* ensures the image tiles */
    background-attachment: fixed; /* optional: makes the background fixed on scroll */
    background-size: auto; /* or use `contain` or `cover` depending on the effect you want */
    line-height: 170%;
    text-align:center;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    -webkit-animation: fadein 1.5s;
    -moz-animation:fadein 1.5s;
    animation:fadein 1.5s;
}
 
a {
    color: #aaa; /* link color */
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
 
a:hover {
    color: #8A9A5B;
}
 
h1 {
    font-size:calc(var(--text-size) + 1px);
    letter-spacing:0.75px;
    color:black;
    font-weight: 700;
    margin:0 0 1.25em 0;
    text-transform: uppercase;
}
 
h1 svg {
  width:15px;
  height:15px;
  stroke-width:2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align:middle;
  margin-top:-3px;
  margin-right:5px;
}
 
h2 {
    font-size: 15px;
    font-weight: 700;
    word-spacing: 3px;
    color:black;
    margin:0;
    padding:0;
}
 
main {
    margin:50px auto;
    margin-top:50px;
    width:800px;
    height: auto;
    border-radius:8px;
    box-shadow:2px 2px 7px #e2e2e2;
    border:1px solid #f2f2f2;
    background-color: #f5e0c4;
}
 
#content-wrap {
    padding:2.5em;
    background-color: transparent;
}
 
section {
    padding:3em;
    border-left:0 solid black;
    border-right:0 solid black;
    border-bottom:0 solid black;
}
 
.featured-image {
    width:100%;
    height:200px;
    background-image: ;
    background-size:cover;
    background-position:center;
    border-radius:3px;
}
 
heading {
    display:block;
    text-align: center;
    border: 0 solid black;
    padding:2.5em;
}
 
heading a {
    padding:0 3px;
    color:black;
}
 
heading a:hover {
    color:#8A9A5B;
}
 
#wip-title {
    font-family:monospace;
    color:black;
    font-size:25px;
    word-spacing: 3px;
    margin-bottom:10px;
    text-transform: uppercase;
}
 
.line {
    height:1px;
    width:75px;
    margin:2em auto;
    background-color:black;
}
 
 
/* details */
 
.details-columns {
    display: grid;
    grid-template-columns:32% 35% 32%;
}
 
.details-columns i {
    vertical-align:middle;
    margin:-2px 6px 0 6px;
}
 
/* characters */
 
.char {
    display:block;
    margin-bottom:1.25em;
    padding-bottom:1.25em;
    border-bottom:1px solid black;
}
 
.char:last-of-type {
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0px solid black;
}
 
.icon-left {
    width: 50px;
    height: 50px;
    margin-right:1em;
    margin-top:3px;
    float: left;
    border-radius:3px;
}
 
.icon-right {
    width: 50px;
    height: 50px;
    margin-left:1em;
    margin-top:3px;
    float: right;
    border-radius:3px;
}

.image-left,
.image-right {
  width: 250px;
  height: auto;
  border-radius: 3px;
  border: 5px solid #988558;
  margin: 1em;
  display: block;
}

.image-left {
  float: left;
}

.image-right {
  float: right;
}

/* Clearfix utility */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
.icon-left img, .icon-right img {
    width: 50px;
    height: 50px;
}
 
 
/* links */
 
.link-columns {display: grid;grid-template-columns:33.3% 33.3% 33.3%;}
 
.link-columns span {display:block;}
 
.link-columns a {border-bottom:1px solid black;}
 
.link-columns a:hover {color:#8A9A5B;border-bottom:1px solid black;}
 
 
/* info */
 
.info span {display:block;margin-bottom:1.25em;}
.info span:last-of-type {margin-bottom:0;}
 
.tmblr-iframe {display:none;}
 
 
/*--- responsive - don't edit ---*/
 
@media only screen and (max-width: 1100px) {
 
    main {width:70%;}
}
 
/*--- for mobile devices ---*/
 
@media only screen and (max-width: 720px) {
    main {width: 80vw;}
 
    .details-columns {
        display: grid;
        grid-template-columns:50% 50%;
    }
 
}