@import url('/assets/fonts/SignikaNegative.css');

body {
  font-family: 'Signika Negative', sans-serif;

  /* background-color: #1d121c; */
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);

  min-height: 100vh;
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  flex-direction: column;

  font-size: 13pt;

  padding-top: 2.5vh;
}

main {
  background-color: white;
  padding: 1rem;

  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;

  width: 85%;
  overflow: hidden;
}

main > * > h2 {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #cccccc;
}

nav {
  width: 15%;

  background-color: #ffcccc;

  border-right: 2.5px solid black;

  padding-left: 1rem;
  padding-right: 1rem;

  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

nav > h2 {
  text-align: center;
  font-weight: bold;

  background-color: white;
  padding: 25px;

  border-radius: 25px;
  border: 2.5px solid #d69d9d;
}

nav > ul {
  list-style: none;
  padding-left: 0;
}

footer {
  margin: 1rem;
  padding: 0.5rem;
  text-align: center;
  background-color: white;

  border: 2.5px solid black;
  border-radius: 25px;
}

table {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
}

th, td {
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f5f5f5;
}

hr {
  border: none;
  height: 1px;
  background-color: black;
}

.nav-item {
  text-align: center;
  background-color: white;

  border-radius: 25px;
  border: 2.5px solid #d69d9d;

  width: 100%;

  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-item:hover {
  background-color: rgb(229, 229, 229);
}

.nav-item > a {
  text-decoration: none;
  color: black;
  width: 100%;
  display: block;
}

.container {
  margin-left: auto;
  margin-right: auto;

  max-width: 90vw;
  min-width: 90vw;
  min-height: 95vh;

  border: 2.5px solid black;
  border-radius: 25px;
  
  overflow: hidden;
}

.split-view {
  display: flex;
}

.asides > ul {
  list-style: none;
  padding-left: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
}

.asides > ul > li {
  margin: 1rem;
  padding: 0.5rem;
  
  border: solid 1px black;
  border-radius: 25px;

  text-align: center;

  width: 250px;
}

.tableblock > p {
  padding: 0;
  margin: 0;
}

@media screen and (width <= 600px) {
  nav {
    background-color: white;
    width: auto;
    border-right: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    border-bottom: 2.5px solid black;
  }

  nav > h2 {
    border-radius: 0;
    border: 0;
    padding: 0;
    margin: 0;

    padding-top: 1rem;
  }

  main {
    width: unset;
    border-radius: 0;
  }

  .split-view {
    display: block;
  }

  .container {
    border-radius: 0;
    background-color: white;
  }

  .asides {
    flex-direction: column;
    align-items: center;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1d121c;
    background-image:
      linear-gradient(to right, #4c304b 1px, transparent 1px),
      linear-gradient(to bottom, #4c304b 1px, transparent 1px);
  }

  main {
    background-color: #1d121c;
    color: white;
  }

  a {
    color: #ffccde;
  }

  a:visited {
    color: #f78fb3;
  }

  table {
    border: 1px solid white;
  }

  tr:nth-child(even) {
    background-color: #281927;
  }

  nav {
    background-color: #281927;
  }

  nav > h2 {
    background-color: #1d121c;
    color: white;
  }

  footer {
    background-color: #1d121c;
    color: white;
  }

  hr {
    background-color: white;
  }

  .asides > ul > li {
    background-color: #281927;
    border: solid 1px white;
  }

  .nav-item {
    background-color: #1d121c;
    color: white;
  }

  .nav-item:hover {
    background-color: #4c304b;
  }

  .nav-item > a {
    color: white;
  }
}

@media screen and (width <= 600px) and (prefers-color-scheme: dark) {
  nav > h2 {
    background-color: unset;
  }
}