.main-body {
    font-family: Tahoma, sans-serif;
    display: grid;
    grid-template-columns: .5fr 1fr;
    grid-template-areas: 
    "header1 header2"
    "aside main"
    "footer footer";
    background-color: #0f172a;
    background-image: radial-gradient(circle, rgba(163, 164, 239, 0.2) 2px, transparent 2px);
    background-size: 50px 50px;
    box-shadow: inset 0 0 60px rgba(99,102,241,0.1);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh; 
    margin: 0;
    width: 100%;
    animation: moveDots 30s linear infinite;
}

@keyframes moveDots {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.top-header-box img {
    height: 200px;
    width: 200px;
    border-radius: 10%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.top-header-box{
    grid-area: header1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    max-width: 350px;
    margin: 0 auto;
    
}

.top-header-box a {
    background-color: rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border: 1px solid rbga(255,255,255,.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    align-items: center;
    padding: .4rem;
    font-size: .6rem;
    color: white;
    text-decoration: none;
}

.profile-info p, h2 {
    color: white;
}

.second-header-box{
    grid-area: header2;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50rem;
    color: #f9fafb;

}

.second-header-box h1 {
    color: white;
}

.projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;

}

.project-cards {
    background: #1e293b;
    height: 300px;
    width: 250px;
    text-align: center;
    border-radius: 10%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease; 

}

.project-cards h3 {
    margin-bottom: .5rem;
}

.project-cards:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: center;

}

.lil-pill {
    background-color: #334155;
    backdrop-filter: blur(10px);
    border: 1px solid rbga(255,255,255,.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    align-items: center;
    padding: .4rem;
    font-size: .6rem;
    color: rgb(31, 31, 31);
}

.footer {
    grid-area: footer;   
    background: #334155;
    height: 2rem;
    width: 100%;
}

@media (max-width: 600px) {
  .main-body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header1"
      "header2"
      "footer";
    grid-template-rows: auto;
    padding: 1rem;
  }

  .top-header-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 90%;
    gap: 0.5rem;
    margin: 0 auto;
  }

  .top-header-box img {
    width: 150px;
    height: 150px;
  }

  .second-header-box {
    width: 100%;
    padding: 0 0.5rem;
  }

  .projects {
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-items: center;
  }

  .project-cards {
    width: 90%;
    max-width: 300px;
  }

  .project-cards h3 {
    font-size: 1rem;
  }

  .lil-pill {
    font-size: 0.5rem;
    padding: 0.3rem;
  }
}