body {
    margin: 0 auto;
    width: 100%;
    padding: 0;
    max-width: 30rem;
    color: #eee;
    position:relative
}

p {
    line-height: 1.5;
    margin:0
}

h2, h3 {
    margin:0
}

.icon {
    width: 1.5rem;
    height:1.5rem
}

a {
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:none
}

#modal {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    transition: top .2s ease-out, opacity .1s ease-out;
    transform:translateZ(0)
}

#close {
    align-self: end;
    padding: 1rem;
    cursor: pointer;
    line-height:0
}

#keyView, #copyView, #qrView {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
    text-align:center
}

#keyView p, #copyView p, #qrView p {
    margin:2rem
}

#copyURL, #dlKey {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    padding: 1rem 1.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    box-sizing:border-box
}

#copyURL span, #dlKey span {
    margin-left:.5rem
}

#qrView h3 {
    margin:2rem 2rem 0
}

#qrView p {
    margin:.5rem 2rem 0
}

#qr {
    margin: 2rem;
    padding: 2rem;
    background: #fff;
    border-radius:.5rem
}

header {
    display: flex;
    justify-content: flex-start;
    flex-direction:column
}

.headerImgC {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    overflow:hidden
}

#cover {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 20rem;
    -o-object-position: top center;
    object-position: top center;
    -o-object-fit: cover;
    object-fit:cover
}

#logo {
    max-height: 6rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self:center
}

#topActions {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items:flex-start
}

#topActions > div {
    display:flex
}

#topActions a {
    padding: 1rem;
    cursor: pointer;
    line-height:0
}

main {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align:center
}

#profilePhoto {
    width: 10rem;
    height: 10rem;
    border-radius: .5rem;
    box-sizing: content-box;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top:-6rem
}

#info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    line-height: 1.25;
    word-break:break-word
}

.name {
    font-weight: bold;
    font-size: 1.5rem;
    margin:0
}

.name2 {
    font-weight: bold;
    font-size: 1.3rem;
    margin:0
}

.name3 {
    font-weight: bold;
    font-size: 1.0rem;
    margin:0.2rem
}

.pronouns {
    display: block;
    font-size: .9rem;
    opacity: .8;
    font-weight: normal;
    margin:0 0 .5rem
}

.bizname {
    font-size: 0.75rem;
    margin: .5rem 0 0 0;
    opacity:.8
}

.bizaddr {
    font-size: .8rem;
    opacity:.6
}

.sub, .textC {
    font-size: 1rem;
    white-space: pre-line;
    line-height:1.5
}

.sub {
    font-size: .8rem;
    margin: .5rem 0 0;
    opacity:.8
}

.sub2 {
    font-size: .8rem;
    margin: .5rem 0 0;
    opacity:.8
}

.textC {
    margin:1rem
}

#cta {
    display: flex;
    align-items: center;
    border-radius: .5rem;
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    line-height: 0;
    width: 100%;
    justify-content: center;
    box-sizing:border-box
}

#cta .icon {
    margin-right:.5rem
}

#cta p {
    margin:0
}

.actions {
    width: 100%;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content:center
}

.actionsC {
    width:33.33%
}

.actionBtn {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center
}

.actionBtn a {
    border-radius: .5rem;
    padding: 1rem;
    line-height:0
}

.actionBtn p {
    margin: .5rem 0 0;
    font-size:.9rem
}

.secBtn {
    padding:1rem
}

.featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2rem 0 0;
    width:100%
}

.section {
    font-weight: bold;
    text-align: center;
    font-size: 1.3rem;
    padding:1rem 0
}

.media {
    overflow: hidden;
    border-radius: .5rem;
    margin-top:1rem
}

.media img {
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width:100%
}

.embedded {
    position: relative;
    padding-top:100%
}

.embedded iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.music, .video {
    width:100%
}

.mediaC {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center
}

video {
    width:100%
}

