* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
  background: #7f5af0;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

[class*="col-"] {
  float: right;
}

#sidenavbar {
  z-index: 1;
  margin-left: -8px;
  overflow: visible;
  background-color: #121629;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}

#sidenavbar button {
  all: unset;
}

#sidenavbar a,
button {
  margin: 5px auto;
  color: #eff0f3;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  font-size: 1.4em;
  border: none;
}

#sidenavbar a:hover {
  background: #eff0f3;
  color: #2a2a2a;
  cursor: pointer;
}

#sidenavbar button {
  border: none;
}

.main {
  height: 100%;
}

body {
  background-color: #16161a;
  color: #94a1b2;
  font-size: 1.4em;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.6em;
  margin-left: 140px;
}

p {
  text-align: justify;
  font-size: 0.875em;
}

header {
  text-align: center;
}

footer,
aside,
article {
  text-align: center;
  padding: 2%;
  margin: 1.5%;
}

img {
  width: 100%;
  max-width: max-content;
  padding: 16px;
  height: auto;

  display: block;
}

.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  [class*="col-"] {
    width: 100%;
  }
}