style.css

*,
*::after,
*::before {
   box-sizing: border-box;
}

body {
   margin: 0;
   background-color: #f7f8fc;
   min-height: 100vh;
   height: 100%;
   display: grid;
   grid-template-columns: clamp(220px, 25%, 280px) 1fr;
   font-family: "mulish", sans-serif;
}

h1,
h2,
p {
   margin: 0;
}

img {
   user-select: none;
}

/* main layout */
main {
   grid-column-start: 2;
   display: grid;
   grid-template-rows: auto auto 1fr auto;
   grid-template-columns: repeat(8, 1fr);
   padding: 0 1.5rem 1.5rem;
   max-height: 100%;
}

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

/* sidebar styles */
.sidebar {
   grid-column-start: 1;
   display: flex;
   flex-direction: column;
   background: #363740;
   color: #a4a6b3;
   padding-top: 0.35rem;
   user-select: none;
   position: relative;
}

.sidebar i {
   color: #60626e;
   margin-right: 1.25rem;
   margin-left: 0.75rem;
   min-width: 25px;
}

.sidebar li {
   display: flex;
   align-items: center;
   padding: 1.1rem;
   font-weight: 400;
}

.sidebar li:hover {
   background: #3e4049;
   color: #dde2ff;
   border-left: 4px solid #dde2ff;
   padding-left: calc(1.1rem - 4px);
}

.sidebar li:hover > i {
   color: #dde2ff;
}

.sidebar-nav > ul:first-child {
   padding: 0.5rem 0 0.75rem;
}

.logo-container {
   padding: 1.25rem;
   padding-bottom: 1.75rem;
   position: relative;
}

.close-btn {
   position: absolute;
   top: 0.75rem;
   right: -0.25rem;
   font-size: 1.5rem;
   transition: transform 300ms ease, color 300ms ease;
   display: none !important;
}

.logo-container > i:hover {
   color: #8f5f5f;
   transform: scale(1.075);
}