.controls {
    padding: 1rem;
    font-size: .9rem;
    text-align: center;
    width: 100%;
    box-sizing:border-box
}

.pCtrl, .docDl {
    display: none;
    flex-direction: column;
    align-items: center;
    width:100%
}

.docDl {
    display:flex
}

.seekBar {
    width: 100%;
    height: .5rem;
    margin: 1.5rem 0 .5rem;
    border-radius: .5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor:pointer
}

.playPause, .dlBtn {
    margin: 1rem 0 .5rem;
    padding: 1rem;
    border-radius: .5rem;
    line-height: 0;
    cursor:pointer
}

.pause {
    display:none
}

.title {
    font-size: 1rem;
    font-weight: bold;
    margin:0
}

.prodInfo .sub {
    margin:-1rem 0 0
}

.price {
    margin: 1rem 0 0;
    font-size: 1rem;
    font-weight:bold
}

.label {
    display: inline-block;
    font-size: 1rem;
    margin: 1rem 0 .5rem;
    border-radius: .5rem;
    letter-spacing: 1px;
    padding:1rem 1.5rem
}

.label p {
    margin:0
}

footer {
    padding: 4rem 1rem 2rem;
    font-size: .9rem;
    text-align:center
}

footer a {
    text-decoration: underline;
    color: inherit
}
/* ===========================
   Aurora Media Theme
   Paste at the END of your existing CSS
   =========================== */

:root {
    --bg1: #07111f;
    --bg2: #0b1630;
    --accent: #7c3aed;
    --accent2: #06b6d4;
    --accent3: #f97316;
    --surface: rgba(8, 15, 31, .62);
    --surface-light: rgba(255, 255, 255, .08);
    --border: rgba(255, 255, 255, .12);
    --text: #f8fafc;
    --text2: #cbd5e1;
    --text3: #94a3b8;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text);
    font-family: Inter, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    background:
    radial-gradient(circle at top left, rgba(124, 58, 237, .22), transparent 28%), radial-gradient(circle at top right, rgba(6, 182, 212, .18), transparent 26%), radial-gradient(circle at bottom right, rgba(249, 115, 22, .10), transparent 24%), linear-gradient(135deg, var(--bg1), var(--bg2));
    min-height: 100vh;
}

/* Typography */
h2, h3, .name, .section {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.name {
    font-size: 2rem;
}

.section {
    font-size: 1.45rem;
}

.pronouns, .bizname, .sub, .controls {
    color: var(--text2);
}

.bizaddr {
    color: var(--text3);
}

.textC, p {
    color: var(--text2);
}

/* Glass Cards */
main, .featured, #modal {
    background: var(--surface);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow:
    0 24px 80px rgba(0, 0, 0, .38), 0 0 0 1px rgba(124, 58, 237, .15);
    margin: 1rem;
}

/* Cover */
#cover {
    border-radius: 24px 24px 0 0;
}

/* Profile Photo */
#profilePhoto {
    border-radius: 24px;
    border: 3px solid rgba(255, 255, 255, .15);
    box-shadow:
    0 0 0 1px rgba(124, 58, 237, .22), 0 18px 50px rgba(0, 0, 0, .45);
}

/* Buttons */
#cta, #copyURL, #dlKey, .playPause, .dlBtn, .actionBtn a {
    border: none;
    border-radius: 18px;
    color: #07111f;
    font-weight: 700;
    background-image: linear-gradient( 90deg, #22d3ee, #a78bfa, #fb923c
    );
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transition: all .2s ease;
}

#cta:hover, #copyURL:hover, #dlKey:hover, .playPause:hover, .dlBtn:hover, .actionBtn a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
    0 0 0 1px rgba(124, 58, 237, .25), 0 18px 42px rgba(6, 182, 212, .18);
}

#cta p, #copyURL span, #dlKey span {
    color: #ffffff;
    font-weight: 700;
}

