@charset "UTF-8";

/* imports ------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');

/* global -------------------------------------------------------------------*/

:root {	
	--pageclr_text: #82637e;
	--pageclr_textHeader: #de95d4;
	--font-default: "Quicksand", sans-serif;
}

body {
	font-family: var(--font-default);
	font-weight: 500;
	font-size: 1em;
	color: var(--pageclr_text);
}

/*Lavi Detoiles Displacement ------------------------------------------------*/
.lavi {
	position: relative;
	top: 70px;
	height: 160px;
	background: #fa0;
}

.lavi-icon {
	position: absolute;
	width: 0%;
	height: 0%;
	top: 0;
	right: 0%;
	transform: translateY(-50%);
	background: #0fa;
}

/* common site elements -----------------------------------------------------*/
.site_blockMain, 
.site_blockSub {
	a {
		&:link, &:visited {
			transition: 0.2s;
			text-align: center;
			display: inline-block;
			border-radius: 5px;
			text-decoration: none;
		}
		&:link {
			color: #959ede;
			cursor: help;
		}
		&:visited {
			color: #de95b6;
		}
		&:hover, &:active {	
			text-align: center;
			display: inline-block;
			cursor: help;
		}
		&:hover {
			color: #ffdeeb;
			background-color: #ff8cc9;
		}
		&:active {
			color: #defffe;
			background-color: #ffdeeb;
		}
	}
}

hr {
    border: none;
    border-top: 1px dotted;
}

hr,h2,h3,.title {
	color: var(--pageclr_textHeader);
}

.subtitle{
		text-align: center;
		font-size: 15pt;
}

.title {
	text-align: center;
	padding-top: 50px;
	font-size: 48pt;
	font-weight: 700;
	height: 100px;
}

