/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    --body-font:'Inter';
    --text-size:12px;
    --text-color:#444444;
    
    --heading-font:'Playfair Display';
    
    --background-color:#f3f3f3;
    --accent:#ac8ba0;
    --light-accent:#d3c4d6;
    --headings:#222222;
    --progress-bar-bg:#f1f1f1;
    --links:#68616f;
    
    --featured-image:url(img/background.jpg);
    
    --slide-out-image:url(https://images.unsplash.com/photo-1662329219657-ad19333b0c7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80);
    --slide-out-bg-color:#f8f8f8;
    --slide-out-border:#e6e6e6;
    --slide-out-text-color:#444444;
    --slide-out-link:#aaaaaa;
    
    --footer-bg:#F4EFF0;
}
/* ---------------------------------------------------------------------- */

/* ---  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;
    font-smoothing:antialiased;
    -webkit-animation: fadein 1.5s;
    -moz-animation:fadein 1.5s;
    animation:fadein 1.5s;
}

iframe.tmblr-iframe {display:none;}

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;}


/*---- synopsis ----*/

.synopsis:first-letter {
    font-size:44px;
    font-family:var(--heading-font);
    float:left;
    vertical-align:top;
    padding:14px 14px 20px 14px;
    background-color:var(--accent);
    margin:4px 10px 0 0;
}


/*---- 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);}


/*---- 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;
}


/*---- 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 characters ----*/

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

#minor span {display:block;margin-bottom:0.75em;}
#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:50px;
    height:50px;
    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:50px;
    height:50px;
    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;
}


/*---- slide out ----*/

.menu-open {
    position:fixed;
    top:15px;
    left:15px;
    font-size:18px;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top:0;
    left:0;
    color:var(--slide-out-text-color);
    background-color:var(--slide-out-bg-color);
    border-right:1px solid var(--slide-out-border);
    overflow-x:hidden;
    transition:.5s ease-in-out;
}

.menu-image {
    width:100%;
    height:225px;
    margin-bottom:30px;
    background-image:var(--slide-out-image);
    background-position:center;
    background-size:cover;
    filter: grayscale(50%);
}

.sidecontent {
    margin:auto;
    width:350px;
    padding-bottom:30px;
}

.sidecontent a {
    color:var(--slide-out-text-color);
    border-bottom:2px solid var(--light-accent);
}

.sidecontent a:hover {
    color:var(--accent);
}

.sidecontent h1 {
    font-family:var(--heading-font);
    color:var(--slide-out-text-color);
    font-weight:400;
    display:block;
    font-size:22px;
    text-transform:lowercase;
    font-style:italic;
    letter-spacing:-0.5px;
    background: none;
    padding:0;
    margin:0 0 0.75em 0;
}

.sidenav .closebtn {
    font-family:Times New Roman;
    color:var(--text-color);
    position:absolute;
    top:8px;
    right:8px;
    text-align:center;
    font-size:25px;
    line-height:25px;
    width:25px;
    height:25px;
    border-radius:100%;
    background-color:var(--background-color);
    font-weight:400;
    transition:.2s ease-in-out;
    z-index:10;
}

.closebtn:hover {
    color:var(--accent);
    background-color:#fff;
}

/*--- 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;}
}

/*--- music player ---*/

 p {
            margin: 4px 0;
        }

        #player {
            display: none;
        }

        [data-current-song1st=''], [data-current-song2nd=''] {
            color: red;
        }

        body {
            color: rgb(37, 37, 37);
            background-color: rgb(243, 243, 243);
            cursor: url('https://dreamingpearl.neocities.org/cursor.png'), default;
            margin: 0;
            padding: 20px;
        }

        .song-entry:hover {
            cursor: pointer;
        }

        /* ----------------- */

        * {
            box-sizing: border-box;
        }

        .player-wrapper {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            border: 2px solid deepskyblue;
            border-radius: 5px;
            color: deepskyblue;
        }

        .player-wrapper * {
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }

        .song-name-wrapper {
            padding: 15px;
            width: 100%;
        }

        .song-name-inner {
            font-style: italic;
            border-radius: 5px;
            border: 1px solid deepskyblue;
            background-color: rgb(221, 242, 255);
            text-align: center;
        }

        .controls-wrapper {
            padding: 0 15px;
            text-align: center;
        }
        
        .buttons-wrapper button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid deepskyblue;
            background-color: rgb(221, 242, 255);
            color: deepskyblue;
        }

        .seekers-wrapper {
            padding: 15px;
            display: flex;
            align-items: center;
        }

        .seekers-wrapper input {
            -webkit-appearance: none;
            appearance: none;
            height: 1px;
            background: deepskyblue;
            outline: none;
        }

        .seekers-wrapper input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 11px;
            height: 11px;
            background: rgb(221, 242, 255);
            cursor: pointer;
            border: 1px solid deepskyblue;
        }

        .seekers-wrapper input::-moz-range-thumb {
            width: 11px;
            height: 11px;
            background: rgb(221, 242, 255);
            border: 1px solid deepskyblue;
            cursor: pointer;
        }

        .volume-control {
            width: 75px;
        }

        .song-list-wrapper {
            width: 100%;
            padding: 15px;
        }

        .song-list-inner {
            border-radius: 5px;
            border: 1px solid deepskyblue;
            background: rgb(236, 248, 255);
        }

        .song-list-entry {
            padding: 5px;
            border-bottom: 1px solid deepskyblue;
            text-align: center;
        }

        .song-list-entry:last-child {
            border-bottom: none;
        }

        [data-current-song=''] {
            font-style: italic;
        }

        .song-list-entry-text {
            cursor: pointer;
        }