:root.light {
  --bg-color: white;
  --text-color: black;
}

:root.dark {
  --bg-color: black;
  --text-color: white;
}

body {
  padding-top: 100px;
  padding-right: 30px;
  padding-left: 30px;
  background-color: var(--bg-color);
  color: var(--text-color);
}
#navbar {
  font-size: 35px;
  padding-right: 50px;
  padding-left: 70px;
  font-weight: bold;
  letter-spacing: 2px;
}
h1 {
  font-size: 300px;
  font-family: "Arial";
  padding-left: 180px;
  padding-top: 60px;
  padding-bottom: 0px;
  letter-spacing: 20px;
}

h1:hover {
  text-shadow: 10px 10px #b1b1b1;
}
.nav-item {
  padding-right: 15px;
  padding-left: 15px;
}

.nav-item a {
  color: var(--text-color);
}

.dropdown-menu {
  font-size: 40px;
  padding-right: 5px;
  padding-left: 5px;
}

.dropbtn {
  background-color: none;
  padding: 8px;
  padding-left: 60px;
  padding-right: 60px;
  font-size: 26px;
  cursor: pointer;
  border: 0px;
}

#my {
  font-size: 70px;
  padding-left: 192px;
  font-family: "monospace";
  letter-spacing: 4px;
}
hr {
  width: 520px;
  height: 3px !important;
  text-align: left;
  margin-left: 180px;
  color: var(--text-color) !important;
  background-color: var(--text-color) !important;
}

#line {
  font-family: "Sans-serif";
  font-size: 30px;
  text-align: right;
  padding-top: 120px;
  letter-spacing: 4px;
  word-spacing: 10px;
}

.nav-link:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
}

#hr {
  margin: 1em 0 1em 180px;
  width: 520px;
  border-bottom: 3px solid var(--text-color);
}