.body-container {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;
  font-optical-sizing: auto;
  font-family: "Domine", serif;
  font-weight: 400;
  font-style: normal;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;
}

@font-face {
  font-family: "Domine";
  src: url("/font/Domine.ttf") format("truetype");
}

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

@media screen and (width <= 600px) {
  .zigzag-card {
    flex-direction: column;
  }

  .zigzag-card-item {
    height: 50%;
  }

  .sidebar {
    width: 0%;
  }

  #main-content {
    width: 100%;
  }
}

@media screen and (width > 600px) {
  .zigzag-card {
    width: 100%;
  }

  .zigzag-card:nth-child(even) {
    flex-direction: row-reverse;
  }
  .zigzag-card:nth-child(odd) {
    flex-direction: row;
  }

  #main-content {
    width: 60%;
    padding: 2rem;
  }

  .sidebar {
    width: 20%;
  }

  .zigzag-card-item {
    width: 50%;
  }
}