@font-face {
    font-family: 'Roboto Mono';
    src: url('https://bynos.com/fonts/Roboto_Mono/RobotoMono-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('https://bynos.com/fonts/Roboto_Mono/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --header-bg: #fff;
    --header-bg-darker: #d3d3d3;
    --header-color: #212529;
    --hover-color: #d33;
    --font: 'Roboto Mono', sans-serif;
    --color: #555;
    --bg-color: #f5f5f5;
    --card: #ffffff;
    --font: 'Roboto Mono', sans-serif;
    --bg-color-5: hsl(193, 11%, 60%);
    --bg-color-4: hsl(214, 22%, 92%);
    --bg-color-3: hsl(200, 18%, 99%);
    --bg-color-2: hsl(206, 5%, 91%);
    --bg-color-1: hsl(207, 5%, 85%);
    --bg-color-0: hsl(210, 3%, 70%);
    --color-light: hsl(200, 74%, 32%);
    --text: hsl(210, 7%, 40%);

    --single-panel-width: 760px;

    --success: #28a745;
    --warning: #ffc107;
    --error: #dc3545;
    --info: #17a2b8;
    --light: #f8f9fa;
    --dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body {
    background-color: var(--bg-color-2);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;

    display: grid;
    grid-template-rows: auto 1fr auto;
}
body > * {
    flex-grow: 0;
}
body > content {
    flex-grow: 1;
}

body[data-theme="dark"] {
    --header-bg: #212529;
    --header-bg-darker: #0d0e0f;
    --header-color: #d2e9e7;
    --hover-color: #f8915b;
    --color: #2f878c;
    --card: #111111;
    --font: 'Roboto Mono', sans-serif;
    --bg-color: hsl(200, 9%, 20%);
    --bg-color-0: hsl(193, 11%, 17%);
    --bg-color-1: hsl(214, 22%, 19%);
    --bg-color-2: hsl(200, 11%, 22%);
    --bg-color-3: hsl(206, 5%, 30%);
    --bg-color-4: hsl(207, 5%, 44%);
    --bg-color-5: hsl(210, 3%, 55%);
    --color-light: #7fe5e7;
    --text: #c2c6ca;
}

body[data-theme="leaf"] {
    --header-bg: hsl(128, 20%, 16%);
    --header-bg-darker: #18301b;
    --header-color: #647c48;
    --hover-color: #cc7803;
    --bg-color: #89aa8c;
    --color: #31251c;
    --card: #c5dbc8;
    --font: 'Bitter', sans-serif;
    --bg-color-5: hsl(127, 11%, 98%);
    --bg-color-4: hsl(127, 27%, 81%);
    --bg-color-3: hsl(127, 25%, 78%);
    --bg-color-2: hsl(127, 15%, 70%);
    --bg-color-1: hsl(127, 15%, 56%);
    --bg-color-0: hsl(127, 13%, 45%);
    --color-light: hsl(26, 45%, 34%);
    --text: #31251c;
}
body[data-theme="vr"] {
    --header-bg: #0a0109;
    --header-bg-darker: #18301b;
    --header-color: #00fffb;
    --hover-color: hsl(310, 100%, 70%);
    --bg-color: #212121;
    --color: #bafeff;
    --card: #111111;
    --font: 'Roboto Mono', sans-serif;
    --bg-color-0: hsl(193, 11%, 5%);
    --bg-color-1: hsl(214, 22%, 8%);
    --bg-color-2: hsl(200, 18%, 10%);
    --bg-color-3: hsl(200, 40%, 25%);
    --bg-color-4: hsl(207, 5%, 18%);
    --bg-color-5: hsl(193, 26%, 45%);
    --color-light: hsl(310, 74%, 70%);
    --text: hsl(180, 80%, 70%);
}

body[data-theme="spa"] {
    --header-bg: #f1e8d6;
    --header-bg-darker: hsl(30, 40%, 90%);
    --header-color: #84765e;
    --hover-color: rgb(82, 105, 121);
    --color: #996a5e;
    --bg-color: #e3e1dd;
    --card: #f1e8d6;
    --font: 'Bitter', sans-serif;
    --bg-color-5: hsl(193, 11%, 66%);
    --bg-color-4: hsl(214, 22%, 92%);
    --bg-color-3: hsl(200, 18%, 99%);
    --bg-color-2: hsl(206, 5%, 91%);
    --bg-color-1: hsl(207, 25%, 55%);
    --bg-color-0: hsl(210, 3%, 70%);
    --color-light: hsl(200, 74%, 32%);
    --text: hsl(210, 7%, 40%);
}

.colourful *,
.colourful {
    fill: var(--hover-color);
    color: var(--hover-color);
}

.hover_o {
    display: inline-block;
    transform-origin: center;
    transform: translateY(-0.25em);
    border-bottom: 1px solid var(--text);
}

body[data-theme="vr"]  div.container {
    position: relative;
}
body[data-theme="vr"]  div.container::before {
    content: '';
    position: absolute;
    border-radius: 8px;
    top: -5px; left: -5px; right: 0px; bottom: 0;
    box-shadow: inset 25px 25px 50px rgba(255, 0, 0, 0.4);
    mix-blend-mode: color-dodge;
}
body[data-theme="vr"]  div.container::after {
    content: '';
    position: absolute;
    border-radius: 8px;
    top: 0; left: 0px; right: -5px; bottom: -5px;
    box-shadow: inset -25px -25px 50px rgba(0, 255, 0, 0.4);
    mix-blend-mode:color-dodge;
}
body[data-theme="vr"]  div.container.full-width::before {
    top: -5px; left: 0px; right: 0px; bottom: 0px;
    box-shadow: inset 0px 25px 50px rgba(255, 0, 0, 0.4);
}
body[data-theme="vr"]  div.container.full-width::after {
    top: 0px; left: 0px; right: 0px; bottom: -5px;
    box-shadow: inset 0px -25px 50px rgba(0, 255, 0, 0.4);
}


h1, h2, h3, h4, h5, h6, p, a, button, li, span {
    font-family: var(--font);
}

footer {
    position: relative;
    color: var(--header-color);
    background-color: var(--header-bg);
    border-top: 1px solid var(--header-bg-darker);
    padding: 1.5rem 1.5rem;
    z-index: 1;
}
footer > div {
    display: flex;
    justify-content: space-between;
}

footer .footer-B img {
    object-fit: contain;
    height: 3rem;
}
header {
    position: relative;
    color: var(--header-color);
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-bg-darker);
    padding: 0.75rem 1.5rem 0.25rem 1.5rem;
    display: grid;
    grid-template-columns: 150px 1fr 100px 150px;
    z-index: 100;
}

header #menu, header #cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
}

