:root
{
  --bg: #FFFFEC;
  --fg: #303030;
  --fg-2: #ECEB91;
  --fg-3: #4A2387;
  --fg-4: #DCF0f8;
  --fg-5: #7a7ac5;

  overflow: hidden;
}

::selection
{
  background-color: var(--fg-2);
}

body
{
  width: 100%;
  height: 100%;
  font-family: "BlexMono Nerd Font Mono";
  background-color: var(--bg);
  color: var(--fg);
}

#flag
{
  position: absolute;
  left: 92%;
  right: 99%;
  top: 0%;
  bottom: 0;
  transform: scale(0.5);
}

.badge
{
  transform: scale(1.4);
  display: inline-block;
  margin: 17px;
}

#navbar-top
{
  display: flex;
  align-items: last baseline;
  height: 1.5em;
  width: 101% !important;
  margin-top: -0.5em;
  margin-left: -1em;
  margin-right: -3em;
  background-color: var(--fg-4);
  border-bottom: 0.6mm solid black;
}

#navbar-bottom
{
  display: flex;
  align-items: last baseline;
  height: 1.5em;
  width: 101% !important;
  margin-left: -1em;
  margin-right: -3em;
  background-color: var(--fg-4);
  border-bottom: 0.6mm solid black;
}

.navbar-items
{
  margin-left: 1em;
  color: var(--fg);
  text-decoration: none;
  font-weight: bold;
}

.navbar-items:hover
{
  background-color: var(--fg-2);
}

.pad
{
  padding: 0 !important;
  height: 100%;
  color: var(--fg-5);
  fill: var(--fg-5);
  background-color: var(--fg-5);
}
.pad:hover
{
  background-color: var(--fg-5);
}