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

:root{
  --bg:#F4EFE4;
  --ink:#10100E;
  --muted:#726D65;
  --line:#D6CEC1;
  --green:#123B2A;
  --loss:#8C2723;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Fira Code","Courier New",monospace;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.side-nav{
  position:fixed;
  top:42px;
  left:44px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:10;
}

.side-nav a{
  color:var(--green);
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1;
}

.side-nav a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.page{
  width:min(1180px,calc(100% - 36px));
  margin:auto;
  padding:165px 0 72px;
}

.site-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  margin-bottom:70px;
}

.site-brand{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:22px;
  line-height:1;
  letter-spacing:-.055em;
}

.site-brand:hover{
  color:var(--green);
}

.site-baseline{
  color:var(--muted);
  font-size:14px;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}

.hero h1{
  margin:0;
  font-size:clamp(68px,11vw,134px);
  line-height:.84;
  letter-spacing:-.085em;
  font-weight:700;
}

.hero p{
  max-width:800px;
  margin:42px 0 54px;
  color:var(--muted);
  font-size:clamp(17px,2vw,22px);
  line-height:1.55;
}

.stats{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:var(--bg);
}

.stats article{
  min-height:142px;
  padding:28px 24px 24px 0;
  border-right:1px solid var(--line);
  background:var(--bg);
}

.stats article:last-child{
  border-right:0;
}

.stats span{
  display:block;
  color:var(--green);
  font-size:clamp(28px,4vw,48px);
  line-height:1;
  letter-spacing:-.065em;
  font-weight:700;
  margin-bottom:22px;
}

.stats small{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:13px;
  font-weight:500;
}

.staking{
  margin:34px 0 24px;
  border-bottom:1px solid var(--line);
  padding-bottom:28px;
}

.staking-title,
.section-label{
  color:var(--green);
  font-size:13px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.staking-row{
  display:grid;
  grid-template-columns:260px 150px;
  gap:12px;
  align-items:end;
}

.staking label span{
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:700;
  margin-bottom:9px;
}

button{
  background:var(--ink);
  border:1px solid var(--ink);
  color:var(--bg);
  font:700 14px/1 "Fira Code","Courier New",monospace;
  padding:17px 16px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.04em;
}

button:hover{
  background:var(--green);
  border-color:var(--green);
}

.simulation-note{
  color:var(--muted);
  font-size:13px;
  margin:14px 0 0;
  max-width:760px;
}

.chart-section{
  margin:54px 0 42px;
}

.chart-box{
  height:390px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0;
  background:var(--bg);
}

.toolbar{
  display:grid;
  grid-template-columns:1fr 170px 170px;
  gap:12px;
  margin:32px 0 24px;
}

input,
select{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font:700 14px/1 "Fira Code","Courier New",monospace;
  padding:16px 14px;
  border-radius:0;
  outline:0;
}

input:focus,
select:focus{
  border-color:var(--green);
}

.archive{
  border-top:1px solid var(--line);
  background:var(--bg);
}

.archive-head,
.row{
  display:grid;
  grid-template-columns:155px 1.45fr 1.05fr 105px 105px 105px;
  gap:18px;
  align-items:center;
}

.archive-head{
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:700;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.row{
  padding:19px 18px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.date{
  color:var(--muted);
}

.match strong{
  display:block;
}

.score{
  color:var(--muted);
  margin-top:4px;
}

.result,
.profit,
.odds{
  font-weight:700;
}

.odds,
.result,
.profit{
  text-align:left;
  padding-left:6px;
}

.win{color:var(--green)}
.loss{color:var(--loss)}
.void{color:var(--muted)}

.loading{
  color:var(--muted);
  padding:28px 18px;
}

footer{
  color:var(--muted);
  font-size:13px;
  margin-top:24px;
}

@media(max-width:920px){
  .side-nav{
    position:static;
    flex-direction:row;
    padding:22px 18px 0;
    gap:18px;
    flex-wrap:wrap;
  }

  .page{
    padding-top:70px;
  }

  .site-header{
    align-items:flex-start;
    gap:16px;
    margin-bottom:50px;
  }

  .site-baseline{
    text-align:right;
    font-size:12px;
    white-space:normal;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .stats article{
    border-bottom:1px solid var(--line);
  }

  .stats article:nth-child(even){
    border-right:0;
  }

  .staking-row{
    grid-template-columns:1fr;
  }

  .toolbar{
    grid-template-columns:1fr;
  }

  .chart-box{
    height:310px;
  }

  .archive-head{
    display:none;
  }

  .row{
    grid-template-columns:1fr;
    gap:6px;
    padding:19px 0;
  }

  .row>div:before{
    display:block;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:11px;
    margin-bottom:2px;
  }

  .date:before{content:"Date"}
  .match:before{content:"Match"}
  .pick:before{content:"Prediction"}
  .odds:before{content:"Odds"}
  .result:before{content:"Result"}
  .profit:before{content:"Profit"}

  .odds,
  .result,
  .profit{
    padding-left:0;
  }
}