header a {
    color: var(--header-color);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

header a:hover {
    color: var(--hover-color);
}

header #logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

header #logo a {
    display: grid;
    grid-template-areas: 'logo';
    /* new stacking context */
    position: relative; 
    color: var(--header-color);
}
header #logo svg {
    position: relative;
    grid-area: logo;
    width: 100%;
    max-width: 180px;
}

span[data-icon] svg {
    width: 100%;
    object-fit: contain;
    fill: inherit;
}

header .profile-name {
    position: relative;
}
header .profile-name p {
    display: block;
    position: relative;
    z-index: 20;
}
header .profile-name[data-open='false'] .profile_info {
    opacity: 0;
    pointer-events: none;
}
header .profile-name[data-open='true'] .profile_info {
    opacity: 1;
    pointer-events: all;
}

header .profile-name .profile_info {
    transition: 300ms ease-in-out;
    z-index: 2;
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 4px;

    width: 116px;
    height: 28px;
    padding: 36px 8px 4px 8px;
    border: 1px solid var(--header-bg);
}
header .profile-name .profile_info button {
    background: var(--header-bg-darker);
    border: 1px solid var(--hover-color);
    width: 100%;
    padding: 4px 8px;
    color: var(--hover-color);
}

header + nav {
    display: flex;
    justify-content: flex-start;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-bg-darker);
    padding: 0rem 1rem;
    gap: 0;
}

