/* https://gwfh.mranftl.com/fonts/fira-sans?subsets=latin%2Clatin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fira-sans-v17-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('./fira-sans-v17-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  src: url('./fira-sans-v17-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 700;
  src: url('./fira-sans-v17-latin_latin-ext-700italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 900;
  src: url('./fira-sans-v17-latin_latin-ext-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 900;
  src: url('./fira-sans-v17-latin_latin-ext-900italic.woff2') format('woff2');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --canvas-width: 600px;
  --canvas-height: 800px;
  --canvas-padding: 30px;
  --color-primary-rgb: 0, 0, 0;
  --color-secondary-rgb: 55, 55, 55;
  --color-background-rgb: 255, 255, 255;
  --font-size-base: 32px;
  --font-size-xxl: 3.5em;
  --font-size-xl: 2em;
  --font-size-l: 1.25em;
  --font-size-s: .75em;
  --font-size-xs: .675em;
  --font-size-xxs: .5em;
}
html {
  font-family: 'Fira Sans', sans-serif;
  font-size: var(--font-size-base);
}
body {
  position: relative;
  height: var(--canvas-height);
  width: var(--canvas-width);
  padding: var(--canvas-padding);
  color: rgb(var(--color-primary-rgb));
  background-color: rgb(var(--color-background-rgb));
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
h1, h2, h3 {
  line-height: .9;
  font-style: italic;
}
h1 {
  font-weight: 900;
  font-size: var(--font-size-xxl);
}
h2 {
  font-weight: 400;
  font-size: var(--font-size-xl);
}
h3 {
  font-weight: 400;
}
.bg {
  position: absolute;
  top: -80px;
  left: 70px;
  height: var(--canvas-height);
  width: var(--canvas-width);
  background-size: contain;
  background-position: 50%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPjxwYXRoIGQ9Ik04MzIuNjAyIDczMy4xMTZjMTYuMTI2LTIyLjAxOSAyOS4wMDEtNDkuMTc3IDM4LjYzMS04MS40NTIgOS42MTUtMzIuMjY3IDE0LjQzLTY5LjUwNiAxNC40My0xMTEuNzE1IDAtNTUuODYtOS45MzUtMTA1Ljk3Mi0yOS43ODYtMTUwLjM1MS0xOS44NzMtNDQuMzY3LTQ2Ljg2Ny04Mi4yMy04MC45OTMtMTEzLjU3Ny0zNC4xNDMtMzEuMzMzLTczLjg3MS01NS4yMzMtMTE5LjE2Ni03MS42ODUtNDUuMzE0LTE2LjQzOC05My40Mi0yNC42Ny0xNDQuMjk1LTI0LjY3LTUyLjEzNSAwLTEwMS42NCA4LjM3Ny0xNDguNDk1IDI1LjEzNi00Ni44NjYgMTYuNzU4LTg4LjEzNCA0MS43NDctMTIzLjgxMyA3NC45NDEtMzUuNjk3IDMzLjIxLTY0LjA5IDc0Ljk0Mi04NS4xODMgMTI1LjIxNC0yMS4xMDUgNTAuMjcyLTMxLjY1NCAxMDguOTI0LTMxLjY1NCAxNzUuOTQ4IDAgNjkuNTE4IDEwLjcwOCAxMjkuNTY2IDMyLjExOSAxODAuMTQ3IDIxLjQxMiA1MC41ODcgNTAuNDE3IDkyLjE2NiA4Ny4wNDggMTI0Ljc0MSAzNi42MSAzMi41ODYgNzkuNDMzIDU2Ljc5IDEyOC40NyA3Mi42MjEgNDkuMDE4IDE1LjgyMiAxMDEuMTU0IDIzLjczOCAxNTYuMzk4IDIzLjczOCAzMS42NTIgMCA2MS4yODItMi4xODEgODguOTA3LTYuNTE3IDI3LjYwNi00LjM1MSA0Ni42OTgtOC4zNzkgNTcuMjU0LTEyLjEwNGwtOS4zMDctNjguODkyYy02LjgzNCAyLjQ3Mi0yMi4xOTkgNS44ODktNDYuMDgxIDEwLjI0NC0yMy45MDUgNC4zMzYtNTQuMTU2IDYuNTExLTkwLjc3MyA2LjUxMS00Ny4xNzEgMC05MC40NjItNi45NzgtMTI5Ljg2NC0yMC45NDMtMzkuNDIyLTEzLjk2Ni03My41NDgtMzQuNzY5LTEwMi40MS02Mi4zNzctMjguODYtMjcuNjA4LTUxLjM2MS02Mi4wNTQtNjcuNDkxLTEwMy4zMzctMTYuMTQ3LTQxLjI3LTI0LjIwOC04OS4yMDktMjQuMjA4LTE0My44MzQgMC01Mi4xMjggNy41OTUtOTguNjc3IDIyLjgwOS0xMzkuNjM5IDE1LjIwMS00MC45NjUgMzYuNDU1LTc1LjU1NiA2My43NzItMTAzLjgwMyAyNy4zMDUtMjguMjM1IDU5Ljg4OC00OS45NTEgOTcuNzUxLTY1LjE2NyAzNy44NDUtMTUuMjAyIDc5LjQzOS0yMi44MDkgMTI0Ljc1Mi0yMi44MDkgNDUuMjkxIDAgODYuMTEzIDcuNDQ3IDEyMi40MTkgMjIuMzQyIDM2LjMwNCAxNC44OTYgNjcuMTcxIDM1LjM3NyA5Mi42MzIgNjEuNDQ1IDI1LjQzOCAyNi4wNjcgNDQuOTg3IDU2LjMyMyA1OC42NDYgOTAuNzY3IDEzLjY0NiAzNC40NDcgMjAuNDgyIDcxLjIxNyAyMC40ODIgMTEwLjMyMSAwIDIzLjU5My0xLjg1OSA0Ni43MDUtNS41ODUgNjkuMzUyLTMuNzI4IDIyLjY2NS05LjQ2OCA0Mi45ODYtMTcuMjIzIDYwLjk3OS00LjIyOSA5LjgtOS4wODggMTguNTczLTE0LjU5MiAyNi4zNDRsLjAyNi4wMTdjLTQ3LjggNjMuNzU3LTE0OS41MjQgODcuMDY2LTIzNS4yMDggOTEuMTM3di0zMC4wOWMzMy4wMzktNS4zNTQgNTguMzcyLTE2Ljc2NCA3NS4zODMtMzMuOTYzIDE4LjkxOS0xOS4xNTIgMjguNTE0LTQ0LjQ1OSAyOC41MTQtNzUuMjI3IDAtMTguOTctMy41ODEtMzUuNTQzLTEwLjY1NS00OS4yNTktNi45MjktMTMuNDA4LTE2LjI0Ni0yNS4xMzktMjcuNzA4LTM0Ljg3Ni0xMS4xMzktOS40NTMtMjQuMTk3LTE3LjYzMi0zOC44Mi0yNC4zMjUtMTQuMDQzLTYuNDA4LTI4Ljk0Ni0xMi42NTItNDQuNDU5LTE4LjYxOS0xMS42MzctNC4yNjItMjIuMzM3LTguMzg1LTMxLjgxLTEyLjI1NC04Ljg0OS0zLjYwNC0xNi41ODMtNy42ODktMjIuOTk2LTEyLjE0OC01Ljc2My0zLjk5OS0xMC4xNjctOC41MjMtMTMuMDg3LTEzLjQ1NC0yLjcxMi00LjU0OS00LjA4NS0xMC40MjktNC4wODUtMTcuNDY4IDAtMTMuMDc5IDQuNjQxLTIyLjQ1NiAxNC42MDQtMjkuNTA4IDEwLjg1NC03LjY4NSAyNy4xMTUtMTEuNTgxIDQ4LjMyNi0xMS41ODEgMjAuMjA5IDAgMzcuMTUyIDEuNzY1IDUwLjM1NCA1LjI0OSAxMy44MTIgMy42NDkgMjUuMzggNy4yMSAzNC4zODEgMTAuNTg5bDExLjQ3IDQuMzAxIDE2LjQxNS02Ny4zOTktOS4xNTItMy4zMjFjLTkuMDM5LTMuMjgzLTIxLjM2MS02Ljc3OS0zNi42MTgtMTAuMzkyLTEyLjQ4Ny0yLjk1OS0yNS45MTktNS4wMTQtNDAuMDU0LTYuMTMzVjI4NS41NGgtNzAuNzF2NjkuNTk2Yy0yOS43OTUgNS44NS01My4zMDUgMTcuODMtNjkuOTggMzUuNjgtMTguNTg3IDE5Ljg5OC0yOC4wMTIgNDUuNTMtMjguMDEyIDc2LjE4MSAwIDE3LjQ2NCAzLjMwMiAzMi41NzcgOS44MDkgNDQuOTA5IDYuMzIzIDEyLjAwNiAxNC42NDUgMjIuNDI3IDI0LjcyNyAzMC45NjggOS43NTYgOC4yNzcgMjEuMDI0IDE1LjM2MyAzMy40OTIgMjEuMDY5YTUwMS4yOSA1MDEuMjkgMCAwMDM2LjAwNiAxNC44MTkgODUyLjM1NyA4NTIuMzU3IDAgMDEzNS4yNTcgMTMuNDAzYzEwLjg4IDQuNDI4IDIwLjU2IDkuNDQ3IDI4Ljc2NiAxNC45MTkgNy42MjkgNS4wODQgMTMuNzc2IDExLjAzNyAxOC4yNzIgMTcuNjk2IDQuMTE1IDYuMDk0IDYuMTExIDEzLjM3OCA2LjExMSAyMi4yNTkgMCAxMS41NTgtNC42MzMgMjAuODM3LTE0LjE3NiAyOC4zNzYtNi45OTIgNS41MjktMjIuNTU2IDEyLjEyLTU3LjAxNiAxMi4xMi0yMy4yODIgMC00Mi45MjktMi4yNDEtNTguNDA5LTYuNjU5LTE1Ljk0OC00LjU2Mi0yOS43MDItOS41Mi00MC44OTMtMTQuNzVsLTExLjA0Mi01LjE2Mi0yMS40ODEgNjQuNDU5IDcuOTcyIDQuMzQ4YzkuMzc1IDUuMTE3IDIyLjc3OCAxMC4zMjMgNDAuOTcyIDE1LjkwMiAxNS44NzggNC44NyAzNS44OTMgNy45NjIgNTkuNjI0IDkuMjAxdjk3LjM1OGwxLjkwNS0uMTQxYzY1LjYwMS41NzkgMjcxLjE2NyAxMC4yNDcgMzY4LjIxMi0xMTkuMDQ3bC4xMjYuMDgyIi8+PHBhdGggZD0iTTQ2Mi4zMDkgMjg1LjU0Mmg2OS40OTJ2NTA0LjA3MWgtNjkuNDkyeiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  transform: scale(1.75) rotate(10deg);
  opacity: .15;
}
.top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 4.75rem 0 0 .75rem;
}
.top h1 {
  margin: .75em 0;
}
.top .price--rate1 {
  margin-left: 5rem;
  align-items: center;
}
.top .price--rate2 {
  margin-left: 1rem;
  align-items: center;
}
.value-type {
  display: flex;
  align-items: baseline;
  gap: .125em;
}
.value-type .type{
  font-size: var(--font-size-s);
  color: rgb(var(--color-secondary-rgb));
}
.value-type .diff {
  font-size: .8em;
}
.blocks {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
  padding: .75rem 0 0 .675rem;
}
.block {
  --block-size: 4.25rem;
  width: var(--block-size);
  height: var(--block-size);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: rgba(var(--color-secondary-rgb), .175);
  font-size: var(--font-size-xs);
}
.block:after,
.block:before {
  content: '';
  position: absolute;
  transform-origin: top;
  width: var(--block-size);
  height: var(--block-size);
}
.block:after { /* top */
  height: calc(.192 * var(--block-size));
  top: calc(-.192 * var(--block-size));
  left: calc(-.16 * var(--block-size));
  background-color: rgba(var(--color-secondary-rgb), .25);
  transform: skew(40deg);
}
.block:before { /* left */
  width:calc(.16 * var(--block-size));
  top: calc(-.096 * var(--block-size));
  left: calc(-.16 * var(--block-size));
  background-color: rgba(var(--color-secondary-rgb), .5);
  transform: skewY(50deg);
}
.block h4 {
  font-size: var(--font-size-l);
}
.block .txs {
  color: rgb(var(--color-secondary-rgb));
}
.blocks .block:nth-child(1) {
  opacity: .75;
}
.blocks .block:nth-child(2) {
  opacity: .875;
}
.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.stats .stat {
  align-items: center;
  flex-direction: column;
}
.stat .value {
  font-weight: 700;
  font-style: italic;
  font-size: 1.5rem;
}
.stat .type {
  font-size: var(--font-size-xs);
}
.prices {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.prices h3 {
  display: flex;
  align-items: center;
}
footer {
  justify-content: center;
}
blockquote {
  text-align: left;
  line-height: 1.33;
  font-size: var(--font-size-s);
  width: 100%;
}
.author {
  text-align: right;
  color: rgb(var(--color-secondary-rgb));
}