* {
  box-sizing: border-box;
}

hr {
  border: none;
  border-top: 1px solid grey;
  margin: 10px 0;
  opacity: 1;
}

h1 {
  justify-self: center;
}

body {
  background-color: lightgrey;
  margin: auto;
}

.text-stroke {
  paint-order: stroke fill;
  -webkit-text-stroke: 6px white;
}

.container {
  display: flex;
  flex-direction: row;
  margin: auto;
  gap: 5px;
  width: 80vw;
  max-width: 100%;
}

.main {
  border: 1px solid grey;
  padding: 8px;
  flex: 8;
  box-shadow: 0 0 0 2px #fff;
  background-color: white;
  min-width: 0;
  min-height: 650px;
  color: black;
  display: flex;
  flex-direction: column;
}

.center {
  text-align:center;
  font-size: 20px;
}

.side-box {
  border: 1px solid grey;
  padding: 5px;
  flex: 2;
  min-height: 650px;
  box-shadow: 0 0 0 2px #fff;
  background-color: white;
  min-width: 0;
  color: black;
  display:flex;
  flex-direction:column;
}

.nav-link {
  width: 100%;
  height:25px;
  text-align:left;
  border: none;
  outline: none;
  box-shadow: none;
  font-size:16px;
}

.footer {
  padding:5px;
  width: 80vw;
  margin: auto;
  margin-top: 5px;
  height: 200px;
  border: 1px solid grey;
  box-shadow: 0 0 0 2px #fff;
  background-color: white;
  color: black;
  display:flex;
  justify-content: center;
  align-items:center;
}

.anta {
  font-family: "Anta", sans-serif;
}

.sans {
  font-family: "Sansation", sans-serif;
}

.robo {
  font-family: "Roboto", sans-serif;
}

@media only screen and (max-width: 1000px) {
  body {
    padding: 0;
  }

  .container {
    width: 100%;
  }

  .main {
    width: 100%;
    font-size: 0.9em;
    flex:7;
  }

  .side-box {
    font-size: 0.8em;
    flex:3;
  }

  .footer {
    width: 100%;
  }
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease;
}

::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: color-mix(in srgb, white 60%, transparent);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, grey 60%, transparent);
  border-radius: 20px;
  border: 2px solid color-mix(in srgb, white 80%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: black;
}