:root {
  font-family: Inter, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

:root {
  /* Background Colors */
  --bg0-h: #1d2021;
  --bg0: #282828;
  --bg0-s: #32302f;
  --bg1: #3c3836;
  --bg2: #504945;
  --bg3: #665c54;
  --bg4: #7c6f64;

  /* Foreground Colors */
  --fg0: #fbf1c7;
  --fg1: #ebdbb2;
  --fg2: #d5c4a1;
  --fg3: #bdae93;
  --fg4: #a89984;

  /* Colors */
  --red: #cc241d;
  --red-light: #fb4934;
  --green: #98971a;
  --green-light: #b8bb26;
  --yellow: #d79921;
  --yellow-light: #fabd2f;
  --blue: #458588;
  --blue-light: #83a598;
  --purple: #b16286;
  --purple-light: #d3869b;
  --aqua: #689d6a;
  --aqua-light: #8ec07c;
  --gray: #928374;
  --orange: #d65d0e;
  --orange-light: #fe8019;
}
p{
  font-size: 0.8rem;
  text-wrap: pretty;
}
p.left{
  text-align: left;
}
p.center{
  text-align: center;
}
p.right{
  text-align: right;
}


a{
  color: var(--fg1);
  text-decoration: none;
}
a:hover{
  text-decoration: none;
  color: var(--aqua-light);
}
img{
  width: 100%;
}



.gen-width-page {
  width: 50vw;
  margin: auto;
}

@media screen and (max-width: 1000px) {
  .gen-width-page {
    width: 80vw;
    margin: auto;
  }  
}

/*------------------------------------*/

.round10px{
  border-radius: 10px;
}

.content-page{
  background: var(--bg1);
  padding: 1rem;
}
.middler-p{
  display: flex;
  vertical-align: middle;
  height: 100%;
}
.middler-p p{
  margin: auto 0;
}