@font-face {
  font-family: "Open Sans";
  src: url("./fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf")
    format("truetype");

  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("./fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.ttf")
    format("truetype");

  font-weight: 100 900;
  font-style: italic;
}

h1 {
  font-family: "Open Sans";
  font-weight: 700;
}

em {
  font-family: "Open Sans";
  font-style: italic;
}

.top_bar {
  width: "100%";
  background-color: #33393f;
  padding-inline: 15px;
  padding-block: 10px;
  color: #ffffff;
  font-size: large;
  font-family: "Open Sans";
  font-weight: 600;
  display: flex;
  flex-direction: row;
  gap: 7px;
  justify-items: center;
  align-items: center;
}

.main_body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.divider {
  width: "100%";
  height: 2px;
  background-color: #000000;
  margin-block: 3px;
}

h3 {
  font-family: "Open Sans";
  font-weight: 400;
}

li {
  font-family: "Open Sans";
  font-weight: 500;
}

a {
  color: #303d31;
  font-family: "Open Sans";
  padding: 1px;
}

a:hover {
  border: solid 1px #008000;
  font-family: "Open Sans";
  padding: none;
}

a:active {
  border: none;
  background-color: #008000;
  color: #ffffff;
}

body {
  background-color: #fdfdef;
}

::selection {
  background-color: #63aa6388;
}

.outlined_light_button {
  padding: 1px;
  background-color: inherit;
  border: 1px solid #ffffff;
}

.outlined_light_button:hover {
  box-shadow: 3px 2px 2px 0.5px white;
  cursor: pointer;
}

.outlined_light_button:active {
  box-shadow: 3px 2px 2px 0.5px white;
  cursor: pointer;
  background-color: #ffffff77;
  fill: #000000;
  color: #000000;
}