:root{
  --bg-color: #1A0425;
  --bg-color2: #2B2031;
  --fg-color: #5A76C4;
  --fg-color2: #F84AA7;
  --fg-color3: #AD8785;
}
  
body{
  font-family: "Roboto", sans-serif;
  font-size:14pt;
  background:var(--bg-color);
  color:var(--fg-color);
}

select, button{
  font-size:inherit;
  height:fit-content;
  background:var(--bg-color);
  color:var(--fg-color);
}
  
h1 {
  grid-row:2;
  grid-column:1 / span 3;
  text-align:center;
  width:100%;
}

h2 {
  margin-top:0em;
  text-align:center;
  grid-row:1;
  grid-column:1/span 2;
}

a {
  text-decoration:none;
  color:var(--fg-color);
}

.hline{
  height:0.2em;
  margin-bottom:1em;
  width:100%;
  background-color:var(--bg-color2);
  grid-column: 1 / span 3 ;
}

.vline{
  height:100vh;
  width:0.2em;
  background-color:var(--bg-color2);
  grid-column:2;
  margin-top:-1em;
}

.link_box{
  background:var(--bg-color2);
  border-radius:1em;
  margin:0.5em;
  padding:0.5em;
  text-align:center;
}


.collapse_button{
  justify-self:end;
  grid-column:2;
  border:none;
}

#header_row{
  grid-row:1;
  grid-column:1 / span 3;
  display:grid;
  grid-template-rows:auto;
  grid-template-columns:auto auto auto;
  justify-content:stretch;
}

#footer_row{
  margin-left:1em;
  padding-top:0.5em;
  padding-bottom:0.5em;
}