@media (width > 1024px) {
  body {
    display: flex;
    position: relative;
    background-color: var(--color-navy-950);
    font-size: 18px;
    color: white;
    padding: 0rem 2rem;
    font: var(--font);
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    width: calc(9 / 10 * 1366px);
    height: calc(3 / 5 * 768px);
    overflow: hidden;
    max-width: none;
  }

  /* Header:Start */

  .profile {
    display: flex;
    grid-row: 1/3;
    flex-direction: column;
    background-color: var(--color-navy-900);
    border-radius: 1rem;
  }

  .user {
    display: flex;
    height: 65%;
    gap: 1.2rem;
    padding: 2rem 2rem;
    background-color: var(--color-purple-600);
    border-radius: 1rem;
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }

  .photo {
    border-radius: 100%;
    outline: 3px solid white;
    width: 5rem;
    height: 5rem;
  }

  .user div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .user div p {
    color: rgb(207, 207, 207);
  }

  .user div h1 {
    font-weight: 300;
    font-size: clamp(1rem, 8vw, 2.4rem);
  }

  .navbar {
    flex: 1;
  }

  .navbar nav {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: start;
    justify-content: space-around;
    padding: 1.3rem;
  }

  .navbar nav .btn {
    background-color: transparent;
    font-size: 1.1rem;
    border: none;
    color: white;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .navbar nav .btn:active {
    opacity: 1;
  }

  .navbar nav .btn:hover {
    transform: translateX(10px);
  }

  .sleep {
    opacity: 0.3;
  }

  /* Header:End */

  /* Card:Start  */

  .card {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background-color: var(--color-navy-200);
    cursor: pointer;
  }

  .card:active {
    filter: brightness(120%);
  }

  .card .cover {
    height: 2.5rem;
    overflow: hidden;
    display: flex;
    justify-content: end;
  }

  .card .content {
    background-color: var(--color-navy-900);
    flex: 1;
    border-radius: 1rem;
    padding: 1.7rem 1.5rem;
    display: flex;
    justify-content: space-between;
  }

  .card .content .left h2 {
    font-size: 1rem;
    font-weight: 500;
  }

  .card .content .right .hour {
    font-size: 3.5rem;
    margin-top: 0.2rem;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
  }

  .card .content .right {
    display: flex;
    flex-direction: column;
    color: var(--color-navy-200);
    align-items: start;
    justify-content: space-around;
  }

  .icon {
    rotate: 0.6rad;
    margin-right: 10px;
    margin-top: -5px;
    color: black;
    opacity: 0.18;
  }

  /* Card:End  */

  /* Color Theme:Start */

  .work {
    background-color: var(--color-work);
  }

  .play {
    background-color: var(--color-play);
  }

  .study {
    background-color: var(--color-study);
  }

  .exercise {
    background-color: var(--color-exercise);
  }

  .social {
    background-color: var(--color-social);
  }

  .self-care {
    background-color: var(--color-yellow);
  }

  /* Color Theme:End */
}