header + nav .nav-list {
    display: contents;
}
header + nav button {
    border: 1px solid transparent;
    background: none;
    padding: 8px 12px;
    color: var(--header-color);
    font-size: 1rem;
    margin: 0;
    transition: color 200ms linear, border 200ms linear;
}
header + nav button:hover {
    color: var(--hover-color);
    border: 1px solid var(--hover-color);
}

/* HEADER LOGO */

#B_BORDER path { 
    fill: var(--header-color);
    z-index: 1;
}

#BYN_S_outline path,
#O_outline path { 
    fill: var(--header-bg); 
    z-index: 2;
}


#BYN_S path,
#O path { 
    fill: var(--header-color); 
    z-index: 3;
}

#B_BORDER { transition: 200ms linear; }
#O_outline { transition: 200ms linear; }
#O { transition: 200ms ease-in-out;}

#logo a:hover #B_BORDER { z-index: 1; }
#logo a:hover #BYN_S_outline,
#logo a:hover #O_outline,
#logo a:hover #O { z-index: 2; }
#logo a:hover #BYN_S { z-index: 3; }
#logo a:hover #BYN_S path,
#logo a:hover #O path { z-index: 4; }

#logo a:hover #BYN_S_outline,
#logo a:hover #BYN_S {
    transform: translateY(0px) scale(1);
}

#logo a:hover #O_outline,
#logo a:hover #O {
    transform: translateY(-10px);
}
#logo a:hover #B_BORDER {
    transform: scale(1.01);
}

#logo a:hover #BYN__S_Line {
    fill: var(--hover-color);
}

[data-promo="seen"] {
    height: 100px !important;
    overflow: hidden;
}
[data-promo="seen"] .hero-panel {
    background-position: center;
    background-size: 50%;
    overflow-y: hidden;
}


[data-promo="seen"] .hero-panel .panel-image {
    display: flex;
    background-color: red;
    /* background-image: url('../music/img/Tapestry-Desktop.jpg'); */
    background-image: url('../img/Echo-Albums-Poster-Background.jpg');
    background-size: cover;
    background-position: center -50px;
    width: 100%;
    height: 100%;
    grid-column: 3 / 4;
    grid-row: 1 / -1;
}
[data-promo] {
    position: relative;
}

[data-promo] .close-promo {
    position: absolute;
    grid-column: content-end / full-width-end;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    color: var(--header-color);
    transition: 200ms linear;
}
[data-promo] .close-promo svg { fill: var(--header-color); }
[data-promo] .close-promo:hover svg { fill: var(--hover-color); }
[data-promo] .close-promo:hover { color: var(--hover-color);}

[data-promo="seen"] .close-promo [data-icon="window_close"] {
    display: none;
}
[data-promo=""] .close-promo [data-icon="eye"] {
    display: none;
}
[data-promo="seen"] .close-promo [data-icon="eye"] {
    display: block;
}

@keyframes bouncing {
    0%, 100% { transform: translateY(0); }
    3% { transform: translateY(-4px); }
    7% { transform: translateY(0px); }
}

.bouncing {
    display: inline-block;
    transform-origin: center;
    animation: bouncing 2.5s ease-out infinite;
}

#modes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 35px;
    position: relative;
    margin: 0 auto;
}

.choose-icons {
    display: block;
    width: 100%;
    height: 35px;
}


