/* ===================
Variables
=================== */
:root{
  --color-bg: #ECE2D0;
  --color-bg-dark: #141824;
  --color-text: #130918;
  --color-yellow: #F1AA1C;
  --legend-1: #F4C542;
  --legend-2: #E76F51;
  --legend-3: #2AB7A9;
  --legend-4: #1E3A8A;
  --legend-5: #6AA84F;
  --legend-6: #9B5DE5;
  --legend-7: #FF6F91;
  --legend-8: #FF9671;
  --legend-9: #FFC75F;
  --legend-10: #0081CF;
  --legend-11: #00C9A7;
}
/* ===================
Base
=================== */
@font-face {font-family: 'Barlow'; src: url(/assets/fonts/Barlow-Medium.ttf); font-display: swap;}
@font-face {font-family: 'Prompt'; src: url(/assets/fonts/Prompt-Bold.ttf); font-display: swap;}
html {font-size: 18px; scroll-behavior: smooth;}
body {font-family: 'Barlow', 'Roboto', sans-serif; font-size: 1rem; background: var(--color-bg); color: var(--color-text); margin: 0;}
/* ===================
Layout
=================== */
.center {display: flex; justify-content: center;}
.container {max-width: 71.25rem; width: 100%; padding: 1rem;}
.card {background-color: var(--color-bg-dark); border-radius: 12px; padding: 1rem; color: #fff;}
.chart-container {width: 100%; height: 300px;}
.cover {width: 100vw; background-color: var(--color-bg-dark); color: #ece2d0;}
.item-top-right {margin: 0;}
/* ===================
Elements
=================== */
h1 {font-family: 'Prompt', sans-serif; font-size: 2.66rem; text-transform: uppercase; margin: 0; line-height: 2.5rem; text-align: center;}
h2 {font-family: 'Prompt', sans-serif; font-size: 1rem; text-transform: uppercase; margin: 0 0 1rem 0; line-height: 1rem; background-color: var(--color-yellow); border-radius: 12px; padding: 12px; text-align: center;}
h3 {font-family: 'Prompt', sans-serif; font-size: 1rem; color: #fff; text-transform: uppercase; margin: 0; line-height: 1rem; text-align: center;}
hr {border: none; border-top: 1px dotted var(--color-yellow); margin: 0;}
p {font-size: 1rem; font-family: inherit; line-height: inherit;}
.tagline {font-family: 'Prompt', sans-serif;}
::selection {color: #fff; background: var(--color-yellow);}
/* ===================
Header
=================== */
.head {position: relative; width: 100%; height: 100lvh; display: grid; place-items: center; color: #fff; overflow: hidden; background-image: url('ARC.webp'); background-size: cover; background-position: center; background-attachment: scroll;}
.head::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); pointer-events: none; z-index: 0;}
.head > .head-content {position: relative; z-index: 1; text-align: center;}
/* ===================
Table
=================== */
.intro-table {display: flex; flex-direction: column; width: 100%; overflow: hidden;}
.intro-row {display: flex; align-items: center;}
.intro-cell1 {font-family: 'Prompt'; width: 90px; color: var(--color-bg-dark);}
.intro-cell2 {flex: 1;}
/* ===================
Legend
=================== */
.legend {font-size: 12px; line-height: 1rem; text-align: center;}
.legend-1 {background-color: var(--legend-1); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block;}
.legend-2 {background-color: var(--legend-2); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-3 {background-color: var(--legend-3); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-4 {background-color: var(--legend-4); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-5 {background-color: var(--legend-5); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-6 {background-color: var(--legend-6); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-7 {background-color: var(--legend-7); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-8 {background-color: var(--legend-8); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-9 {background-color: var(--legend-9); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-10 {background-color: var(--legend-10); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
.legend-11 {background-color: var(--legend-11); border-radius: 6px; width: 20px; height: 16px; vertical-align: bottom; display: inline-block; margin-left: 6px;}
/* ===================
Gradient
=================== */
.indicator-gradient {position: relative;}
.indicator-gradient:hover:before, .indicator-gradient:hover:after {opacity: 1;}
.indicator-gradient:before {content: ""; position: absolute; inset: -4px; z-index: -2; background: linear-gradient(160deg,#ffffff00 0%,#ffffff 15%,#00fff3 20%,#800080 25%,#ffffff00 35%,#ffffff00 40%,#ffffff 55%,#00fff3 60%,#800080 65%,#ffffff00 75%,#ffffff00 80%,#ffffff 95%,#00fff3 100%); background-size: 300% 300%; border-radius: inherit; opacity: 1; animation: gradientMove 2.5s linear infinite;}
.indicator-gradient:after /*gap*/ {content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--color-bg); border-radius: inherit; opacity: 1;}
@keyframes gradientMove {0% {background-position: 15% 15%;} 100% {background-position: 75% 75%;}}
/* ===================
Responsive
=================== */
.grid {display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%;}
@media (min-width: 768px){
.grid {grid-template-columns: repeat(2, 1fr); gap: 1rem;}
h1 {font-size: 4rem; line-height: 4rem;}
}