/* ---------------------------- customizations -------------------------- */
 
:root {
    --body-font:'Inter';
    --text-size:12px;
    --text-color:#444444;
    
    --heading-font:'Playfair Display';
    
    --background-color:#ffffff;
    --accent:#d5bba5;
    --light-accent:#f3ede8;
    --headings:#222222;
    --progress-bar-bg:#f1f1f1;
    --links:#aaaaaa;
	--button:#663333;
    
    --featured-image:url(img/header.png);
    
    --footer-bg:#f8f8f8;
}
/* ---------------------------------------------------------------------- */

/* ---  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:var(--body-font);
    font-size:var(--text-size);
    color:var(--text-color);
    background-color:var(--background-color);
    line-height:1.8em;
    text-align:left;
    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:var(--links);
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    color:var(--accent);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

blockquote {
    padding: 0 0 0 1em;
    margin: 1.5em 2.5em 1.5em 1.5em;
    font-style:italic;
}

h1 {
    display:block;
    font-family:var(--heading-font);
    font-size:24px;
    line-height:24px;
    text-transform:lowercase;
    font-weight:400;
    letter-spacing:-0.5px;
    padding:0;
    margin:1em 0 1.5em 0;
    color:var(--headings);
    background: linear-gradient(120deg, var(--light-accent) 0%, var(--light-accent) 100%);
    background-repeat: no-repeat;
    background-size: 100% 45%;
    background-position: 0 100%;
}

h1 i {
    float:right;
    padding-right:3px;
    font-size:18px;
    padding-top:4px;
    color:var(--accent);
}

h2 {
    display:block;
    font-size:var(--text-size);
    text-transform:lowercase;
    font-weight:600;
    text-align:left;
    padding:0;
    margin:0;
    color:var(--headings);
}


/*---- header ----*/

header {
    display:block;
    margin-bottom:20px;
    padding:0 0.5em;
}

#title {
    display:inline-block;
    font-family:var(--heading-font);
    font-size:30px;
    line-height:32px;
    text-transform:lowercase;
    letter-spacing:-1px;
    font-weight:400;
    vertical-align:middle;
}

nav {float:right;padding-top:15px;}

nav a {
    margin-left:1.25em;
    background-color:var(--background-color);
    padding:3px 5px 4px 5px;
    border-radius:3px;
}

nav a:hover {
    background-color:var(--light-accent);
    color:var(--text-color);
}

nav i {
    margin-right:5px;
    vertical-align:middle;
}


/*---- featured image ----*/

#featured-image {
    display:block;
    border-radius:5px;
    width:100%;
    height:400px;
    background-image:var(--featured-image);
    background-position:center;
    background-size:cover;
    margin-bottom:30px;
    filter:grayscale(45%);
}

/*---- containers ----*/

main {
    display:block;
    width:950px;
    height:auto;
    margin:75px auto 50px auto;
}

#main-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

#col-one {display:block;width:300px;}

#col-two {display:block;width:550px;}

section {margin-bottom:60px;}

/*---- tags ----*/

#tags {
    display:block;
    margin-top:25px;
}

#tags span {
    display:inline-block;
    border-bottom:1px dotted var(--accent);
    margin-right:6px;
}


/*---- links ----*/

.linkblock {
    display:grid;
    grid-template-columns:33% 33% 33%;
    margin-bottom:20px;
}

.linkblock a {display:block;color:var(--text-color);}
.linkblock a:hover {color:var(--accent);}



/*---- surnames ----*/

.surnames {
    column-count: 4;
    margin-bottom:20px;
}

.surnames span {color:var(--text-color);}


/*---- stats ----*/

#stats-grid {
    display:grid;
    grid-template-columns:50% 50%;
    grid-gap:10px;
}

#stats span {display:block;line-height:14px;}

#stats span b {display:inline-block;margin-right:0.5em;}

.meter { 
	height:8px;
	width:97%;
	position: relative;
	background:var(--progress-bar-bg);
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	margin:2em 0 2.5em 0;
}
 
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color:var(--accent);
  position: relative;
  overflow: hidden;
}
 
.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}


/*---- lists ----*/

.lists {display:block;}

.lists span {display:block;margin-bottom:0.5em;}

.lists span b {color:var(--headings);}

.lists span b:after {
    content:'—';
    color:var(--accent);
    margin:0 2px 0 5px;
    font-size:15px;
}

/*---- labels ----*/