.site_maindiv {
	/* background-color: #3f3f3f0f; */

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* topnav -------------------------------------------------------------------*/

.site_topnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.site_topnav-button {
	image-rendering: pixelated;
	width: 176;
	a > img {
		transition: all .4s;
		&:hover {
			transform: scale(1.3);
			cursor: help;
		}
	}
}

.site_body {
	max-width: 1050px;
	margin: 0 auto 0 auto;
	background-color: #27d0e3;
	padding:25px;
	line-height:18pt;
	background-image: url("../images/bgtest.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.site_blockMain, 
.site_blockSub {
	border: 1px solid #88b;
	margin: 8px 4px 16px; /* v, h margin */
	padding: 0 16px 8px 16px;
	outline: 1px solid #88b;
	outline-offset:2px;
}

.site_blockMain {
	background-color: #fffafe;
}

.site_blockSub {
	background-color: #ffffec;
}

.site_blockMainHeader {
	height: 30px;
	background-color: #000;
	color: #FFF;
	margin: 0;
}

.site_containerMain,
.site_containerSub,
.site_subpage_containerMain,
.site_subpage_containerSub {
	margin: 8px 4px; /* v, h margin */
}

.site_containerMain {
	width: 500px;
}

.site_subpage_containerMain {
	width: 700px;
}


.site_subpage_containerSub {
	width: 210px;
}

.site_containerSub {
	width: 240px;
}

/* album gallery ------------------------------------------------------------*/

.site_albumrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	height: 210px;
	width: 640px;
	margin: 0px 8px;
}

.albumcover {
	color: #ff8cc9;
	width: 200px;
	height: 200px;
	margin: 5 5 5 5;
	border-radius: 5px;
}

.albumcover:hover {
	background-color: #fad7fc;
	border: 5px solid;
	margin: 0 0 0 0;
	transition: 0.2s;
}

/* banner -------------------------------------------------------------------*/

.banneralbum {
	color: #fad7fc;
	height: 40;
	width: 198;
}

.banneralbum:hover {
	outline: 3px solid;
	transition: 0.1s;
}


/* audioplayer --------------------------------------------------------------*/

.audioPlayer {
	height: 50px;
	width: 658px;
	margin-top: 5px;
	margin-bottom: 15px;
	color: #FFF;
	text-shadow: 1px 1px 0 #000;
	border: 1px solid #222;
	position: relative;
	z-index: 1;
	background-color: #fad7fc;
	border-radius: 10px;
}

.audioSeek,
.audioMix,
.audioLoop,
.audioVolume,
.audioPlSelBtn,
.audioPlSelTitle,
.audioPlSelTime,
.audioPlSelSize {
	height: 100%;
	float: left;
}

.audioPlayPause {
	width: 40px;
	height:100%;
	text-align: center;
	cursor: help;
	z-index: 2;
	top: 0;
	left: 0;
	border-right 1px solid #999;
	float: left;
}

.audioTimeCurrent,
.audioTimeDuration {
	width: 70px;
	height: 100%;
	line-height 38px;
	text-align: center;
	padding-top: 10px;
	z-index: 2;
	top: 0;
	float: left;
}

.audioTimeDuration {
}

.audioTimeBar {
	height: 21px;
	width: 278px;
	background-color: #444;
	cursor: pointer;
	z-index: 1;
	top: 50px;
	right: 110px;
	left: 110px;
	margin-top: 15px;
	float: left;
	border-radius: 11px;
}

.audioTimeBarPlayed {
	width: 0;
	background: #80adca;
	z-index: 2;
	height:21px;
	border-radius: 11px;
}


.audioSeek {
	width: 55px;
	padding-left: 6px;
}

.audioMix {
	width: 45px;
}

.audioLoop {
	width: 35px;
}

.audioVolume {
	width: 41px;
	height: 100%;
	cursor: pointer;
	z-index 2;
	top 0;
	right 0;
	float: left;
	padding-left: 6px;
}

.audioVolumeBar {
	visibility: hidden;
	width: 45px;
	height: 20px;
	background-color: #fad7fc;
	border-radius: 2px;
	border: 1px solid #222;
	padding-top: 7px;
	padding-left: 5px;
	position: absolute;
	right: -1px;
	top: 100%;
	z-index:1;
}

/* playlist -----------------------------------------------------------------*/

.audioPlaylist {
	width: 658px;
	margin: 0px, 10px;
	margin-bottom: 5px;
	color: #FFF;
	text-shadow: 1px 1px 0 #000;
	border: 1px solid #222;
	position: relative;
	z-index: 1;
	background-color: #fad7fc;
	border-radius: 10px;
}

.audioPlLegend {
	height: 25px;
	margin-bottom: 5px;
	border-bottom: 2px dotted #222;
}

.audioPlFooter {
	height: 25px;
	margin-top:4px;
	margin-bottom: 5px;
	border-top: 2px dotted #222;
	padding-top: 2px;
}

.audioPlSelect {
	margin-top: 3px;
	height: 30px;
	border-radius: 10px;
	padding-top: 4px;
}

.audioPlSelect:hover {
	background-color: #999;
	transition: 0.1s;
}

.audioPlSelect:active {
	background-color: #FFF;
	transition: 0.1s;
}

.audioPlSelBtn {
	width: 40px;
	text-align: center;
}

.audioPlSelTitle {
	width: 419px;
}

.audioPlSelTime {
	width: 99px;
}

.audioPlSelSize {
	width: 100px;
}

/* misc ---------------------------------------------------------------------*/


/* Style the links inside the navigation bar */
.topnav {
	a {
		color: #00fcc1;
		text-align: center;
		margin: 15px;
		text-decoration: none;
		font-size: 17px;
	}
}


/* Add a color to the active/current link */
/*.topnav a.active {
  background-color: black;
  color: #cc33ff;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff59;
  font-family: "Questrial", sans-serif;
  font-size: 24px;
  text-shadow: 3px 3px #000;
  letter-spacing: 7px;
}

hr{
  border-top: 1px double #000;
  width: 700px;
}

span.b {
  padding: 3px;
  background-color: #dd007d;
  display: inline-block;
  text-align: left;
  color: #00fcc1;
}

span.c {
  display: inline-block;
  text-align: left;
  color: white;
}

img{
  border-radius: 4px;
  margin: 4px;
}
/*