ul{
	list-style: none;
}
.presentation-main{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 50px;
	grid-row-gap: 0px; 
	padding-left: 5%;
	padding-right: 1%;
	padding-bottom: 5%;
	padding-top: 1%;
	width: 94%;
	height: auto;	
}
.closed-arrow,
.opened-arrow {
  display: inline-block; /* Needed to allow transform on inline elements */
  transition: transform 0.6s ease;
}
.closed-arrow{
	transform: rotate(0) !important;
	transition: 0.6s;
}
.opened-arrow{
	transform: rotate(90deg) !important;
	transition: 0.6s;
}

.summary-arrow{
	transition: transform;
}
.personal-banner{
	display: flex;
	flex-direction: column;
	flex: 2fr 1fr;
	padding: 2%;
	border-radius: 25px;
	
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .35);
}
.my-role, .my-name{
	line-height: 0.5;
}
.my-role{
	font-size: 1.8rem;
}
.my-name{
	line-height: 1;
	color: purple;
}
.personal-info, .personal-social{
	width: 100%;
}
/*.contact-info{
	list-style: none;
	display: flex;
	gap: 1px;
}
.contact{
	font-size: 1.2rem;
	border-radius: 50%;
	padding: 1%;
	background-color: black;
}*/
.personal-social ul {
    list-style: none; /* Removes default bullet points */
    padding: 0;
    display: flex; /* Makes icons display in a row */
    gap: 15px; /* Adds space between icons */
}

.personal-social ul li a {
    color: #333; /* Or your preferred color */
    font-size: 1.9rem; /* Adjust icon size */
    text-decoration: none; /* Removes underline from links */
}

.personal-social ul li a:hover {
    color: #007bff; /* Change color on hover */
}

.direct-contact{
	padding: 2%;
	padding-top: 5%;
	
	//box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .35);

}
.direct-contact ul {
    list-style: none; /* Removes default bullet points */
    padding: 0;
    display: flex; /* Makes icons display in a row */
    flex-direction: column;
    gap: 15px; /* Adds space between icons */
}

.direct-contact ul li a {
    color: #333; /* Or your preferred color */
    font-size: 18px; /* Adjust icon size */
    text-decoration: none; /* Removes underline from links */
}

.direct-contact ul li a:hover {
    color: #007bff; /* Change color on hover */
}

.skills-and-tools{
	padding: 1%;
	padding-top: 5%;
	//box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .35);
}
.copied-toast {
  background-color: black;
  border-radius: 50px;
  color: white;
  text-align: center; /* This centers the text *within* the p tag, but we need to center the p tag itself */
  position: absolute;
  width: 14%;
  height: 1%;
  padding: 2%;
  left: 41%;
  /* Flexbox properties for centering the child (the p tag) */
  display: flex; /* Establishes a flex container */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  transition: 1s;
  opacity: 0;
  top: -5%;
}
.copied-toast p{
	font-size: 1rem;
	font-weight: bold;
}
.copied-toast-appear{
	opacity: 1;
	top: 1%;
}