:root {
	--main-text-color: white;
	--main-bg-color: #1b1b1b;
	--main-transparent: rgba(255, 255, 255, .15);
	--main-small-text-color: rgba(255, 255, 255, .45);
}
@media (prefers-color-scheme: dark) {
	:root {
		--main-text-color: white;
		--main-bg-color: #1b1b1b;
		--main-transparent: rgba(255, 255, 255, .15);
		--main-small-text-color: rgba(255, 255, 255, .45);
	}
}

body {
	line-height: 1.6;
	font-size: 16px;
	font-family: sans-serif;
	background: var(--main-bg-color);
	color: var(--main-text-color);
	padding-left: calc(100vw - 100%);
}
h1 {
	margin-block-start: 0.67rem;
	margin-block-end: 0.67rem;
	font-size: 2.00rem;
	font-weight: bold;
}
article h1:first-of-type {
	margin-block-start: 1.67rem;
}
h2 {
	margin-block-start: 0.83rem;
	margin-block-end: 0.83rem;
	font-size: 1.50rem;
	font-weight: bold;
}
h3 {
	margin-block-start: 1rem;
	margin-block-end: 1rem;
	font-size: 1.17em;
	font-weight: bold;
}
h4 {
	margin-block-start: 1.33rem;
	margin-block-end: 1.33rem;
	font-size: 1.00rem;
	font-weight: bold;
}
article h1 + h4:first-of-type {
	margin-block-start: 0rem;
}
h5 {
	margin-block-start: 1.67rem;
	margin-block-end: 1.67rem;
	font-size: 0.83rem;
	font-weight: bold;
}
h6 {
	margin-block-start: 2.33rem;
	margin-block-end: 2.33rem;
	font-size: 0.67rem;
	font-weight: bold;
}
a {
	color: var(--main-text-color);
}
a:hover {
	background: var(--main-transparent);
}
img {
	width: 100%;
	height: auto;
}
blockquote {
	color: var(--main-small-text-color);
	border-left: 3px solid var(--main-transparent);
	padding: 0 1rem;
	margin-left: 0;
	margin-right: 0;
}
hr {
	border: none;
	height: 1px;
	background: var(--main-small-text-color);
}
code {
	background: var(--main-transparent);
	border-radius: .1875rem;
	/* padding: .0625rem .1875rem; */
	/* margin: 0 .1875rem; */
}
small {
	font-size: .95rem;
	color: var(--main-small-text-color);
}
#header ul {
	list-style-type: none;
	padding-left: 0;
}
#header li {
	display: inline;
	font-size: 1.2rem;
	margin-right: 1.2rem;
}
#container {
	margin: 2.5rem auto;
	width: 90%;
	max-width: 60ch;
}
#postlistdiv ul {
	list-style-type: none;
	padding-left: 0;
}
.moreposts {
	font-size: .95rem;
	padding-left: 0.5rem;
}
#nextprev {
	text-align: center;
	margin-top: 1.4rem;
	font-size: .95rem;
}
#footer {
	color: var(--main-small-text-color);
}

/* Custom Fonts */

@font-face {
    font-family: 'Cabin';
    src: url('./Cabin-Regular.otf');
}

/* Adilene Music Player */

#musicplayer{
    font-family:'Cabin'; /* default font */
    background:#2d2314; /* background color of player */
    border:4px solid #786450; /* border around player */
    width:200px; /* width of the player - make it 100% if you want it to fill your container */
    padding:10px;
    text-align:center; 
    display:flex;
    flex-direction:column;
    gap:10px;
    /* cursor:url('https://fliffysburrow.neocities.org/style/2659.png'), auto; */
    bottom: 0;
    right: 0;
}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.songtitle, .track-info, .total-duration, .popout-player, .buttons, .volume-icon, .playback-speed, .seek_slider, .volume_slider{
    cursor:pointer;
    /* cursor: url('https://fliffysburrow.neocities.org/style/2576.png') 14 27, auto; */
}

.controls{
    display:flex; 
    flex-direction:column; 
    gap:10px;
}

.buttons{
    display:flex;
    justify-content:center;
    font-size:17px !important; /* size of controls by their icons */
    width:100%;
    line-height: 1.33;
}

.buttons div{
    width:20%; /* size of controls by their boxes */
}

.playpause-track, .prev-track, .next-track, .popout-player, .loop-track, .shuffle-tracks{
    color:#1f160f; /* color of buttons */
    font-size:35px; /* size of buttons */
}

.volume-icon{
    font-size:20px !important; /* size of volume icon */
}

.volume-indicator{
    font-size:14px !important; /* size of volume icon */
}

.popout-player{
    font-size:28px !important /* size of popout icon */
}

.playback-speed{
    margin-right: auto;
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    line-height: 1;
}

.volume{
  gap:5px;
}

.current-time{
    margin-right: auto;
}

.now-playing, .track-info{
    background-color:#1f160f; /* background color of top two boxes */
    color:#ffe1b4;
}

.now-playing{
    font-weight:bold;
}

.seek_slider, .volume_slider {
    background: transparent;
}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    width:100%;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#e74492; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:#ffe1b4; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
    border: solid #fff 0px;
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#ffe1b4; /* color of seeking track */
    border: solid #fff 0px;
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:#ffe1b4; /* color of seeker square */
    border: solid #fff 0px; /* removes weird border around seeker square in firefox */
}

.dropbtn {
  background-color: #2d2314;
  color: #cdaf8c;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #896125;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  height: 200px;
  overflow: auto;
  display: none;
  position: absolute;
  background-color: #1e140f;
  max-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content .playlist-track {
  color: #cdaf8c; /* #cdaf8c (pale) - #ffe1b4 (bright) */
  padding: 4px 2px;
  text-decoration: none;
  display: block;
  cursor: pointer;
  /* cursor: url('https://fliffysburrow.neocities.org/style/2576.png') 14 27, auto; */
}

@media (hover: hover) {
  .dropdown-content .playlist-track:hover{
    background-color: #36241b;
  }
}

.dropdown-content .track-highlight{
  background-color: #36241b;
}

.show {
  display:block;
  position:relative;
}

/* Row highlighting, unavailable status for tracks on outer playlist */

.row-highlight {
  background-color: #474747 !important;
  outline: 4px solid #3c8077 !important;
}

.row-unavailable {
  color: gray;
}

@media (hover: hover) {
  tr:not(.row-highlight, .row-unavailable, :first-child):hover {
    background-color: #474747;
  }
}

tr:first-child {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #282828;
}

/* Additional CSS needed for certain elements of the page (details & summary for collapsible sections, table/th/td to fix look of tables) */

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

table, th, td {
  border: 1px solid;
  border-collapse: collapse;
  padding: 0.2em;
}