select#currency-select,select#currency-select option,select#currency-select optgroup{
background:var(--card-bg,var(--background)) !important;
color:var(--text-primary) !important;
border:none;
text-align:left !important;
}
select#currency-select{
display:block !important;
margin-left:0 !important;
margin-right:auto !important;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
*,
*::before,
*::after{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
margin:0;
padding:0;
background:#0a0a0a;
min-height:100%;
}
:root{
--primary-red:#ff1744;
--primary-red-dark:#d50000;
--canada-red:#ff0000;
--background:#0a0a0a;
--surface:#1a1a1a;
--surface-light:#2a2a2a;
--text-primary:#ffffff;
--text-secondary:#b0b0b0;
--text-muted:#666666;
--border:#333333;
--accent:#4fc3f7;
--success:#4caf50;
--warning:#ff9800;
--error:#f44336;
--shadow:rgba(0,0,0,0.3);
--gradient-bg:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%);
--card-bg:#0a0a0a;
--border-color:#333333;
--accent-color:#4fc3f7;
}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:var(--background);
color:var(--text-primary);
line-height:1.6;
overflow-x:hidden;
margin:0;
padding:0;
min-height:100vh;
}
.container{
max-width:1200px;
margin:0 auto;
padding:0 20px;
width:100%;
box-sizing:border-box;
}
.container main{
line-height:1.6;
color:var(--text-primary);
}
.container main h1{
font-size:2.5rem;
font-weight:700;
color:var(--text-secondary);
margin-bottom:1rem;
border-bottom:2px solid var(--primary-red);
padding-bottom:0.5rem;
}
.container main h2{
font-size:1.8rem;
font-weight:600;
color:var(--text-secondary);
margin-top:2.5rem;
margin-bottom:1rem;
border-left:4px solid var(--primary-red);
padding-left:1rem;
}
.container main h3{
font-size:1.4rem;
font-weight:600;
color:var(--text-secondary);
margin-top:2rem;
margin-bottom:0.8rem;
}
.container main h4{
font-size:1.2rem;
font-weight:500;
color:var(--text-secondary);
margin-top:1.5rem;
margin-bottom:0.6rem;
}
.container main p{
margin-bottom:1.2rem;
font-size:1rem;
color:var(--text-primary);
}
.container main ul,
.container main ol{
margin:1.2rem 0;
padding-left:2rem;
}
.container main li{
margin-bottom:0.8rem;
color:var(--text-primary);
line-height:1.6;
}
.container main li strong{
color:var(--text-secondary);
font-weight:600;
}
.container main a{
color:var(--primary-red);
text-decoration:none;
border-bottom:1px solid transparent;
transition:all 0.3s ease;
}
.container main a:hover{
color:#ff4d6d;
border-bottom-color:#ff4d6d;
}
.container main a[href^="http"]:after{
content:" ↗";
font-size:0.8em;
opacity:0.6;
}
.container main blockquote{
border-left:4px solid var(--primary-red);
padding-left:1.5rem;
margin:1.5rem 0;
font-style:italic;
color:var(--text-muted);
}
.container main code{
background:rgba(255,255,255,0.1);
padding:0.2rem 0.4rem;
border-radius:4px;
font-family:'Courier New',monospace;
font-size:0.9rem;
}
.container main .meta{
color:var(--text-muted);
font-size:0.9rem;
margin-bottom:2rem;
font-style:italic;
}
.navbar{
background:rgba(26,26,26,0.95);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
position:fixed;
top:0;
width:100%;
z-index:1000;
transition:all 0.3s ease;
}
.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 2rem;
max-width:1200px;
margin:0 auto;
position:relative;
}
.nav-logo h1{
font-size:1.5rem;
font-weight:700;
color:var(--text-primary);
}
.nav-links{
display:flex;
gap:2rem;
transition:all 0.3s;
}
.navbar{
padding:1rem 1.5rem;
display:flex;
justify-content:space-between;
align-items:center;
position:fixed;
top:0;
width:100%;
z-index:1000;
background:rgba(26,26,26,0.95);
backdrop-filter:blur(10px);
}
.navbar h1{
font-size:1.3rem;
}
body nav .nav-links,
body nav #nav-links,
body .navbar .nav-links,
body .navbar #nav-links,
html body nav .nav-links,
html body nav #nav-links,
.nav-links,
#nav-links{
display:none !important;
position:fixed !important;
top:70px !important;
right:5px !important;
left:auto !important;
width:320px !important;
max-width:calc(100vw - 20px) !important;
max-height:calc(100vh - 90px) !important;
overflow-y:auto !important;
background:rgba(26,26,26,0.98) !important;
backdrop-filter:blur(10px) !important;
border:1px solid rgba(255,255,255,0.15) !important;
z-index:9999 !important;
padding:20px !important;
box-shadow:0 4px 20px rgba(0,0,0,0.4) !important;
border-radius:12px !important;
margin:0 !important;
margin-left:0 !important;
margin-right:0 !important;
transform:none !important;
justify-content:flex-start !important;
align-items:stretch !important;
text-align:left !important;
}
body nav .nav-links.open,
body nav #nav-links.open,
body .navbar .nav-links.open,
body .navbar #nav-links.open,
html body nav .nav-links.open,
html body nav #nav-links.open,
.nav-links.open,
#nav-links.open{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
z-index:9999 !important;
position:fixed !important;
top:70px !important;
right:5px !important;
left:auto !important;
width:320px !important;
max-width:calc(100vw - 20px) !important;
background:rgba(26,26,26,0.98) !important;
backdrop-filter:blur(10px) !important;
border:1px solid rgba(255,255,255,0.15) !important;
box-shadow:0 4px 20px rgba(0,0,0,0.4) !important;
padding:20px !important;
border-radius:12px !important;
margin:0 !important;
margin-left:0 !important;
margin-right:0 !important;
transform:none !important;
justify-content:flex-start !important;
align-items:stretch !important;
text-align:left !important;
}
.nav-links.open a,
#nav-links.open a,
.nav-links.active a,
#nav-links.active a{
display:block;
color:#ffffff;
text-decoration:none;
/* border-bottom:1px solid rgba(255,255,255,0.1);
transition:all 0.3s ease;*/
font-size:0.95rem;
font-weight:500;
}
.nav-links.open a:hover,
#nav-links.open a:hover,
.nav-links.active a:hover,
#nav-links.active a:hover{
color:var(--accent-color);
background:rgba(255,100,100,0.753);
padding-left:10px;
}
.nav-links.open a:last-child,
#nav-links.open a:last-child,
.nav-links.active a:last-child,
#nav-links.active a:last-child{
border-bottom:none;
}
.nav-separator{
height:1px;
background:rgba(255,255,255,0.2);
margin:8px 0;
}
.nav-direct-link{
display:block !important;
padding:8px 10px !important;
color:#ffffff !important;
text-decoration:none !important;
border-bottom:1px solid rgba(255,255,255,0.1) !important;
background:rgba(0,120,255,0.4) !important;
border:2px solid rgba(0,120,255,0.8) !important;
border-radius:8px !important;
margin:3px 0 !important;
text-align:center !important;
font-weight:700 !important;
font-size:0.9rem !important;
transition:all 0.3s ease !important;
}
.nav-direct-link:hover{
background:rgba(0,120,255,0.6) !important;
border-color:rgba(0,120,255,1) !important;
color:#ffffff !important;
transform:translateY(-1px) !important;
text-decoration:none !important;
}
body nav .connected-sites-container,
body .navbar .connected-sites-container,
html body nav .connected-sites-container,
.nav-links .connected-sites-container,
#nav-links .connected-sites-container,
.connected-sites-container{
display:flex !important;
flex-direction:column !important;
gap:5px !important;
margin-top:8px !important;
width:100% !important;
opacity:1 !important;
visibility:visible !important;
}
@media (max-width:400px){
.nav-links,
#nav-links,
.nav-links.open,
#nav-links.open{
right:5px !important;
left:auto !important;
width:calc(100vw - 20px) !important;
max-width:320px !important;
}
}
@media (min-width:400px){
.connected-sites-container{
flex-direction:column !important;
gap:8px !important;
}
}
body nav .connected-site,
body .navbar .connected-site,
html body nav .connected-site,
.nav-links .connected-site,
#nav-links .connected-site,
.connected-site{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
padding:8px 10px !important;
opacity:1 !important;
visibility:visible !important;
color:#ffffff !important;
text-decoration:none !important;
border:1px solid rgba(255,255,255,0.2) !important;
border-radius:6px !important;
font-size:0.9rem !important;
background:rgba(255,255,255,0.05) !important;
transition:all 0.3s ease !important;
font-size:0.95rem !important;
font-weight:500 !important;
flex:1 !important;
text-align:center !important;
}
.connected-site:hover{
color:var(--accent-color) !important;
background:rgba(255,255,255,0.1) !important;
border-color:var(--accent-color) !important;
transform:translateY(-2px) !important;
}
.site-emoji{
font-size:1.1em !important;
}
.site-name{
font-size:0.9rem !important;
}
body .navbar .hamburger,
body nav .hamburger,
body #hamburger-menu,
.hamburger{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
z-index:1300 !important;
width:32px !important;
height:32px !important;
cursor:pointer !important;
flex-direction:column !important;
justify-content:center !important;
background:rgba(255,255,255,0.1) !important;
border:1px solid rgba(255,255,255,0.2) !important;
border-radius:4px !important;
padding:4px !important;
}
body .navbar .hamburger span,
body nav .hamburger span,
body #hamburger-menu span,
.hamburger span{
display:block !important;
width:100% !important;
height:3px !important;
background:var(--text-primary) !important;
margin:3px 0 !important;
border-radius:2px !important;
transition:all 0.3s ease !important;
transform-origin:center !important;
}
.hamburger.active span:nth-child(1),
#hamburger-menu.active span:nth-child(1){
transform:rotate(45deg) translate(6px,6px) !important;
}
.hamburger.active span:nth-child(2),
#hamburger-menu.active span:nth-child(2){
opacity:0 !important;
}
.hamburger.active span:nth-child(3),
#hamburger-menu.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px) !important;
}
.navbar h1 .home-link{
color:#ffffff !important;
text-decoration:none !important;
display:flex !important;
align-items:center !important;
gap:0.5em !important;
border:none !important;
background:none !important;
cursor:pointer !important;
font-family:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
padding:0 !important;
margin:0 !important;
transition:opacity 0.2s ease !important;
}
.navbar h1 .home-link:visited,
.navbar h1 .home-link:link,
.navbar h1 .home-link:active{
color:#ffffff !important;
text-decoration:none !important;
}
.navbar h1 .home-link:hover{
color:#ffffff !important;
text-decoration:none !important;
opacity:0.8 !important;
}
.navbar h1 .home-link:focus{
color:#ffffff !important;
text-decoration:none !important;
outline:2px solid var(--accent) !important;
outline-offset:2px !important;
border-radius:4px !important;
}
.nav-links{
display:none !important;
position:absolute;
top:70px;
left:0;
width:100vw;
background:rgba(26,26,26,0.98);
backdrop-filter:blur(10px);
flex-direction:column;
gap:1.5rem;
padding:2rem 0;
align-items:center;
margin-left:8px;
/* box-shadow:0 4px 16px rgba(0,0,0,0.3);
border-top:1px solid var(--border);*/
z-index:1050;
}
.nav-links.open{
display:flex !important;
}
.nav-links a{
font-size:1.1rem;
color:var(--text-primary);
}
.hamburger{
display:flex !important;
position:relative;
z-index:1100;
}
.hamburger span{
background:var(--text-primary);
transition:all 0.3s ease;
}
.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(7px,-6px);
}
.sidebar-connected-sites{
position:fixed;
left:20px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:15px;
z-index:500;
background:rgba(26,26,26,0.9);
backdrop-filter:blur(10px);
padding:15px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.sidebar-connected-sites .connected-site{
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--text-primary) !important;
text-decoration:none !important;
transition:all 0.3s ease !important;
font-size:1.8rem !important;
padding:12px !important;
border-radius:50% !important;
background:rgba(255,255,255,0.05) !important;
width:50px !important;
height:50px !important;
text-align:center !important;
position:relative !important;
border:1px solid rgba(255,255,255,0.1) !important;
}
.sidebar-connected-sites .connected-site:hover{
background:rgba(255,255,255,0.15) !important;
transform:scale(1.1) !important;
border-color:var(--accent-color) !important;
}
.sidebar-connected-sites .connected-site .site-name{
display:none !important;
}
.sidebar-connected-sites .connected-site::after{
content:attr(data-tooltip);
position:absolute;
left:60px;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.9);
color:white;
padding:6px 10px;
border-radius:6px;
font-size:0.9rem;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
z-index:1000;
}
.sidebar-connected-sites .connected-site:hover::after{
opacity:1;
}
@media (max-width:900px){
.sidebar-connected-sites{
display:none !important;
}
}
.hero{
background:var(--gradient-bg);
min-height:calc(100vh - 120px);
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
padding-top:80px;
padding-bottom:40px;
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 30% 70%,rgba(255,23,68,0.1) 0%,transparent 50%);
}
.debt-clock-container{
text-align:center;
position:relative;
z-index:2;
margin-top:80px;
}
.debt-title{
font-size:2.5rem;
font-weight:600;
color:var(--text-secondary);
margin-bottom:2rem;
letter-spacing:-0.02em;
}
.debt-display{
display:flex;
align-items:center;
justify-content:center;
gap:0.3rem;
margin-bottom:1rem;
flex-wrap:wrap;
width:100%;
min-width:0;
}
.exchange-rates{
font-size:0.9rem;
color:var(--text-secondary);
margin-bottom:1.5rem;
opacity:0.8;
}
.currency-symbol{
font-size:3rem;
font-weight:300;
color:var(--primary-red);
margin-top:-1rem;
}
.debt-amount{
font-size:clamp(2.2rem,8vw,5.5rem);
font-weight:700;
color:var(--primary-red);
letter-spacing:-0.02em;
font-feature-settings:'tnum';
min-height:1.2em;
text-shadow:0 0 30px rgba(255,23,68,0.3);
}
.currency-label{
font-size:1.3rem;
font-weight:300;
color:var(--text-secondary);
margin-top:-1rem;
}
.debt-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1.5rem;
margin-bottom:1rem;
max-width:800px;
margin-left:auto;
margin-right:auto;
}
.stat-item{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:1.5rem;
text-align:center;
backdrop-filter:blur(10px);
transition:all 0.3s ease;
}
.stat-item:hover{
background:rgba(255,255,255,0.08);
transform:translateY(-2px);
border-color:var(--accent);
}
.stat-label{
display:block;
font-size:0.9rem;
color:var(--text-secondary);
margin-bottom:0.5rem;
font-weight:500;
}
.stat-value{
display:block;
font-size:1.5rem;
font-weight:700;
color:var(--text-primary);
font-feature-settings:'tnum';
}
.stat-currency-symbol{
font-size:1.2rem;
font-weight:400;
color:var(--primary-red);
margin-right:0.2em;
vertical-align:middle;
}
.last-updated{
font-size:0.9rem;
color:var(--text-muted);
font-weight:500;
}
.chart-section{
background:var(--surface);
padding:5rem 0;
}
.section-title{
font-size:2.5rem;
font-weight:600;
text-align:center;
margin-bottom:3rem;
color:var(--text-primary);
}
.chart-controls{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:2rem;
flex-wrap:wrap;
gap:1rem;
}
.time-range-buttons{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
}
.time-btn{
background:var(--surface-light);
border:1px solid var(--border);
color:var(--text-secondary);
padding:0.5rem 1rem;
border-radius:6px;
cursor:pointer;
transition:all 0.3s ease;
font-weight:500;
}
.time-btn:hover{
background:var(--surface);
color:var(--text-primary);
}
.time-btn.active{
background:var(--accent);
color:var(--background);
border-color:var(--accent);
}
.chart-options{
display:flex;
align-items:center;
gap:1rem;
}
.chart-options label{
display:flex;
align-items:center;
gap:0.5rem;
color:var(--text-secondary);
cursor:pointer;
font-weight:500;
}
.chart-options input[type="checkbox"]{
width:16px;
height:16px;
accent-color:var(--accent);
}
.chart-container{
background:var(--background);
border:1px solid var(--border);
border-radius:12px;
padding:1rem;
margin-bottom:2rem;
min-height:500px;
}
.pm-timeline{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:1rem;
margin-bottom:1rem;
backdrop-filter:blur(10px);
}
.pm-timeline-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
padding-bottom:0.5rem;
border-bottom:1px solid var(--border);
}
.pm-timeline-header h4{
color:var(--text-primary);
margin:0;
font-size:1.1rem;
font-weight:600;
}
.pm-legend{
display:flex;
gap:1rem;
}
.pm-legend-item{
padding:4px 8px;
border-radius:4px;
font-size:0.8rem;
font-weight:500;
}
.pm-legend-item.liberal{
background:rgba(220,53,69,0.3);
color:#dc3545;
border:1px solid #dc3545;
}
.pm-legend-item.conservative{
background:rgba(0,123,255,0.3);
color:#007bff;
border:1px solid #007bff;
}
.pm-timeline-content{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
align-items:stretch;
}
.pm-period{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:80px;
padding:0.75rem 0.5rem;
border-radius:6px;
text-align:center;
cursor:pointer;
transition:all 0.3s ease;
flex-grow:1;
border:1px solid transparent;
}
.pm-period:hover{
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.pm-period.liberal{
background:rgba(220,53,69,0.2);
border-color:rgba(220,53,69,0.4);
}
.pm-period.conservative{
background:rgba(0,123,255,0.2);
border-color:rgba(0,123,255,0.4);
}
.pm-name{
font-weight:600;
font-size:0.9rem;
color:var(--text-primary);
margin-bottom:0.25rem;
display:block;
}
.pm-years{
font-size:0.75rem;
color:var(--text-secondary);
font-weight:400;
}
.pm-timeline-integrated{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:1rem;
margin-top:1rem;
backdrop-filter:blur(10px);
}
.pm-timeline-integrated .pm-timeline-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:1rem;
padding-bottom:0.5rem;
border-bottom:1px solid var(--border);
}
.pm-title{
color:var(--text-primary);
font-size:1.1rem;
font-weight:600;
}
.pm-timeline-integrated .pm-legend{
display:flex;
align-items:center;
gap:1rem;
font-size:0.85rem;
}
.legend-dot{
width:12px;
height:12px;
border-radius:2px;
margin-right:0.3rem;
}
.legend-dot.liberal{
background:#dc3545;
}
.legend-dot.conservative{
background:#007bff;
}
.pm-timeline-track{
position:relative;
height:60px;
background:rgba(255,255,255,0.02);
border-radius:6px;
overflow:hidden;
}
.pm-bar{
position:absolute;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
padding:0.25rem 0.5rem;
border-right:1px solid rgba(255,255,255,0.1);
cursor:pointer;
transition:all 0.2s ease;
overflow:hidden;
}
.pm-bar:hover{
transform:scaleY(1.1);
z-index:10;
box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.pm-bar.liberal{
background:linear-gradient(135deg,
rgba(220,53,69,0.7) 0%,
rgba(220,53,69,0.5) 100%);
border-top:2px solid #dc3545;
}
.pm-bar.conservative{
background:linear-gradient(135deg,
rgba(0,123,255,0.7) 0%,
rgba(0,123,255,0.5) 100%);
border-top:2px solid #007bff;
}
.pm-label{
font-weight:600;
font-size:0.75rem;
color:var(--text-primary);
text-shadow:1px 1px 2px rgba(0,0,0,0.7);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.2;
}
.pm-period-years{
font-size:0.65rem;
color:var(--text-secondary);
text-shadow:1px 1px 2px rgba(0,0,0,0.7);
white-space:nowrap;
opacity:0.9;
}
.chart-legend{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:1.5rem;
backdrop-filter:blur(10px);
}
.chart-legend h3{
color:var(--text-primary);
margin-bottom:1rem;
font-weight:600;
}
.legend-items{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1rem;
}
.legend-item{
display:flex;
align-items:center;
gap:0.75rem;
font-size:0.9rem;
color:var(--text-secondary);
}
.legend-area{
width:20px;
height:12px;
border-radius:2px;
flex-shrink:0;
opacity:0.6;
}
.legend-description{
font-size:0.85rem;
color:var(--text-muted);
margin-bottom:1rem;
font-style:italic;
}
.legend-item.covid .legend-area{
background:rgba(255,107,107,0.6);
border:1px solid #ff6b6b;
}
.legend-item.crisis .legend-area{
background:rgba(255,217,61,0.6);
border:1px solid #ffd93d;
}
.legend-item.oil-crisis .legend-area{
background:rgba(255,217,61,0.6);
border:1px solid #ffd93d;
}
.legend-item.war .legend-area{
background:rgba(142,36,170,0.6);
border:1px solid #8e24aa;
}
.legend-item.depression .legend-area{
background:rgba(255,140,66,0.6);
border:1px solid #ff8c42;
}
.info-cards{
padding:5rem 0;
background:var(--gradient-bg);
}
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:2rem;
}
.info-card{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:16px;
padding:2rem;
text-align:center;
backdrop-filter:blur(10px);
transition:all 0.3s ease;
}
.info-card:hover{
background:rgba(255,255,255,0.08);
transform:translateY(-4px);
border-color:var(--accent);
}
.card-icon{
font-size:2.5rem;
margin-bottom:1rem;
display:block;
}
.info-card h3{
font-size:1.25rem;
font-weight:600;
margin-bottom:1rem;
color:var(--text-primary);
}
.info-card p{
color:var(--text-secondary);
line-height:1.6;
}
.about-section{
background:var(--surface);
padding:5rem 0;
}
.about-content h2{
font-size:2.5rem;
font-weight:600;
text-align:center;
margin-bottom:3rem;
color:var(--text-primary);
}
.about-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:3rem;
align-items:start;
}
.about-text p{
margin-bottom:1.5rem;
color:var(--text-secondary);
font-size:1.1rem;
line-height:1.7;
}
.about-text h3{
color:var(--text-primary);
font-size:1.25rem;
margin:2rem 0 1rem 0;
font-weight:600;
}
.about-text ul{
list-style:none;
margin-left:0;
}
.about-text li{
position:relative;
padding-left:1.5rem;
margin-bottom:0.5rem;
color:var(--text-secondary);
}
.about-text li::before{
content:'→';
position:absolute;
left:0;
color:var(--accent);
font-weight:bold;
}
.about-stats{
display:flex;
flex-direction:column;
gap:1.5rem;
}
.stat-box{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:1.5rem;
text-align:center;
backdrop-filter:blur(10px);
}
.stat-number{
font-size:2rem;
font-weight:700;
color:var(--accent);
display:block;
margin-bottom:0.5rem;
}
.stat-description{
color:var(--text-secondary);
font-size:0.9rem;
font-weight:500;
}
.data-sources-section{
background:var(--background);
padding:5rem 0;
}
.data-sources-section h2{
font-size:2.5rem;
font-weight:600;
text-align:center;
margin-bottom:3rem;
color:var(--text-primary);
}
.sources-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
gap:2rem;
margin-bottom:3rem;
}
.source-card{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:2rem;
backdrop-filter:blur(10px);
}
.source-card h3{
color:var(--text-primary);
font-size:1.25rem;
margin-bottom:1rem;
font-weight:600;
}
.source-card ul{
list-style:none;
}
.source-card li{
margin-bottom:0.5rem;
}
.source-card a{
color:var(--accent);
text-decoration:none;
transition:color 0.3s ease;
}
.source-card a:hover{
color:var(--text-primary);
text-decoration:underline;
}
.methodology{
background:rgba(255,255,255,0.05);
border:1px solid var(--border);
border-radius:12px;
padding:2rem;
backdrop-filter:blur(10px);
}
.methodology h3{
color:var(--text-primary);
font-size:1.5rem;
margin-bottom:2rem;
font-weight:600;
}
.method-item{
margin-bottom:2rem;
}
.method-item h4{
color:var(--accent);
font-size:1.1rem;
margin-bottom:0.5rem;
font-weight:600;
}
.method-item p{
color:var(--text-secondary);
line-height:1.6;
}
footer{
background:var(--surface);
border-top:1px solid var(--border);
padding:3rem 0 1rem 0;
width:100%;
margin-top:auto;
}
.footer-content{
display:grid;
grid-template-columns:2fr 1fr;
gap:3rem;
margin-bottom:2rem;
}
.footer-info h3{
color:var(--text-primary);
font-size:1.25rem;
margin-bottom:1rem;
font-weight:600;
}
.footer-info p{
color:var(--text-secondary);
line-height:1.6;
}
.footer-links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
}
.link-group h4{
color:var(--text-primary);
font-size:1rem;
margin-bottom:1rem;
font-weight:600;
}
.link-group a{
display:block;
color:var(--text-secondary);
text-decoration:none;
margin-bottom:0.5rem;
transition:color 0.3s ease;
}
.link-group a:hover{
color:var(--accent);
}
.footer-bottom{
border-top:1px solid var(--border);
padding-top:2rem;
text-align:center;
}
.footer-bottom p{
color:var(--text-muted);
font-size:0.9rem;
margin-bottom:0.5rem;
}
@media (max-width:768px){
.navbar{
padding:0;
}
.nav-container{
padding:0.8rem 1rem;
}
.hero{
min-height:100vh;
padding-top:60px;
padding-bottom:20px;
}
.debt-clock-container{
margin-top:40px;
}
.nav-container{
flex-direction:column;
gap:1rem;
padding:1rem;
}
.nav-links{
gap:1rem;
}
.debt-title{
font-size:1.8rem;
font-weight:600;
text-align:center;
margin-bottom:1.5rem;
}
.debt-display{
flex-direction:column;
align-items:center;
gap:0.2rem;
margin-bottom:0.8rem;
}
.debt-amount{
font-size:clamp(2.5rem,8vw,4rem);
line-height:1;
}
.currency-symbol{
font-size:1.5rem;
}
.exchange-rates{
font-size:0.85rem;
margin-bottom:1rem;
}
#currency-select{
margin-bottom:1rem;
}
.debt-stats{
display:flex;
flex-direction:row;
gap:0.5rem;
margin-bottom:1rem;
background:var(--surface);
border-radius:8px;
padding:0.8rem;
border:1px solid var(--border);
}
.debt-stats .stat-item{
flex:1;
text-align:center;
min-width:0;
}
.debt-stats .stat-label{
font-size:0.7rem;
font-weight:500;
color:var(--text-muted);
display:block;
margin-bottom:0.2rem;
line-height:1.2;
}
.debt-stats .stat-value{
font-size:0.85rem;
font-weight:600;
color:var(--text-primary);
display:block;
line-height:1.1;
}
.data-source-info{
font-size:0.8rem;
margin-top:0.8rem;
}
.chart-controls{
flex-direction:column;
align-items:stretch;
}
.time-range-buttons{
justify-content:center;
}
.pm-timeline-header{
flex-direction:column;
align-items:stretch;
gap:0.5rem;
}
.pm-timeline-content{
flex-direction:column;
}
.pm-period{
min-width:auto;
flex-direction:row;
justify-content:space-between;
}
.about-grid{
grid-template-columns:1fr;
gap:1.2rem;
}
.about-stats{
flex-direction:column;
gap:1rem;
align-items:stretch;
}
.sources-grid{
grid-template-columns:1fr;
}
.footer-content{
grid-template-columns:1fr;
gap:1.5rem;
}
.footer-links{
grid-template-columns:1fr;
gap:1rem;
}
.legend-items{
grid-template-columns:1fr;
}
.cards-grid{
grid-template-columns:1fr;
gap:1.2rem;
}
.info-card{
padding:1.2rem;
}
.about-content h2,
.data-sources-section h2,
.section-title{
font-size:1.5rem;
margin-bottom:1.5rem;
}
.stat-box{
padding:1rem;
}
.chart-legend{
padding:1rem;
}
.methodology{
padding:1rem;
}
}
@media (max-width:480px){
.nav-container{
padding:0.6rem 0.8rem;
}
.hero{
min-height:100vh;
padding-top:40px;
padding-bottom:10px;
}
.debt-clock-container{
margin-top:20px;
}
.container{
padding:0 5px;
max-width:100vw;
overflow-x:hidden;
}
.debt-title{
font-size:1.6rem;
margin-bottom:1rem;
}
footer{
padding:2rem 0 1rem 0;
}
.footer-content{
grid-template-columns:1fr;
gap:1rem;
}
.footer-links{
grid-template-columns:1fr;
gap:1rem;
}
.footer-bottom{
padding-top:1.5rem;
}
.footer-bottom p{
font-size:0.8rem;
line-height:1.4;
margin-bottom:0.4rem;
word-wrap:break-word;
overflow-wrap:break-word;
}
.debt-display{
flex-direction:column;
gap:0;
width:100%;
margin-bottom:0.6rem;
}
.debt-amount{
font-size:clamp(2rem,9vw,3.5rem);
}
.exchange-rates{
font-size:0.8rem;
margin-bottom:0.8rem;
}
.debt-stats{
padding:0.6rem;
gap:0.3rem;
}
.debt-stats .stat-label{
font-size:0.65rem;
}
.debt-stats .stat-value{
font-size:0.8rem;
}
.data-source-info{
font-size:0.75rem;
margin-top:0.6rem;
}
.currency-symbol,
.currency-label{
font-size:1rem;
margin-top:0;
}
.debt-amount{
font-size:clamp(1.2rem,8vw,2.5rem);
}
.debt-title{
font-size:1.1rem;
text-align:center;
}
.main-content,.debt-card,.chart-section,.about-section,.footer-content{
padding-left:0.5rem !important;
padding-right:0.5rem !important;
}
.about-stats{
flex-direction:column;
gap:0.7rem;
}
.cards-grid{
grid-template-columns:1fr;
gap:0.7rem;
}
.info-card{
padding:0.7rem;
}
.about-content h2,
.data-sources-section h2,
.section-title{
font-size:1.1rem;
margin-bottom:1rem;
}
.stat-box{
padding:0.7rem;
}
.chart-legend{
padding:0.7rem;
}
.methodology{
padding:0.7rem;
}
}
.loading{
opacity:0.5;
animation:pulse 1.5s infinite;
}
@keyframes pulse{
0%,100%{
opacity:0.5;
}
50%{
opacity:1;
}
}
html{
scroll-behavior:smooth;
}
button:focus,
a:focus{
outline:2px solid var(--accent);
outline-offset:2px;
}
@media print{
.navbar,
.chart-controls,
footer{
display:none;
}
.hero{
min-height:auto;
padding:2rem 0;
}
body{
background:#0a0a0a !important;
color:black;
}
}
@media (min-width:601px){
body{
background:#0a0a0a !important;
color:#fff !important;
}
.hero,body .hero{
background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%) !important;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 30% 70%,rgba(255,23,68,0.1) 0%,transparent 50%) !important;
z-index:1;
}
.debt-clock-container{
text-align:center;
position:relative;
z-index:2;
margin-top:80px;
}
}
@media (max-width:900px){
.debt-display{
gap:0.09rem;
flex-wrap:nowrap;
flex-direction:row;
}
#currency-select{
font-size:0.8rem;
height:0.95rem;
padding:0.03em 0.5em 0.03em 0.2em;
min-width:30px;
max-width:55px;
}
}
@media (max-width:600px){
.debt-display{
flex-direction:column;
flex-wrap:nowrap;
align-items:center;
gap:0.07rem;
width:100%;
margin-bottom:0.2rem !important;
}
#currency-select-wrapper{
width:100%;
display:flex;
justify-content:center;
margin-top:0.1em;
}
#currency-select{
font-size:0.85rem;
height:0.9rem;
padding:0.02em 0.3em 0.02em 0.12em;
min-width:24px;
max-width:40px;
width:50vw;
margin:0 auto;
display:block;
}
}
@media (max-width:900px){
.debt-display{
gap:0.2rem;
flex-wrap:wrap;
flex-direction:row;
}
.currency-symbol{
font-size:1.1em !important;
}
#currency-select{
font-size:0.95rem;
height:1.4rem;
.debt-display{
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center;
justify-content:center;
gap:0.08rem;
width:100%;
margin-bottom:0.2rem !important;
}
.currency-symbol{
font-size:1.1rem !important;
margin-top:0 !important;
margin-right:0.08em;
}
.debt-amount{
font-size:1.05rem !important;
min-width:0;
margin-right:0.08em;
}
#currency-select-wrapper{
width:auto !important;
display:flex !important;
align-items:center;
justify-content:center;
margin:0 !important;
}
#currency-select{
font-size:0.92rem;
height:1.1rem;
padding:0.04em 0.5em 0.04em 0.15em;
min-width:40px;
max-width:60px;
width:auto;
margin:0;
display:block;
}
display:flex;
justify-content:center;
margin-top:0;
margin-left:0.2em;
}
#currency-select{
font-size:0.92rem;
height:1.2rem;
padding:0.07em 0.7em 0.07em 0.2em;
min-width:48px;
max-width:70px;
width:auto;
margin:0;
display:block;
}
}
@media (max-width:600px){
.debt-display{
flex-direction:column;
flex-wrap:nowrap;
align-items:center;
gap:0.07rem;
width:100%;
margin-bottom:0.2rem !important;
}
.custom-currency-btn{
display:block;
margin:0.15em auto 0 auto;
font-size:0.9rem;
height:1.2rem;
min-width:44px;
max-width:70px;
padding:0.03em 0.5em 0.03em 0.2em;
}
.custom-currency-menu{
min-width:44px;
max-width:70px;
top:1.2rem;
}
}
@media (max-width:600px){
.hero{
min-height:100vh;
padding-top:80px;
}
.debt-clock-container{
margin-top:40px;
padding:0 15px;
}
.debt-title{
font-size:1.5rem !important;
margin-bottom:1.5rem;
}
.debt-display{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:0.1rem !important;
width:100% !important;
margin-bottom:1.5rem !important;
padding:0 10px !important;
flex-wrap:nowrap !important;
}
.currency-symbol{
font-size:1.2rem !important;
margin:0 0.1rem 0 0 !important;
}
.debt-amount{
font-size:clamp(1.8rem,8vw,2.8rem) !important;
line-height:1.1 !important;
text-align:center !important;
letter-spacing:-0.02em !important;
margin:0 0.1rem 0 0 !important;
word-break:keep-all !important;
white-space:nowrap !important;
overflow:hidden !important;
}
#currency-select{
font-size:1.2rem !important;
height:3rem !important;
padding:0.7rem 1.5rem !important;
margin:2rem auto 2rem auto !important;
display:block !important;
min-width:160px !important;
max-width:250px !important;
width:auto !important;
border-radius:12px !important;
text-align:center !important;
border:2px solid var(--border-color) !important;
background:var(--card-bg) !important;
color:var(--text-primary) !important;
font-weight:500 !important;
cursor:pointer !important;
transition:all 0.3s ease !important;
}
#currency-select:hover{
border-color:var(--accent-color) !important;
background:rgba(255,255,255,0.05) !important;
transform:translateY(-2px) !important;
}
#currency-select:focus{
outline:none !important;
border-color:var(--accent-color) !important;
box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),0.2) !important;
}
.data-source-info{
text-align:center;
margin:1rem 0;
font-size:0.9rem;
color:var(--text-secondary);
opacity:0.8;
}
.last-updated,.exchange-rates{
margin:0.5rem 0;
}
.source-label,.rate-label{
font-weight:500;
color:var(--text-primary);
margin-right:0.5rem;
}
.rate-date{
font-size:0.85rem;
color:var(--text-secondary);
margin-left:0.5rem;
opacity:0.7;
}
.debt-stats{
display:flex !important;
flex-direction:column !important;
gap:1.2rem !important;
margin:2rem 20px !important;
max-width:calc(100vw - 40px) !important;
width:calc(100vw - 40px) !important;
}
.stat-item{
padding:1.5rem !important;
margin:0 !important;
border-radius:12px !important;
width:100% !important;
box-sizing:border-box !important;
}
.stat-label{
font-size:1rem !important;
margin-bottom:0.7rem !important;
color:var(--text-secondary) !important;
}
.stat-value{
font-size:1.6rem !important;
font-weight:700 !important;
color:var(--text-primary) !important;
}
.container{
padding:0 20px !important;
}
.custom-currency-btn,body .custom-currency-btn{
padding:0 0.12em !important;
min-width:28px !important;
max-width:40px !important;
font-size:0.82rem !important;
margin:0 !important;
}
}
.custom-currency-btn:focus,.custom-currency-btn[aria-expanded="true"]{
border-color:#4fc3f7;
box-shadow:0 0 0 2px #4fc3f733;
}
.custom-currency-btn{
font-size:0.78rem;
height:1.05rem;
min-width:36px;
max-width:60px;
padding:0.01em 0.35em 0.01em 0.15em;
border-radius:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.currency-emoji{
font-size:1.05em;
margin-right:0.13em;
}
.currency-code{
font-size:0.98em;
font-weight:600;
}
.dropdown-arrow{
font-size:0.95em;
margin-left:0.2em;
pointer-events:none;
}
.custom-currency-menu{
position:absolute;
left:50%;
transform:translateX(-50%);
top:1.1rem;
background:#232323;
border:1.2px solid #444;
border-radius:4px;
min-width:48px;
max-width:80px;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,0.18);
padding:0.08em 0;
margin:0;
list-style:none;
display:none;
}
.custom-currency-btn[aria-expanded="true"] + .custom-currency-menu,
.custom-currency-menu:focus{
display:block !important;
}
.custom-currency-option{
padding:0.08em 0.3em 0.08em 0.18em;
font-size:0.85em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
gap:0.25em;
transition:background 0.15s;
}
.custom-currency-option.selected,.custom-currency-option:hover{
background:#333;
color:#4fc3f7;
}
.hero{
background:var(--gradient-bg) !important;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(circle at 30% 70%,rgba(255,23,68,0.1) 0%,transparent 50%);
}
.debt-clock-container{
text-align:center;
position:relative;
z-index:2;
margin-top:80px;
}
.debt-title{
font-size:2.5rem;
font-weight:600;
color:var(--text-secondary);
margin-bottom:2rem;
letter-spacing:-0.02em;
}
@media (min-width:601px){
body{
background:var(--background);
color:var(--text-primary);
}
.navbar{
background:rgba(26,26,26,0.95);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
position:fixed;
top:0;
width:100%;
z-index:1000;
transition:all 0.3s ease;
display:flex;
align-items:center;
justify-content:space-between;
padding:1rem 2rem;
}
.navbar h1{
font-size:1.5rem;
font-weight:700;
color:var(--text-primary);
margin:0;
display:flex;
align-items:center;
gap:0.5em;
letter-spacing:-0.5px;
}
.navbar h1 .home-link{
color:inherit;
text-decoration:none;
display:flex;
align-items:center;
gap:0.5em;
transition:all 0.3s ease;
}
.navbar h1 .home-link:hover{
color:var(--accent);
transform:translateY(-1px);
}
.navbar h1 .home-link:focus{
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:4px;
}
.nav-links{
display:flex;
gap:2rem;
align-items:center;
}
.nav-links a{
color:var(--text-secondary);
text-decoration:none;
font-weight:500;
font-size:1.01rem;
transition:color 0.3s ease;
}
.nav-links a:hover{
color:var(--accent);
}
.debt-display{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
margin-bottom:3rem;
flex-wrap:wrap;
width:100%;
min-width:0;
background:none;
}
.debt-display > *{
min-width:0;
flex-shrink:1;
}
.currency-symbol{
font-size:3rem;
font-weight:300;
color:var(--primary-red);
margin-top:-1rem;
}
.debt-amount{
font-size:clamp(3rem,8vw,6rem);
font-weight:700;
color:#ff1744;
letter-spacing:-0.02em;
font-feature-settings:'tnum';
min-height:1.2em;
text-shadow:0 0 20px rgba(255,23,68,0.5),0 0 40px rgba(255,23,68,0.3),0 0 60px rgba(255,23,68,0.1);
}
.currency-label{
font-size:2rem;
font-weight:300;
color:var(--text-secondary);
margin-top:-1rem;
}
}
select#currency-select{
font-size:1.2rem !important;
height:3rem !important;
padding:0.7rem 2.5rem 0.7rem 1.5rem !important;
margin:1.5rem auto 1.5rem auto !important;
display:block !important;
min-width:160px !important;
max-width:250px !important;
width:auto !important;
border-radius:12px !important;
text-align:center !important;
border:2px solid var(--border-color) !important;
background:var(--card-bg) !important;
color:var(--text-primary) !important;
font-weight:500 !important;
cursor:pointer !important;
transition:all 0.3s ease !important;
background-image:url('data:image/svg+xml;utf8,<svg fill="%23fff" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
background-repeat:no-repeat !important;
background-position:right 1rem center !important;
background-size:1.2rem !important;
appearance:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
}
select#currency-select:hover{
border-color:var(--accent-color) !important;
background:rgba(255,255,255,0.05) !important;
transform:translateY(-2px) !important;
}
select#currency-select:focus{
outline:none !important;
border-color:var(--accent-color) !important;
box-shadow:0 0 0 3px rgba(255,255,255,0.2) !important;
}
@media (max-width:900px){
.debt-display{
gap:0.09rem;
flex-wrap:nowrap;
flex-direction:row;
}
select#currency-select{
font-size:1rem !important;
height:2.5rem !important;
padding:0.5rem 2rem 0.5rem 1rem !important;
margin:1.5rem auto !important;
min-width:140px !important;
max-width:200px !important;
background-image:url('data:image/svg+xml;utf8,<svg fill="%23fff" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
background-repeat:no-repeat !important;
background-position:right 0.7rem center !important;
background-size:1rem !important;
appearance:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
}
}
@media (max-width:600px){
.debt-display{
flex-direction:column;
flex-wrap:nowrap;
align-items:center;
gap:0.07rem;
width:100%;
margin-bottom:0.2rem !important;
}
#currency-select-wrapper{
width:100%;
display:flex;
justify-content:center;
margin-top:0.1em;
}
#currency-select{
font-size:0.85rem;
height:0.9rem;
padding:0.02em 0.3em 0.02em 0.12em;
min-width:24px;
max-width:40px;
width:50vw;
margin:0 auto;
display:block;
}
}
@media (max-width:900px){
.debt-display{
gap:0.2rem;
flex-wrap:wrap;
flex-direction:row;
}
.currency-symbol{
font-size:1.1em !important;
}
#currency-select{
font-size:0.95rem;
height:1.4rem;
padding:0.09em 1.1em 0.09em 0.3em;
min-width:60px;
max-width:90px;
}
}
@media (max-width:600px){
.debt-display{
flex-direction:column;
align-items:center;
gap:0.1rem;
width:100%;
}
.currency-symbol{
font-size:1em !important;
}
#currency-select-wrapper{
width:100%;
display:flex;
justify-content:center;
margin-top:0.2em;
}
#currency-select{
font-size:0.92rem;
height:1.2rem;
padding:0.07em 0.7em 0.07em 0.2em;
min-width:48px;
max-width:70px;
width:60vw;
margin:0 auto;
display:block;
}
.custom-currency-btn:focus,.custom-currency-btn[aria-expanded="true"]{
border-color:#4fc3f7;
box-shadow:0 0 0 2px #4fc3f733;
}
.custom-currency-btn{
font-size:0.78rem;
height:1.05rem;
min-width:36px;
max-width:60px;
padding:0.01em 0.35em 0.01em 0.15em;
border-radius:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.currency-emoji{
font-size:1.05em;
margin-right:0.13em;
}
.currency-code{
font-size:0.98em;
font-weight:600;
}
.dropdown-arrow{
font-size:0.95em;
margin-left:0.2em;
pointer-events:none;
}
.custom-currency-menu{
position:absolute;
left:50%;
transform:translateX(-50%);
top:1.1rem;
background:#232323;
border:1.2px solid #444;
border-radius:4px;
min-width:48px;
max-width:80px;
z-index:1000;
box-shadow:0 2px 8px rgba(0,0,0,0.18);
padding:0.08em 0;
margin:0;
list-style:none;
display:none;
}
.custom-currency-btn[aria-expanded="true"] + .custom-currency-menu,
.custom-currency-menu:focus{
display:block !important;
}
.custom-currency-option{
padding:0.08em 0.3em 0.08em 0.18em;
font-size:0.85em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
gap:0.25em;
transition:background 0.15s;
}
.custom-currency-option.selected,.custom-currency-option:hover{
background:#333;
color:#4fc3f7;
}
@media (max-width:600px){
.debt-display{
flex-direction:column;
flex-wrap:nowrap;
align-items:center;
gap:0.07rem;
width:100%;
margin-bottom:0.2rem !important;
}
.custom-currency-btn{
display:block;
margin:0.15em auto 0 auto;
font-size:0.9rem;
height:1.2rem;
min-width:44px;
max-width:70px;
padding:0.03em 0.5em 0.03em 0.2em;
}
.custom-currency-menu{
min-width:44px;
max-width:70px;
top:1.2rem;
}
}
.d3-chart-container{
width:100%;
max-width:100%;
min-height:350px;
height:500px;
background:var(--surface);
border-radius:12px;
box-shadow:0 2px 16px var(--shadow);
margin:0 auto 2rem auto;
position:relative;
overflow:visible;
}
.d3-axis path,
.d3-axis line{
stroke:var(--border);
shape-rendering:crispEdges;
}
.d3-axis text{
fill:var(--text-secondary);
font-size:13px;
}
.d3-line{
fill:none;
stroke:var(--primary-red);
stroke-width:2.5px;
}
.d3-annotation-area{
opacity:0.25;
}
.d3-annotation-label{
font-size:12px;
font-weight:600;
fill:var(--text-primary);
pointer-events:none;
text-shadow:0 1px 4px #000,0 0 2px #000;
}
.d3-tooltip{
position:absolute;
pointer-events:none;
background:rgba(30,30,30,0.98);
color:#fff;
border-radius:6px;
padding:0.7em 1.1em;
font-size:1em;
box-shadow:0 2px 8px rgba(0,0,0,0.18);
z-index:100;
min-width:120px;
max-width:260px;
line-height:1.5;
border:1px solid var(--border);
transition:opacity 0.15s;
}
@media (max-width:768px){
.d3-chart-container{
height:340px;
min-height:220px;
}
}
@media (max-width:600px) and (orientation:portrait){
.hero{
min-height:calc(100vh - 60px) !important;
padding-top:20px !important;
padding-bottom:20px !important;
}
.debt-stats{
gap:0.5rem !important;
margin-top:1rem !important;
margin-bottom:1rem !important;
padding:0.75rem !important;
}
.stat-item{
padding:0.5rem !important;
margin:0 !important;
min-height:auto !important;
}
.stat-label{
font-size:0.8rem !important;
margin-bottom:0.25rem !important;
}
.stat-value{
font-size:1.1rem !important;
line-height:1.2 !important;
}
.data-source-info{
margin-bottom:0.5rem !important;
margin-top:0.5rem !important;
}
.debt-display{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:0.2rem !important;
width:100% !important;
margin-bottom:1rem !important;
flex-wrap:nowrap !important;
}
.currency-symbol{
font-size:clamp(1.5rem,6vw,2rem) !important;
color:var(--primary-red) !important;
margin:0 !important;
display:inline-block !important;
line-height:1 !important;
}
.debt-amount{
font-size:clamp(2rem,7vw,3rem) !important;
text-align:center !important;
margin:0 !important;
line-height:1.1 !important;
}
#currency-select{
position:relative !important;
font-size:1rem !important;
height:2.5rem !important;
padding:0.5rem 1rem !important;
margin:1rem auto 0 auto !important;
display:block !important;
min-width:120px !important;
max-width:200px !important;
border-radius:8px !important;
text-align:center !important;
clear:both !important;
width:auto !important;
}
.navbar h1 .home-link,
.navbar h1 .home-link *,
.navbar h1 .home-link span{
color:#ffffff !important;
text-decoration:none !important;
border:none !important;
background:none !important;
}
.navbar h1 .home-link:visited,
.navbar h1 .home-link:link,
.navbar h1 .home-link:active,
.navbar h1 .home-link:hover,
.navbar h1 .home-link:focus{
color:#ffffff !important;
text-decoration:none !important;
}
.navbar h1 .home-link:visited *,
.navbar h1 .home-link:link *,
.navbar h1 .home-link:active *,
.navbar h1 .home-link:hover *,
.navbar h1 .home-link:focus *{
color:#ffffff !important;
}
}
@media (max-width:600px) and (orientation:landscape){
.debt-display{
flex-direction:row !important;
gap:0.2rem !important;
}
.currency-symbol{
display:inline-block !important;
font-size:clamp(1.5rem,6vw,2.5rem) !important;
}
}
@media (max-width:600px){
.debt-clock-container{
display:flex;
flex-direction:column;
align-items:center;
gap:0.7rem;
padding:0 20px !important;
margin-top:80px !important;
}
.debt-title{
font-size:1.4rem !important;
margin-bottom:0.3rem !important;
margin-top:0 !important;
line-height:1.2 !important;
}
.debt-display{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
flex-wrap:nowrap !important;
margin-bottom:1rem !important;
}
.currency-symbol{
color:var(--primary-red) !important;
visibility:visible !important;
opacity:1 !important;
width:auto !important;
height:auto !important;
font-size:clamp(1.5rem,6vw,2rem) !important;
display:inline-block !important;
margin-right:0.2rem !important;
}
.debt-amount{
font-size:clamp(2rem,7vw,3rem) !important;
margin:0 !important;
line-height:1.1 !important;
white-space:nowrap !important;
overflow:visible !important;
text-align:center !important;
padding:0 !important;
}
#currency-select{
font-size:1rem !important;
height:2.5rem !important;
padding:0.5rem 1rem !important;
margin:1rem auto !important;
display:block !important;
min-width:120px !important;
max-width:200px !important;
border-radius:8px !important;
text-align:center !important;
}
}
@media (max-width:600px){
html,body{
background:#0a0a0a !important;
margin:0 !important;
padding:0 !important;
overflow-x:hidden !important;
height:100% !important;
}
.container,main,section{
background:transparent !important;
}
.hero{
padding-top:10px !important;
padding-bottom:10px !important;
min-height:calc(100vh - 50px) !important;
}
.debt-stats{
gap:0.4rem !important;
margin:0.75rem 0 !important;
padding:0.6rem !important;
}
.stat-item{
padding:0.4rem 0.6rem !important;
margin:0 !important;
}
.stat-label{
font-size:0.75rem !important;
margin-bottom:0.2rem !important;
opacity:0.9 !important;
}
.stat-value{
font-size:1.05rem !important;
line-height:1.1 !important;
font-weight:600 !important;
}
}
}