.label {
  background-color:var(--light-accent);
  color:var(--accent);
  padding: 0px 10px;
  margin-left: 5px;
  text-transform:uppercase;
  font-size:0.8em;
}

/*---- jac ----*/

#jac {
    display:block;
}

#jac-wrap {
    display:block;
	margin-left:10px;
}

.jac-box {
    display:block;
    height:auto;
    margin-bottom:5px;
}

.jac-img {
    display:inline-block;
    width:100px;
    height:100px;
    float:left;
    position:absolute;
    vertical-align:top;
    border-radius:5px;
    filter: grayscale(50%);
}

.jac-content {
    display:inline-block;
    min-height:100px;
    line-height:140%;
	margin-top:4px;
    margin-left:115px;
    vertical-align:top;
}

.jac-name {
    font-size:14px;
    font-weight:700;
}

.jac-subheading  {
    display:block;
    color:var(--links);
    margin-bottom:0.5em;
}

.jac-bio {
	display:block;
}

.jac-bio span {
	display:inline-block;
	vertical-align:bottom;
	font-weight:600;
}

.jac-bio i {
	display:inline-block;
	vertical-align:middle;
	font-weight:600;
}

.jac-links {
    display:grid;
    grid-template-columns:50% 50%;
}

.jac-links a:first-of-type {
    margin-right:5px;
}

.jac-links a:last-of-type {
    margin-left:5px;
}

.jac-links a {
    display:inline-block;
    margin-bottom:1em;
	background-color:var(--button);
	color:var(--background-color);
	padding:3px 0px 3px 10px;
	border-radius:5px;
	font-size:calc( var(--text-size) - 2px);
	text-transform: uppercase;
}

.jac-links a:hover {
	background-color:var(--headings);
}

.jac-links i {
    display:inline-block;
    font-size:calc( var(--text-size) + 4px);
    vertical-align:middle;
    margin-right:5px;
}

/*---- characters ----*/

#character {
    display: block;
}

#character-wrap {
    display:block;
}

.char-box {
    display:block;
    height:auto;
    margin-bottom:30px;
}

.char-box:last-of-type {
    margin-bottom:0em;
    padding-bottom:0em;
    border-bottom:0px;
}

.char-img {
    display:inline-block;
    width:75px;
    height:75px;
    float:left;
    position:absolute;
    vertical-align:top;
    border-radius:5px;
    filter: grayscale(50%);
}

.char-content {
    display:inline-block;
    min-height:75px;
    line-height:140%;
    margin-left:90px;
    vertical-align:top;
}

.name {
    font-size:14px;
    font-weight:700;
}

.char-subheading  {
    display:block;
    color:var(--links);
    margin-bottom:0.5em;
}

.ch-bio {display:block;}


/*---- minor ----*/

.minor {
    column-count:2;
    column-gap:30px;
}

.minor span {display:block;margin-bottom:0.75em;}
.minor span .label {display:inline-block}
.minor span b {border-bottom:2px solid var(--light-accent);}

/*---- footer ----*/

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:auto;
    padding:70px 0;
    background-color:var(--footer-bg);
}

#footer-wrap {
    width:950px;
    height:auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

#foot-one {display:block;width:425px;}

#foot-two {display:block;width:425px;}

footer h1 {
    display:block;
    font-family:var(--heading-font);
    font-size:20px;
    font-weight:400;
    font-style:italic;
    letter-spacing:-0.5px;
    padding:0;
    margin:0 0 1em 0;
    color:var(--headings);
    background:none;
}

.author {
    width:100px;
    height:100px;
    border-radius:5px;
    padding:3px;
    border:1px solid var(--accent);
    filter: grayscale(50%);
    margin:0.25em 0.75em 0 0;
	float:left;
}

.author img {
    width:100px;
    height:100px;
    border-radius:4px;
    overflow:hidden;
}

.socials {
    display:grid;
    grid-template-columns:25% 25% 25% 25%;
}

.socials a {
    display:inline-block;
    margin-right:0.25em;
    margin-bottom:1em;
}

.socials a:hover {
    color:var(--headings);
}

.socials i {
    display:inline-block;
    font-size:calc( var(--text-size) + 2px);
    vertical-align:middle;
    margin-right:4px;
}

/*--- responsive - don't edit ---*/

@media only screen and (max-width: 1100px) {
    
    main {width:80%;}
    
    section {margin-left: 0;}
}

/*--- for mobile devices ---*/

@media only screen and (max-width: 720px) {
    main, section {width: 80vw;}
}