@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

body {
  text-align: center;
  background-color: black;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0%), #0055ff),
    url(../Assets/bg.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0% 0%, bottom;
  color: white;
  font-family: "Poppins";
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.main {
  background-color: #232529;
  position: relative; /* Change to relative for better positioning */
  border-radius: 10px;
  box-shadow: 1px 1px 25px 5px black;
  padding: 20px; /* Add padding for better spacing */
  margin: 50px 150px;
}

.banner1 {
  height: 100px;
  width: 100%;
  background-size: contain; /* Ensure the entire image is visible */
  background-position: center;
  background-repeat: no-repeat; /* Prevent image repetition */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.avatar {
  border-radius: 100px;
  border: 10px solid #232529;
  background-color: #232529;
  cursor: pointer;
}

.name {
  margin: 0 0 20px 0;
}

.abtme {
  padding: 0 10px;
}

hr {
  background-color: white;
  border: 1px solid white;
  border-radius: 1px;
  margin: 0 15px;
  opacity: 10%;
}

.projects {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: initial;
  padding: 20px; /* Add padding to prevent overflow */
  align-items: center;
}

.project {
  border: 1px solid hsla(0, 0%, 100%, 0.06);
  border-radius: 10px;
  margin: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  background-color: #2c2f33;
  width: min-content; /* Adjust width to 100% */
  height: auto; /* Adjust height to auto */
}

.back {
  color: #ffffff;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ffffff;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.back:hover {
  background-color: #ffffff;
  color: #000000;
}

.project-name {
  margin: 16px;
}

.fab, .fa-solid {
  padding: 10px;
  font-size: 25px;
  text-decoration: none;
  border-radius: 50%;
}

.fa-discord { color: #5865f2; }
.fa-discord:hover { color: #7289da; }
.fa-list { color: #02a9ff; }
.fa-list:hover { color: #0b1622; }
.fa-twitch:hover { color: purple; }
.fa-github:hover { color: black; }
.fa-reddit { color: #ff4500; }
.fa-reddit:hover { color: #ff4500; }
.fa-spotify:hover { color: #1ed760; }
.fa-steam:hover { color: #0b1c4a; }
.fa-chevron-down {
  font-size: 50px;
  text-decoration: none;
  color: white;
  width: 35px;
}
.fa-chevron-down:hover { color: wheat; }

.OpenIcon {
  opacity: 30%;
  margin-top: 6px;
  transition: all 0.3s ease-out;
}
.OpenIcon:hover { opacity: 100%; }

/* width */
::-webkit-scrollbar { width: 15px; }
/* Track */
::-webkit-scrollbar-track {
  background: linear-gradient(to top, rgb(0 0 0 / 0%), #0055ff);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #d4d4d4; }

a, .©️ {
  text-decoration: none;
  color: white;
}

.©️ {
  margin: 33px 0 10px;
  text-shadow: 0px 0px 2px black;
}

::selection {
  color: #0055ff;
  background: #0000003d;
}

@media only screen and (max-width: 530px) {
  .main, .banner { width: 345px; }
}

@media only screen and (max-width: 376px) {
  .main, .banner { width: 309px; }
}

@media only screen and (max-width: 326px) {
  .main, .banner { width: 250px; }
}

.project-description {
  font-size: 14px;
  color: #b0b0b0;
  margin: 0 0 10px 0;
}

.project a {
  color: #00b0f4;
  text-decoration: none;
}

.project a:hover {
  text-decoration: underline;
}

.project-links {
  display: flex;
  gap: 10px; /* Add space between buttons */
}

.project-links a {
  color: #00b0f4;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #00b0f4;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.project-links a:hover {
  background-color: #00b0f4;
  color: white;
  text-decoration: none;
}