.sidebar-nav {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.hamburger {
   display: none;
   position: absolute;
   left: 1.5rem;
   top: 1.85rem;
   cursor: pointer;
}

.hamburger > div {
   width: 25px;
   height: 3px;
   background: #252733;
   margin: 6px 0;
   border-radius: 2px;
}

.fill-bottom {
   display: none;
   position: absolute;
   width: 100%;
   height: 70px;
   left: 0;
   bottom: -70px;
   background: #363740;
}

@media (min-height: 620px) {
   .sidebar {
      position: sticky;
      top: 0;
      left: 0;
      max-height: 100vh;
      min-height: min-content;
   }

   .sidebar-nav {
      justify-content: space-between;
   }
}

@media (max-width: 740px) {
   body {
      grid-template-columns: 1fr;
   }

   .sidebar {
      position: fixed;
      z-index: 2;
      height: 100%;
      width: 280px;
      transition: transform 350ms ease-in-out;
      transform: translateX(-100%);
   }

   .open {
      transform: translateX(0);
   }

   .close-btn {
      display: inline-block !important;
   }
}

@media (max-width: 740px) and (max-height: 610px) {
   .sidebar {
      position: absolute;
   }
}

@media (max-width: 740px) and (min-height: 611px) {
   .fill-bottom {
      display: block;
   }
}

/* titlebar styles */
header {
   display: grid;
   grid-template-columns: 1fr 320px;
   grid-row: 1;
   grid-column: 1 / -1;
   padding: 1rem 0;
}

header *,
header *::after {
   box-sizing: content-box;
}

header h1 {
   font-size: 1.45rem;
   margin-top: auto;
   margin-bottom: auto;
   color: #252733;
}

header i {
   color: #c5c7cd;
   font-size: 1.1rem;
   padding: 0.35rem;
   cursor: pointer;
}

header i:hover {
   color: #bdc5db;
}

header i:last-child {
   margin-right: 1.25rem;
   margin-left: 0.75rem;
}

header img {
   width: 43px;
   border-radius: 50%;
   transition: box-shadow 500ms ease;
   cursor: pointer;
}

header img:hover {
   box-shadow: 0 0 8px 0 blue;
}

.icons {
   border-right: 2px solid #dfe0eb;
   margin-right: 1.75rem;
   user-select: none;
}

.fa-bell {
   position: relative;
}

.fa-bell::after {
   content: "";
   position: absolute;
   top: 0.25rem;
   left: 0.925rem;
   width: 6px;
   height: 6px;
   background: blue;
   border-radius: 50%;
   border: 2px solid #f7f8fc;
}

.user-img {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: 2px solid #dfe0eb;
   margin-left: 0.6rem;
}

header > div {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.25rem 1.25rem;
   padding-left: 0;
   padding-right: 0;
}

.user {
   grid-column-start: 2;
}

.name {
   font-size: 0.875rem;
   color: #252733;
   font-weight: 600;
}

@media (max-width: 740px) {
   .hamburger {
      display: block;
   }

   header > h1 {
      margin-left: 2.5rem;
   }
}

@media (max-width: 580px) {
   header {
      grid-template-columns: 1fr 1fr;
   }

   .icons {
      display: none;
   }

   .user {
      justify-content: flex-end;
   }
}

/* info cards section */
.info-cards {
   grid-row: 2;
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   column-gap: 1.5rem;
   row-gap: 1rem;
   margin-top: 1rem;
   margin-bottom: 1.5rem;
}

@media (max-width: 1080px) {
   .info-cards {
      grid-template-columns: repeat(2, 1fr);
   }
}

.info-card {
   border: 2px solid #dfe0eb;
   border-radius: 0.5rem;
   background: #fff;
   text-align: center;
   font-weight: bold;
   padding: 1.5rem 0;
}

.info-card:hover {
   box-shadow: inset 0 0 0 2px #3751ff;
}

.info-card:last-child {
   margin-right: 0;
}

.info-card > p:first-child {
   color: #9fa2b4;
   font-size: 1.1rem;
}

.info-card > p:last-child {
   font-size: 2.25rem;
   padding-top: 0.75rem;
   color: #252733;
}

.info-card:hover > p {
   color: #3751ff;
}

/* trends graph section */
.trends-container {
   grid-row: 3;
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(8, 1fr);
}

.trends {
   grid-column: 1 / 6;
   background: #fff;
   border: 2px solid #dfe0eb;
   border-right: none;
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
   display: flex;
   align-items: center;
   position: relative;
}

.trends img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.trend-title {
   position: absolute;
   top: 1.5rem;
   left: 1.5rem;
   font-size: 1.25rem;
   font-weight: bold;
}

/* data container section */
.data-container {
   grid-column: 6 / -1;
   background: #fff;
   border: 2px solid #dfe0eb;
   border-top-right-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
}

.data-item {
   padding: 1rem;
   text-align: center;
   font-weight: 600;
}

.data-item ~ .data-item {
   border-top: 1.65px solid #dfe0eb;
}

.data-item > p:first-child {
   font-size: 1rem;
   color: #9fa2b4;
   margin-bottom: 0.5rem;
}

.data-item > p:last-child {
   font-size: 1.5rem;
   color: #252733;
   font-weight: bold;
}

@media (max-width: 660px), (min-width: 720px) and (max-width: 920px) {
   .trends-container {
      grid-template-columns: 1fr;
   }

   .trends {
      grid-column: 1 / -1;
      border: 2px solid #dfe0eb;
      border-radius: 0.5rem;
   }

   .data-container {
      grid-column: 1 / -1;
      border-radius: 0.5rem;
      margin-top: 1.5rem;
   }
}

/* large cards section */
.lg-cards {
   grid-row: 4;
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
   margin-top: 1.5rem;
}

@media (max-width: 1080px) {
   .lg-cards {
      grid-template-columns: 1fr;
   }
}

.lg-card {
   border: 1.65px solid #dfe0eb;
   border-radius: 0.5rem;
   background: #fff;
   font-weight: bold;
   padding-bottom: 0.3rem;
}

.lg-card-num {
   color: #9fa2b4;
}

.card-header {
   padding: 1.65rem 1.75rem 1.25rem;
}

.card-header > p {
   font-size: 0.75rem;
   font-weight: 400;
   color: #9fa2b4;
   margin-top: 0.5rem;
}

.card-header span {
   color: #252733;
}

.card-title {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
}

.card-title > h2 {
   color: #252733;
   font-size: 1.15rem;
}

.card-title > a {
   color: #3751ff;
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
   transition: transform 0.25s ease-in-out;
}

.card-title > a:hover,
.card-title > a:focus {
   transform: scale(1.04);
}

.card-header ~ div {
   border-bottom: 2px solid #dfe0eb;
   width: calc(100% + 2px);
   transform: translateX(-1px);
   font-size: 0.875rem;
   font-weight: 600;
   color: #252733;
   max-height: 3.5rem;
   padding: 1.15rem 1.75rem;
   display: flex;
   justify-content: space-between;
}

.card-header ~ div:last-child {
   border: none;
}

.badge {
   position: absolute;
   right: 1.5rem;
   top: 50%;
   transform: translateY(-50%);
   background: #f0f1f7;
   color: #9fa2b4;
   padding: 0.35rem 0.85rem;
   border-radius: 8px;
   font-size: 0.6875rem;
   font-weight: bold;
   text-transform: uppercase;
   user-select: none;
}

/* checkbox styling */
.checkbox-container {
   display: flex;
   align-items: center;
}

.checkbox {
   position: relative;
}

input[type="checkbox"] {
   opacity: 0;
   margin-right: 1.125rem;
}

.checkbox > label {
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 50%;
   width: 22px;
   height: 22px;
   border: 3px solid #c5c7cd;
   cursor: pointer;
   background: #fff;
}

label::after {
   content: "";
   opacity: 0;
   position: absolute;
   top: 33%;
   left: 22%;
   border: 3px solid white;
   border-top: none;
   border-right: none;
   transform: rotate(-45deg);
   width: 12px;
   height: 6px;
}

input[type="checkbox"]:checked + label {
   background: #3751ff;
   border: none;
}

input[type="checkbox"]:hover:not(:checked) + label {
   background: #ebeeff;
}

input[type="checkbox"]:hover:checked + label {
   box-shadow: 0 0 8px 0 #a0a0a0a0;
}

input[type="checkbox"]:checked + label::after {
   opacity: 1;
}

/* make fonts/spacing smaller on small devices */
@media (max-width: 380px) {
   html {
      font-size: 15px;
   }
}

@media (max-width: 340px) {
   html {
      font-size: 14px;
   }
}