@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;700&display=swap');

*, *::after {
   box-sizing: border-box;
}

html {
   position: relative;
}

body {
   margin: 0;
   font-family: 'Fira Sans Condensed', sans-serif;
   min-height: 100%;
   background: #fff;
}

html::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;

   background: url("movie-bg.jpeg");
   background-repeat: no-repeat;
   background-size: cover;
   filter: blur(8px);
   opacity: 0.2;
   z-index: -2;
}

h1,
p {
   margin: 0.15rem;
}

.title-container {
   text-align: center;
   padding: 0.75rem;
}

.chart {
   width: 1000px;
   margin: 0 auto;
}

.cell-label {
   font-weight: bold;
   text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.699);
}

.treemap {
   background: white;
}

.tooltip {
   background: #f5e28edc;
   padding: 0.75rem;
   line-height: 1;
   font-size: 0.85rem;
   border-radius: 5px;
   box-shadow: 2px 2px 10px #c5c2c29a;
}

.tt-label {
   font-weight: bold;
   font-size: 0.8rem;
   letter-spacing: -0.5px;
   text-transform: uppercase;
   margin-right: 0.4rem;
}

.legend {
   display: block;
   margin: 1rem auto;
}

.legend-title {
   font-weight: bold;
   text-decoration: underline;
   text-transform: uppercase;
   letter-spacing: -0.5px;
   font-size: 0.9rem;
}