/* main menu */

/* ==============================
   SOCIALS
   ============================== */
.my-socials {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.main-social-icon{
    height: 4rem;
    width: 4rem;
}

/* ---Darkmode for Social Icons--- */
/* For both top and footer social icons */
.my-socials img{
  filter: var(--icon-filter);
}

.my-socials img:hover{
  border-radius: 50%; 
  transition: 0.3s;
}

/* ==============================
   OTHERS
   ============================== */
.profile-pic {
  display: grid;
  margin: auto;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  object-fit: cover;
  justify-content: center;
  border: 4px solid var(--color-primary-dark);
}

.main-menu-title{
  display:grid;
  font-size: 20px;
  justify-content:center;
  text-align: center;
}

#my-name{
  font-size: 40px;
}

.center{
  padding-top: 1rem;
  display:flex;
  justify-content: center;
}

.quick-menu{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  gap: 5rem;
  background-color: var(--color-primary);
  border-radius: 1rem;
  padding: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  justify-content: center;
  /* ensure there's some space between quick menu and footer on narrow viewports */
  margin-bottom: 3rem;
    /*Fixes the weird issue of where on mobile devices like a iPhone SE or Samsung S8, 
                        the footer touches the quick menu. This issue seems to arise from using "margin-top: auto;"
                        in the footer in this same file (i.e., for mobile view only). */
                        /* Seems I was wrong about needing what I talked about here for the .footer. hmm.. */
}

.quick-menu a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.quick-menu-buttons{
  background-color: var(--color-white);
  border-radius: 2rem;
  height: 3rem;
  overflow: hidden;
  width: 12rem;
  box-shadow: 3px 3px 5px var(--color-box-shadow);
}

.quick-menu-buttons p{
  margin: 0.5rem;
  font-size: 2rem;
}

.quick-menu-buttons:hover{
  background-color: var(--color-accent);
  transition: ease 0.25s;
  color:white;
}

/* .qmb-text{
  font-size: 2rem;
} */