@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: "Comic Neue", cursive;
  color: rgb(187, 188, 190);
  display: flex;
  flex-direction: column;
}

strong {
  color: rgb(206, 206, 206);
}

a {
  text-decoration: none;
  color: inherit;
}
a.current {
  font-weight: bold;
  color: rgb(223, 223, 223);
}
a:hover {
  color: white;
}

h2 {
  margin: 4vh 1.5vh;
}

h3 {
  margin: 6vh 1.5vh;
  margin-bottom: 2vh;
}

h4 {
  margin: 3vh 1vh;
  margin-left: 1rem;
  margin-bottom: 1vh;
}

p {
  text-indent: 2rem;
  max-width: 800px;
  padding-left: 1rem;
}

header {
  width: 100%;
  height: 10vh;
  background-color: #111216;
}
header h1 {
  text-align: center;
  width: 100%;
  padding: 1rem;
}

footer {
  width: 100%;
  height: 16.6666666667;
  background-color: #111216;
  display: grid;
  grid-template-columns: 3fr 0.5fr 0.5fr 0.5fr 0.5fr 2.5fr;
  margin-top: auto;
  padding: 2rem 0;
}
footer > * {
  display: flex;
  align-items: center;
}
footer p {
  padding: 2.5% 7%;
  text-indent: 0;
}
footer a {
  display: flex;
  align-items: center;
}
footer a img {
  width: 30px;
  height: 30px;
}
footer a p {
  font-size: xx-small;
}
footer #personalInfos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  justify-self: start;
}
footer #personalInfos > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
footer #personalInfos img {
  width: 20px;
  height: 20px;
}
footer .footH3 {
  margin-top: 6vh;
}
footer .footP {
  margin-bottom: 8vh;
}

#button, #title {
  text-align: center;
}
#button strong, #title strong {
  color: #111216;
}

#buttondiv {
  height: 4vh;
  width: 4vw;
  background-color: rgb(187, 188, 190);
  font-weight: bold;
  border-radius: 20%;
  margin-left: 1vw;
  margin-top: 73vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#centralPage {
  display: grid;
  grid-template-columns: 1fr 3fr 12fr;
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
  align-items: start;
  flex-shrink: 0;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  height: 100vh;
  scrollbar-width: none;
}
main section {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #111216;
  width: 100%;
}

#NavBar {
  background-color: #111216;
  height: 100vh;
  overflow: hidden;
}

#pfp img {
  width: inherit;
  height: 12vh;
}
#pfp span {
  display: inline-block;
  text-align: center;
}

#leftSubNavBar {
  background-color: #111216;
  box-shadow: inset 0 0 0 0.5px #808080;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 4vh;
}
#leftSubNavBar h4 {
  font-size: larger;
  margin: 2vh 0 0.5vh 2.5%;
}
#leftSubNavBar h4::before {
  content: "• ";
}
#leftSubNavBar a {
  font-size: small;
  margin-left: 7%;
}
#leftSubNavBar a::before {
  content: "▸ ";
}/*# sourceMappingURL=main.css.map */