#modes > .choose-mode {
    width: 39px;
    padding: 6px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#modes:hover > .choose-mode:not(:nth-child(1)) {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-10px);
}
#modes .choose-mode:not(:nth-child(1)) {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0px);
    position: absolute;
    top: 60px;
    background-color: var(--bg-color);
    border-radius: 20px;
    border: 4px solid var(--header-bg);
}


#modes .choose-mode:not(:nth-child(1)) svg {
    background: var(--header-bg);
    aspect-ratio: 1/1;
    border-radius: 50%;
}

#modes svg {
    height: 25px;
    padding: 4px;
    fill: var(--header-color);
}
#modes .choose-icon svg { fill: var(--header-color); }
#modes .choose-icon:hover svg { fill: var(--hover-color); }



#theme-select {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 24px;
    background: none;
    border: 0;
    margin: auto 0;
    color: var(--header-color);
}

#theme-select:focus-within { outline : none; }





/* Type Styles */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1em;
}

.container > div > h1 {
    font-weight: 300;
    color: var(--color-light);
}

p {
    font-family: var(--font);
    margin: 0 0 2rem 0;
    padding: 0;
    line-height: 1.7;
}
p:last-child { margin: 0 0 2rem 0; }

a {
    text-decoration: none;
    color: var(--hover-color);
    border-bottom: 1px dotted transparent;
    padding-bottom: 2px;
    cursor: pointer;
}
p a:hover {
    border-bottom: 1px dotted var(--hover-color);
}

.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--hover-color);
    margin-top: 1rem;
    transition: 200ms linear;
}

.button:hover {
    color: var(--header-bg);
    border-color: var(--header-color);
    box-shadow: 
    inset 0 0 150px var(--hover-color),
    0 0 50px var(--header-color);
}
.button-transparent {
    background-color: transparent;;
}

/*  BOX MODEL  */


content {
    display: grid;
    grid-template-columns: 
    [full-width-start] 
    minmax(1rem, 1fr)
    [content-start] 
    min(100% - 2rem, 69.375rem) 
    [content-end] 
    minmax(1rem, 1fr) 
    [full-width-end];

}

content > * {
    grid-column: content;
    margin: 2rem 0;
    padding: 2rem 0rem;
}


.container {
    border-radius: 9px;
    box-shadow: 0 0 12px var(--bg-color-1),  inset 0 50px 100px var(--bg-color-2);
    box-sizing: border-box;
    background-color: var(--bg-color-3);
    flex-direction: column;
    border: 1px solid var(--bg-color-3);
    border-left: 3px solid var(--bg-color-1);
    border-right: 3px solid var(--bg-color-1);
    padding: 2rem 4rem;
}

content > .full-width {
    grid-column: full-width;
    width: 100%;
    max-width: 100%;
    margin: 0rem 0rem;
    border-radius: 0px;
    box-shadow: inset 0 0 100px -40px var(--bg-color-2);
    display: grid;
    grid-template-columns: subgrid;
    border: 0px solid var(--bg-color-3);
}
content > .full-width > * {
    grid-column: content;
    margin: 0 4rem;
}

.centered {
    max-width: var(--single-panel-width);

    width: clamp(300px, 90%, var(--single-panel-width));
    margin: 0 auto;
}
main + content, content + content {
    margin-top: 4rem;
}


main .hero-panel {
    background-image: url('../img/Echo-Albums-Poster-Background.jpg');
    background-size: cover;
    background-position: top right;
    /* width: 100%; */
    max-width: 100%;
    /* aspect-ratio: 16/9; */
    display: grid;
    grid-template-columns: 1fr minmax(300px, 400px) 4fr;
    grid-template-rows: 6rem auto 6rem;
    transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
    overflow: hidden;
}
@media (min-width: 1300px) {
    main .hero-panel {
        grid-template-rows: 9rem 300px 9rem;
    }
}
@media (min-width: 1800px) {
    main .hero-panel {
        grid-template-rows: 12rem 300px 12rem;
    }
}
@media (max-width: 900px) {
    main .hero-panel {
        grid-template-columns: 1rem minmax(250px, 400px) 1fr;
    }
    main .hero-panel > * {
        margin: 0 2rem;
    }
}
@media (max-width: 760px) {
    main .hero-panel {
        grid-template-columns: 0 minmax(200px, 300px) 1fr;
    }
    main .hero-panel > * {
        margin: 0 1rem;
    }
}

