/* ===================
Variables
=================== */
:root{
  --color-bg: #0366CB;
  --color-text: #FFFFFF;
}
/* ===================
Base
=================== */
@font-face {font-family: 'Deacon Test'; src: url(/assets/fonts/DeaconTest-Black.otf); font-display: swap;}
@font-face {font-family: 'IBM Plex Mono'; src: url(/assets/fonts/IBMPlexMono-Regular.ttf); font-display: swap;}

html {font-size: 16px; scroll-behavior: smooth;}
body {font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 1rem; background: var(--color-bg); color:var(--color-text); line-height: 1.5; margin: 0; padding: 0;}
/* ===================
Layout
=================== */
.container {max-width: 71.25rem; padding: 1rem;}
#section-Title {width: 100vw; height: 100vh; box-sizing: border-box; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
#section-Tony {width: 100vw; height: 100vh; background-image: url('TonyBlue.jpg'); background-position: center center; background-repeat: no-repeat;	background-size: cover;}
#section-Intro {width: 100vw; min-height: 100vh; background-color: #1972CF; box-sizing: border-box; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
#section-Data {width: 100vw; box-sizing: border-box; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
#section-Final {width: 100vw; min-height: 100vh; background-color: #0052B7; box-sizing: border-box; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
a:link, a:visited {text-decoration: none; color:var(--color-text); background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; padding: 0 2px;}
footer {width: 100vw; background-color: #1972CF; box-sizing: border-box; margin: 0; padding-bottom: 1rem; display: flex; align-items: center; justify-content: center;}
::selection {background: var(--color-text); color:var(--color-bg); text-shadow: none;}
/* ===================
Components
=================== */
.SVG-Size {width: 15rem; height: auto;}
.div-Centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%;}
.text-Header {font-family: 'Deacon Test', sans-serif; font-size: 4rem; text-transform: uppercase; letter-spacing: -5px;}
.text-Monospace {font-family: 'IBM Plex Mono', monospace;}
.text-Title {font-family: 'Deacon Test', sans-serif; font-size: 3rem; text-transform: uppercase; line-height: 3rem; letter-spacing: -3px;}
.metric-Delete {text-decoration: line-through; color: rgba(255, 255, 255, 0.8);}
.metric-Unique {text-decoration: underline;}
.chart {width: 100%; height: 200px; margin: 2rem 0;}
/* ===================
Table
=================== */
table {font-family: 'IBM Plex Mono', monospace; width: 100%; text-align: left;}
thead th {border-bottom: 1px solid #ffffff;}
tbody th {min-width: 66%;}
tr:not(:last-child) th, tr:not(:last-child) td {border-bottom: 1px dotted #ffffff;}
th, td {font-weight: 400; padding: 6px 0;}
#section-Final tbody th {width: 10px;}
#section-Final .number {width: 24px;}
#section-Final .title {min-width: 66%;}
/* ===================
Hamburger
=================== */
.hamburger {position: fixed; top: 1rem; right: 1rem; width: 50px; height: 50px; display: grid; place-items: center; background: #FFF; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 6px 20px rgba(0,0,0,0.14); padding: 8px; gap: 4px; cursor: pointer; transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1); z-index: 1200;}
.hamburger.visible {opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);}
.nav {position: fixed; top: 5rem; right: 1rem; width: 270px; background: #FFF; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.14); padding: 8px; transform-origin: top right; transform: translateY(-6px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1); z-index: 1100;}
.nav[aria-hidden="false"]{opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;}
nav {font-family: 'IBM Plex Mono', monospace; font-size: 1rem;}
.nav a {display: block; text-decoration: none; color: var(--color-bg); padding: 6px;}
.nav a:not(:last-child) {border-bottom: 1px dotted var(--color-bg);}
.hamburger:focus {outline: none;}
.nav a:focus {outline: none;}
/* ===================
Responsive
=================== */
.grid {display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; align-items: start;}
@media (min-width: 768px){
.grid {grid-template-columns: repeat(3, 1fr); gap: 1rem;}
}