:root {
  --primary-color: darkcyan;
  --font-color: white;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: 12rem auto 12rem;
  grid-template-areas:
    "nav nav nav "
    "sidebar-left main sidebar-right"
    "footer footer footer";
  width: 100%;
}
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: main;
  min-height: 100vh;
}
.title {
  margin: 10px auto;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color);
}
i {
  margin: 5px;
}
.btn {
  border: 1px solid lightgray;
  padding: 10px 15px;
  margin: 10px auto;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  background-color: #fff;
  width: fit-content;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn:hover {
  background-color: var(--primary-color);
  color: var(--font-color);
}
.flex-1 {
  flex: 1 1 0px;
}
.flex-2 {
  flex: 2 2 0px;
}
.flex-3 {
  flex: 3 3 0px;
}
.sidebar-left,
.sidebar-right {
  background: lightgray;
}
@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "nav nav"
      "sidebar-left main" "sidebar-right sidebar-right"
      "footer footer";
  }
}
.pagination {
  padding: 10px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .current,
.pagination .page,
.pagination .next,
.pagination .last,
.pagination .previous,
.pagination .first {
  padding: 5px 7px;
  margin: 5px;
  border: 1px solid lightgray;
  border-radius: 5px;
  background-color: #fff;
}
.pagination .current {
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
}