main[data-promo="seen"] > .full-width > * {
    margin: 0;
}

main[data-promo="seen"] > .full-width > * {
    grid-template-rows: 0 auto 0;
    grid-template-columns: 1fr 1fr 2fr;
}
main .panel-text {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: var(--bg-color-3);
    padding: 1rem;
}
main[data-promo="seen"] .panel-text {
    grid-column: 1 / 3;
    background: var(--bg-color-3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 1rem;
}
main[data-promo="seen"] .panel-text h1 {
    display: none;
}
main[data-promo="seen"] .panel-text p,
main[data-promo="seen"] .panel-text a {
    margin: 0;
}


/* User Log in form */

[data-loginformmode="closed"] #login-close,
[data-loginformmode="closed"] #registerForm,
[data-loginformmode="login"] #registerForm,
[data-loginformmode="closed"] #loginForm,
[data-loginformmode="register"] #loginForm {
    display: none;
}
[data-loginformmode="closed"] #login-closed {
    display: flex;
}
[data-loginformmode="login"] #login-close,
[data-loginformmode="login"] #loginForm {
    display: flex;
}
[data-loginformmode="register"] #login-close,
[data-loginformmode="register"] #registerForm {
    display: flex;
}

#loginForm, #registerForm {
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: column;
    gap: 0.5rem;

    background-color: var(--bg-color-3);
    padding: 1rem;

    border-radius: 0 0 0 9px;
    box-shadow: var(--bg-color-1) 0 0 12px;
}
#loginForm input, #registerForm input {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}
#loginForm button, #registerForm button {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    background-color: var(--header-bg);
    color: var(--header-color);
    border: 1px solid var(--header-bg);
    transition: 200ms linear;
    cursor: pointer;
}
#loginForm button:hover, #registerForm button:hover {
    background-color: var(--header-color);
    color: var(--header-bg);
    border: 1px solid var(--header-color);
}

#cta > div a p {
    display: block;
    font-size: 0.8rem;
}
#cta > div a span {
    display: block;
    font-size: 0.8rem;
}



/* user logged in statuses */

body[data-user="1"] header {
    grid-template-columns: 150px 1fr 150px;
}

#loginForm.hidden { display: none; }
body[data-user="1"] #cta { display: none; }
body[data-user="1"] #loginForm { display: none; }



.square {
    padding: 50px;
    width: 50px;
}
.square:nth-child(1) { background-color: var(--bg-color-0);}
.square:nth-child(2) { background-color: var(--bg-color-1);}
.square:nth-child(3) { background-color: var(--bg-color-2);}
.square:nth-child(4) { background-color: var(--bg-color-3);}
.square:nth-child(5) { background-color: var(--bg-color-4);}
.square:nth-child(6) { background-color: var(--bg-color-5);}


main section {
    padding: 2rem 3rem;
}

article {
    width: clamp(300px, 90%, 700px);
    margin: 0 auto;
    padding: 2rem 0;
}
article + hr {
    border: 0;
    height: 1px;
    background-color: var(--header-bg-darker);
    margin: 0 0 2rem 0;
}

article h2 {
    font-weight: 500;
}
article p + a {
    margin-top: 1rem;
    display: inline-block;
}

img.album-image {
    max-width: 100%;
    width: 300px;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 9px;
    box-shadow: 0 0 12px var(--bg-color-1),  inset 0 50px 100px var(--bg-color-2);
    float: right;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

p > img.album-image {
    margin-left: 1.5rem;
}