@font-face {
    font-family: 'Redaction';
    src: url("../assets/fonts/Redaction-Regular.woff2") format(woff2);
}

@font-face {
    font-family: 'Redaction';
    font-style: italic;
    src: url("../assets/fonts/Redaction-Italic.woff2") format(woff2);
}


body {
    background: #0e1716;
    color: #cab99e;
    font-family: 'Redaction';
    font-size: 18px;
    min-height:100vh;
}

a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */  
    border-bottom: 1px solid #cab99e;
}
a:hover {
    color: #ece0cd; /* blue colors for links too */
    text-decoration: inherit; /* no underline */  
    border-bottom: 1px solid #ece0cd;
}

a.btn {
    color:#0e1716;
    display: inline-block;
    background:#cab99e;
    box-sizing: border-box;
    padding:20px;
    border-radius:40px;
    margin-top:10px;
}

.wrapper {
    max-width:1180px;
    margin: 0 auto;
}

header {
    border-bottom: solid 2px #cab99e;
    padding-top: 80px;
    padding-bottom: 40px;
    position: fixed;
    z-index: 200;
    width:100%;
    background: #0e1716;
}

.header-content {
    display: flex;
    justify-content: space-between;
    position:relative;
    box-sizing: border-box;
}


h2, .card-deck li p {
    font-size:2em;
    margin-bottom: 1.3rem;
}

h3 {
    font-size:1.8rem;
    margin-bottom: 1.3rem;
}

h4 {
    font-weight: bolder;
    margin-bottom: 1.3rem;
}

p {
    line-height: 1.3em;
    margin-bottom: 1.3rem;
}

audio, .player {
    margin-bottom: 1.3em;
}

img {
    width:100%;
    margin-bottom: 1.3rem;
}

.nav__item--cards .nav__nested{
    display: none;
    position: absolute;
    background : #0e1716;
}
.nav__item--cards:hover .nav__nested{
    display: block;
}
.nav__item--cards > span::after {
    content:'▼';
    font-size: 0.6em;
    vertical-align:baseline;
    margin-left: 0.6ch;
    display: inline-block;
    /* transform:rotateZ(0deg) translateY(0.0em); */
}
.nav__item--cards:hover > span::after {
    content:'▲';
    /* transform:rotateZ(180deg) translateY(0.0em); */
}

/* BURGER MENU */

.navBtn {
    position: absolute;
    z-index: 200;
    display: none;
    width: 30px;
    height: 30px;
    top: -15px;
    left: 20px;
    transition-duration: 0.5s;
}
.navBtn .icon-left {
    transition-duration: 0.5s;
    position: absolute;
    height: 3px;
    width: 15px;
    top: 15px;
    background-color: #cab99e;
    left: 0px;
}
.navBtn .icon-left:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #cab99e;
    content: "";
    top: -10px;
}
.navBtn .icon-left:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #cab99e;
    content: "";
    top: 10px;
}
.navBtn .icon-left:hover {
    cursor: pointer;
}
.navBtn .icon-right {
    transition-duration: 0.5s;
    position: absolute;
    height: 3px;
    width: 15px;
    top: 15px;
    background-color: #cab99e;
    left: 15px;
}
.navBtn .icon-right:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #cab99e;
    content: "";
    top: -10px;
}
.navBtn .icon-right:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 15px;
    height: 3px;
    background-color: #cab99e;
    content: "";
    top: 10px;
}
.navBtn.open .icon-left {
    transition-duration: 0.5s;
    background: transparent;
}
.navBtn.open .icon-left:before {
    transform: rotateZ(45deg) scaleX(1.4) translate(2px, 2px);
}
.navBtn.open .icon-left:after {
    transform: rotateZ(-45deg) scaleX(1.4) translate(2px, -2px);
}
.navBtn.open .icon-right {
    transition-duration: 0.5s;
    background: transparent;
}
.navBtn.open .icon-right:before {
    transform: rotateZ(-45deg) scaleX(1.4) translate(-2px, 2px);
}
.navBtn.open .icon-right:after {
    transform: rotateZ(45deg) scaleX(1.4) translate(-2px, -2px);
}