/* Secondary Buttons */
.secBtn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    border-radius: 18px;
    transition: .2s ease;
}

.secBtn:hover {
    background: rgba(255, 255, 255, .14);
}

/* Action Grid */
.actionBtn p {
    color: var(--text2);
}

/* Media */
.media {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Audio Controls */
.controls {
    background: rgba(255, 255, 255, .04);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Progress Bar */
.seekBar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
}

/* Labels */
.label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 58, 237, .35);
    background: rgba(124, 58, 237, .18);
    color: #e9d5ff;
    font-weight: 700;
    letter-spacing: .08em;
}

/* Links */
a {
    color: #fff;
    transition: color .2s ease;
}

a:hover {
    color: #22d3ee;
}

/* Footer */
footer {
    color: var(--text3);
}

footer a {
    color: #22d3ee;
}

footer a:hover {
    color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #07111f;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(#22d3ee, #7c3aed, #fb923c);
    border-radius: 999px;
}

/* Selection */
::selection {
    background: rgba(34, 211, 238, .35);
    color: #fff;
}
/* ===== Text Improvements ===== */

body{
    color:#f8fafc;
}

/* Main headings */
h1,
h2,
h3,
.name,
.section,
.title{
    color:#ffffff;
    font-weight:800;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Regular body text */
p,
.textC{
    color:#e2e8f0;
    line-height:1.65;
}

/* Secondary text */
.sub,
.pronouns,
.bizname,
.controls,
.actionBtn p{
    color:#cbd5e1;
}

/* Small/meta text */
.bizaddr,
footer,
.prodInfo .sub{
    color:#94a3b8;
}

/* Prices */
.price{
    color:#ffffff;
    font-weight:700;
}

/* Keep buttons readable */
#cta,
#copyURL,
#dlKey,
.playPause,
.dlBtn,
.actionBtn a{
    color:#f5e9ff;
}

#cta *,
#copyURL *,
#dlKey *,
.playPause *,
.dlBtn *,
.actionBtn a *{
    color:#f5e9ff !important;
}

/* Links outside of buttons */
main a:not(#cta),
.featured a:not(.actionBtn a),
footer a{
    color:#67e8f9;
}

main a:not(#cta):hover,
.featured a:not(.actionBtn a):hover,
footer a:hover{
    color:#ffffff;
}

/* Labels */
.label{
    color:#f5e9ff;
}

/* Make icons inherit text color */
.icon{
    color:inherit;
    fill:currentColor;
}
/* ===== Aurora Theme Adjustments ===== */

/* Background */
body{
    background:#03023c !important;
    color:#dbe4f0;
}

/* Main content panels */
main,
.featured,
#modal{
    background:rgba(5,8,45,.88) !important;
    border:1px solid rgba(255,255,255,.08);
}

/* Headings & Names */
h1,
h2,
h3,
.name,
.section,
.title{
    color:#ffffff !important;
    font-weight:800;
    text-shadow:none;
}
/* Headings & Names */
h1,
h2,
h3,
.name2,
.section,
.title{
    color:#ffffff !important;
    font-weight:800;
    text-shadow:none;
}


/* Headings & Names */
h1,
h2,
h3,
.name3,
.section,
.title{
    color:#ffffff !important;
    font-weight:800;
    text-shadow:none;
}

/* Regular text */
p,
.textC{
    color:#b7b0b0 !important;
}

/* Secondary text */
.sub,
.pronouns,
.bizname,
.controls,
.actionBtn p{
    color:#dadcde !important;
}

/* Small text */
.bizaddr,
footer,
.prodInfo .sub{
    color:#ebebeb !important;
}

/* Prices */
.price{
    color:#ffffff !important;
}

/* Links */
a:not(.actionBtn a):not(#cta){
    color:#67d9ff;
}

a:not(.actionBtn a):not(#cta):hover{
    color:#9be8ff;
}