.nav__list {
    display: flex;
    justify-content: space-between;
    user-select: none;
}
 
.nav__item a {
    border-color:transparent;
}

.nav__item a:hover {
    border-color:#ece0cd;
}

.nav__item--cards span {
    cursor: pointer;

}

.nav__item--cards .nav__nested li {
    margin-top: 0.6rem;

}


.site-title {
    position:absolute;
    height: 7em;
    /* line-height: 11em; */
    width:100%;
    max-width:250px;
    left:50%;
    bottom: -1em;
    transform: translateX(-50%);
    text-indent:-100vw;
    background:url('../assets/mirror_arcana_logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none;
}

.nav__item {
    margin-right: 40px;
}

main {
    padding: 40px 0;
    padding-top:calc(8em + 40px);
}

.main--dl {
    text-align: center;
    min-height:66vh;
}

footer {
    /* background-color: #0A100E; */
    margin-top:40px;
    padding-bottom: 40px;
    color:#756444;
    font-size:0.85rem;
    text-align: center;
}

footer a {
    border-color:#756444;
}

footer p {
    margin-bottom: 0;
}

/* CARD DECK */

.intro__quote, .card__quote {
    font-size:1.3em;
    font-style: italic;
    margin-bottom: 1.3rem;
}

.intro__quote {
    /* text-align: center;
    max-width:960px; */
    margin-left: auto;
    margin-right: auto;
}

.card-deck ul {
    position:relative;
    min-height: calc(600px + 1.3rem);
    margin-bottom: 1.3em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* overflow:hidden; */
    max-width:calc(100% - 250px);
}

.card-deck li {
    height: 550px;
    width:300px;
}
.card-deck a {
    border-bottom: none;
    /* color: #cab99e; */
    color: inherit;
}
.card-deck li:nth-child(odd) {
    /* background:gray; */
}

.card-deck li img {
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: center bottom;
    margin-bottom: 1rem;
}

.card-deck li:last-child {
    /* flex-shrink:0; */
}


/****** CARD PAGE ******/

.artist__pic {
    position:relative;
    margin-left: auto;
    margin-right: auto;
}

.artist__pic img{
    height:200px;
    width:200px;
    border-radius: 50%;
    object-fit: cover;
}

.artist__pic::before {
    content :'';
    display: block;
    position:absolute;
    background-image: url('../assets/artist_frame.png');
    height:200px;
    width:200px;
}

.main--card .artist__details p {
    margin-bottom: 0;
}

/****** PLAYER STYLES ******/
.audio-player {
    border: 2px solid #cab99e;
    border-radius: 40px;
    line-height: 1.3em;
    padding:15px 20px;
    margin-bottom: 1.3em;
    display: none;
    user-select: none;
}

.audio-player .player-btn {
    height: 25px;
    width:25px;
    background-size: contain;
    flex-shrink:0;
    margin-right:10px;
    cursor:pointer;
}

.audio-player .play-button {
    background:url('../assets/play-btn.png');
    background-repeat: no-repeat;
    background-position: center;
}
.audio-player .pause-button {
    background:url('../assets/pause-btn.png');
    background-repeat: no-repeat;
    background-position: center;
}
.audio-player .repeat-button {
    background:url('../assets/repeat-btn.png');
    background-repeat: no-repeat;
    background-position: center;
    width:35px;
    opacity:0.4;
    background-size: contain;
}
.audio-player .prev-button {
    background:url('../assets/prev-btn.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.audio-player .next-button {
    background:url('../assets/next-btn.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left:10px;
}

.audio-player .playing-progress {
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex:1;
}
.audio-player .playing-progress .playing-bar{
    appearance :none;
    background: none;
    cursor: pointer;
    position: relative;
    flex:1;
    border:1px solid #cab99e;
    height:0px;
    width:100%;
    margin: 0 10px;
}
.audio-player .playing-progress .playing-bar-input{
    appearance :none;
    background: none;
    cursor: pointer;
    position: relative;
    top:0;
    left:0;
    flex:1;
    height:30px;
    width:100%;
    margin:0;
    transform:translateY(-50%);
}
/* Chrome, Edge, Safari, Opera */
.audio-player .playing-progress input[type="range" i]::-webkit-slider-thumb {
    appearance: none;
    height:10px;
    width:10px;
    background-color: #cab99e;
    border-radius: 10px;
    /* position:absolute;
    top:0;
    left: 0%;
    transform: translateY(-50%); */
 }
/* Firefox */
.audio-player .playing-progress input[type="range"]::-moz-range-thumb {
    appearance: none;
    height:10px;
    width:10px;
    background-color: #cab99e;
    border-radius: 10px;
    /* position:absolute;
    top:0;
    left: 0%; */
    /* transform: translateY(-50%); */
 }



/* .audio-player .playing-progress .playing-cursor{
    height:10px;
    width:10px;
    background-color: #cab99e;
    border-radius: 10px;
    position:absolute;
    top:0;
    left: 0%;
    transform: translateY(-50%);
} */
.playing-current-time,
.playing-total-time {
    width: 5ch;
    text-align: center;
}

.volume-btn {
    background:url('../assets/volume-btn.png');
    background-repeat: no-repeat;
    background-position: center;
    margin-left:10px;
    position: relative;
}

.volume-slider-ctn { 
    position: absolute;
    display:none;
    bottom:100%;
    right:15%;
    background-color: #0e1716;
    height:100px;
    padding:5px 0;
}

.volume-btn:hover .volume-slider-ctn {
    display:block;
}

.volume-slider {
    height:100px;
    -webkit-appearance: slider-vertical;
    width:20px;
}

/* ALBUM PAGE AUDIO PLAYER SPECIFICATIONS */
.album-player {
    border: 2px solid #cab99e;
    border-radius: 32px;
    box-sizing: content-box;
    position:relative;
    min-height:200px;
    display:flex;
    /* overflow: hidden; */
}
.album-player .audio-player {
    position:absolute;
    z-index: 3;
    top:-2px;
    left:-2px;
    width:calc(100% + 4px);
    box-sizing: border-box;
    background:#0e1716;
}
.album-player__cover {
    height:0%;
    flex-grow:0;
    background-image: url('../assets/Mirror_Arcana_Cover_Album.jpg');
    background-size:cover;
    overflow: hidden;
}

.album-player__cover::after {
    display: block;
    content: '';
    /* 16:9 aspect ratio */
    padding-bottom: 100%;
}
.album-player__tracklist--ctn {
    flex:1;
    overflow-y: scroll;
}
.album-player__tracklist {
    padding:30px 0px 20px;
    max-height:100%;
}
.album-player__tracklist .tracklist__song{
    scroll-margin-top: 60px;
    padding:0 30px 0 20px;
    cursor:pointer;
    margin-bottom:5px;
    line-height:1.5em;
    display:flex;
    justify-content: space-between;
    border-radius: 0.8em;
}
.album-player__tracklist .tracklist__song[data-playing="true"]{
    /* background:#cab99e;
    color:#0e1716; */
}
.album-player__tracklist .tracklist__song[data-playing="false"]{
    opacity:0.6;
}
.album-player__tracklist .tracklist__song[data-playing="false"]:hover{
    opacity:1;
    /* background:#cab99e;
    color:#0e1716; */
}
/* ALBUM PAGE */
.buy-album {
    margin-top:40px;
    text-align: center;
}


/* MODAL to play song from QRCode */
.play-song-modal {
    position: fixed;
    z-index: 500;
    top:50%;
    left:50%;
    background: #0e1716;
    transform: translate(-50%,-50%);
    width:100%;
    max-width:500px;
    padding:40px;
    padding-bottom: calc(40px + 1.3rem);
    box-sizing: border-box;
    border: 2px #cab99e solid;
}

.modal-title {
    font-size:1.8rem;
    margin-bottom: 1.3rem;
}

.play-song-modal .modal-btn {
    background:none;
    color: #cab99e;
    font-size:1rem;
    padding:20px;
    flex:1;
    border:none;
    border-top: 2px solid #cab99e;
    box-sizing: border-box;
}

.modal-btn-ctn {
    display:flex;
    justify-content: space-between;
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
}
.modal-btn.modal-btn-ok {
    background-color:#cab99e;
    color:#0e1716;
}

/* ARTISTS PAGE */

.main--artists .artist__details{
    margin-top:60px;
}

.main--artists .artist__content p {
    margin-bottom: 0;
}

/* LANGUAGE SWITCHER */
.switch-lang {
    cursor:pointer;
}
.switch-lang:hover {
    color: #ece0cd;
}

.lang-inactive {
    display:none;
}

/* NEWSLETTER FORM */

.newsletter-form{
    margin-top: 40px;
    background:#cab99e;
    color: #0e1716;
    padding:20px;
}
.newsletter-form h4{
    font-weight: bolder;
    font-size: 1.3em;
    margin-bottom: 0.3em;
}
.newsletter-form form div{
    background:none;
    color: #0e1716;
    padding:0;
    margin: 0;
}
.newsletter-form p{
    margin-bottom: 0;  
    /* font-size: 0.85rem; */
}
.newsletter-form p.inf-rgpd{
    font-size: 0.85rem;
}
.newsletter-form form input[type="email"]{
    max-width:100%;
    box-sizing: border-box;
}
.newsletter-form form div h4,
.newsletter-form form div span{
    color: #0e1716;
    display:none;
}

.newsletter-form form div .inf-rgpd{
    display:none;
}
.newsletter-form form div .inf-submit{
    text-align:center;
}
.newsletter-form form div .inf-submit input {
    color:#cab99e;
    background-color:#0e1716;
    box-sizing: border-box;
    padding:20px;
    border-radius:40px;
    margin-top:10px;
}

/* NEWSLETTER PAGES */
.main--newsletter {
    min-height: 60vh;
    text-align: center;
}

/* LEGAL NOTICE PAGE */
.main--legal ul {
    margin-left:20px;
    list-style:circle;
}

.main--legal ul li {
    margin-bottom: 1.3rem;
}
.main--legal .legal__footer {
    border-top : 1px solid #cab99e;
    padding-top: 10px;
    font-style: italic;
}
/* MEDIA QUERIES */

@media screen and (max-width: 1220px) {
    .wrapper {
        padding-left: 20px;
        padding-right:20px;
    }
}

@media screen and (min-width: 960px) {
    .nav__item--cards .nav__nested{
        padding: 0 1.3rem 1.3rem;
        margin-left: -1.3rem;
    }
    .card-deck li p {
        white-space: nowrap;
        display: none;
    }
    .card-deck li:hover p {
        display: block;
    }
    
    .card-deck li:not(:last-child):hover {
        margin-right:0px;
        flex-shrink: 0;
    }
    .card-deck li {
        margin-right:-250px;
        transition:0.5s;
    }
    .card-ctn {
        display: flex;    
    }
    
    .card-ctn>img {
        width:33%;
        height:auto;
        object-fit: contain;
        object-position: top;
        flex-shrink: 0;
    }
    .card__details {
        margin-left: 30px;
    }
    .main--artists .artist__details{
        display: flex;
    }
    .main--artists .artist__content{
        margin-left:20px;
    }
    .album-player {
        padding-top:25px;
    }
    .album-player__cover {
        width:40%;
        height:0%;
        flex-grow:0;
        border-bottom-left-radius: 30px;
    }
    
    .album-player__cover::after {
        display: block;
        content: '';
        /* 16:9 aspect ratio */
        padding-bottom: 100%;
    }
    .album-player__tracklist--ctn {
        position: absolute;
        top:40px;
        max-height: calc(100% - 40px);
        left: 40%;
        width:60%;
    }
    .newsletter-form {
        max-width:50%;
        margin: 60px auto 0;
    }
}

@media screen and (max-width: 959px) { 
    a:hover {
        color:#cab99e;
        border-color:#cab99e;
    }
    .nav__item a:hover {
        color:#cab99e;
        border-color:#cab99e;
    }
    .switch-lang:hover {
        color: #cab99e;
    }
    body {
        font-size: 16px;
    }
    .wrapper {
        padding-left:20px;
        padding-right:20px;
        box-sizing: border-box;
        max-width:70ch;
    }
    p, h2, h3 {
        text-align:center;
    }
    audio {
        width:100%;
    }
    /* .header-content {
        flex-direction: row-reverse;
    } */
    .nav__item {
        margin-right: 0px;
    }
    .nav__item--cards .nav__nested{ 
        position:static
    }
    .navBtn {
        display:block
    }
    .nav {
        position:fixed;
        background: #0e1716;
        width:100%;
        height:100vh;
        visibility: hidden;
        transition: 0.5s;
        top:calc(9em - 7px);
        left:-100%;
    }
    .nav .nav__list{
        flex-direction: column;
        text-align: center;
        overflow-y: auto;
        padding-top: 80px;
        padding-bottom: 80px;
        box-sizing: border-box;
        max-height: calc(100vh - 9em);
    }
    h2, .nav .nav__item {
        font-size:2.5em;
    }
    .nav .nav__item{
        margin-bottom:1em;
    }
    .nav .nav__nested {
        font-size: 1.8rem;
    }
    .navBtn.open + .nav {
        visibility: visible;
        left:0%;
    }
    .card-deck {
        margin-left: calc(min(-50vw + 35ch - 20px,-20px));
        margin-right: calc(min(-50vw + 35ch - 20px,-20px));
    }
    .card-deck ul {
        max-width:inherit;
        overflow-x: scroll;
        overflow-y: hidden;
        min-height: 650px;
        /* width:100vw; */
        /* padding:  0 20px 20px 20px; */
        /* padding-bottom:20px; */
        /* margin-right:-20px; */
        padding-right: calc(max(50vw - 35ch + 20px,20px));
        padding-left: calc(max(50vw - 35ch + 20px,20px));
    }
    .card-deck li {
        flex-shrink:0;
    }
    .card-deck li:not(:nth-child(0n+22)) {
        margin-right: 20px;
    }
    .card-deck li:last-child {
        display: none;
    }
    .artist__details{
        display: flex;
        flex-direction: column;
    }
    .audio-player .volume-btn {
        display:none;
    }
    .album-player {
        display:flex;
        flex-direction: column;
        overflow: hidden;
    }
    .album-player .album-player__cover {
        margin-bottom:-25px;
    }
    .album-player .audio-player{
        position:static;
        margin-left:-2px;
        margin-bottom:0;
    }
    .album-player .album-player__tracklist--ctn{
        position:static;
        max-height:50vh;
    }
    .album-player__tracklist {
        padding: 0px;
        padding: 10px 0;
    }
    .album-player__tracklist .tracklist__song {
        text-wrap: nowrap;
    }
    .album-player__tracklist .tracklist__songtitle {
        text-overflow:ellipsis;
        overflow: hidden;
    }
    .album-player__tracklist .tracklist__song  a{
        margin-left: 10px;
    }
    .album-player .audio-player .repeat-button {
        display:none;
    }
    .main--newsletter {
        min-height: 80vh;
    }
    .main--legal p{
        text-align:left;
    }
}

@media (hover: none) {
    .nav__item--cards .nav__nested {
      display: none !important;
    }
    .nav__item--active .nav__nested {
      display: block !important;
    }
    .nav__item--cards:hover > span::after {
        content:'▼';
    }
    .nav .nav__item--active > span::after {
        content:'▲';
    }
}