.main {
  display: flex;
  flex-direction: column;
  height: 100%; /* full height of its parent */
}

.header {
  /*add menu and high school achivements tab*/
  /*position: fixed;*/
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(25, 25, 35);
  padding: 5px 20px;
  z-index: 999;
  text-align: left; /*fix this*/
  flex-shrink: 0;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.6);
}

h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 10px 0;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

h2 {
  /*my projects .....*/
  font-weight: 600;
  margin: 17px 0;
  font-size: 16px;
}
h3 {
  /*name & project names*/
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0;
}
h4 {
  /*main text from side prof & year for projects*/
  margin: 10px 0;
  font-size: 13px;
  font-weight: 550;
}
p {
  margin: 2px 0;
  color: #a0a0a0;
  font-size: 13px;
}
body {
  font-family: "Poppins", sans-serif;
  background-color: rgb(30, 30, 40);
  margin: 0;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh;
}
.page {
  color: aliceblue;
  background: rgb(41, 41, 52);
  width: 90%;
  height: 90%;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.side-page {
  width: 290px;
  display: flex;
  flex-direction: column;
}
.side-page-profile {
  padding: 30px;
  background-color: rgba(37, 37, 50, 0.98);
  text-align: center;
}
.side-page-profile-picture img {
  box-shadow: 0 0 3px aliceblue;
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
}
.side-page-scroll-container {
  padding: 15px 15px 90px 15px;
  background-color: rgb(30, 28, 38);
  flex-grow: 1;
  overflow-y: auto;
}
.side-page-contact-information {
  padding: 10px;
  text-align: center;
}
.main-page {
  background-color: rgb(30, 29, 40);
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.main-page-banner {
  padding: 60px;
  height: 200px;
  border-radius: 12px;

  background: linear-gradient(rgba(30, 30, 40, 0.2), rgba(30, 30, 40, 0.2)),
    url("assets/images/earth.jpg") center/cover no-repeat;
  color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-page-banner-github-button {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: orange;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.main-page-banner-github-button:hover {
  transform: translateY(-3px);
  background-color: darkgoldenrod;
}
.project {
  margin: 0px auto 20px auto;
  height: auto;
  display: flex;
  width: 90%;
  background-color: rgba(37, 37, 50, 0.98);
}
.icon {
  width: 20px;
}
.project-info {
  padding: 10px;
  flex-direction: column;
  width: 50%;
}
/*MAKE IT SO THAT THE IMAGE HEIGHT INCREASES
      WHEN THE DIV CLASS HEIGHT ALSO INCLEASES*/
.project-image {
  margin-left: auto;
  object-fit: contain;
  height: 200px;
}
.view-project-button {
  margin: 20px 0 20px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  background-color: orange;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-project-button:hover {
  transform: translateY(-3px);
  background-color: darkgoldenrod;
}

.info-bar-certifications {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.info-bar-certifications img {
  height: 10px;
  height: 200px;
}

.side-page-scroll-container-information {
  margin: 0 0 11px 0;
  padding: 0 0 15px 0;
  border-style: solid;
  border-width: 0 0 0.5px;
  border-color: #6f6f70;
}
.language-container {
  display: flex;
  gap: 20px; /* space between languages */
  justify-content: center; /* center all items horizontally */
  align-items: flex-start; /* align tops of the circles */
}
.language {
  align-items: center;
  margin: 20px 0;
}
.outer-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(orange var(--percent), rgb(25, 25, 35) 0%);
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 6px 6px 12px -1px rgba(0, 0, 0, 0.2);
}

#percent-bg {
  --percent: 75%;
}

#percent-eg {
  --percent: 100%;
}
.inner-circle {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: rgb(25, 25, 35);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: inset 4px 4px 8px -1px rgba(0, 0, 0, 0.5),
    inset -4px -4px 8px -1px rgba(255, 255, 255, 0.1);
}
.programing-language-text {
  justify-content: space-between;
  display: flex;
  align-items: center;
  text-align: center;
}
.outer-bar {
  width: 100%;
  height: 10px;
  background-color: rgb(25, 25, 35);
  box-shadow: 4px 4px 8px -1px rgba(0, 0, 0, 0.7);
}
.inner-bar {
  width: var(--percent);
  height: 10px;
  background-color: orange;
}
#java {
  --percent: 90%;
}
#c-sharp {
  --percent: 80%;
}
#python {
  --percent: 20%;
}
#html-css {
  --percent: 20%;
}

.skills {
  border-radius: 15px;
  padding: 15px 20px;
  display: inline-block;
  font-size: 13px;
  font-weight: 550;
}

.skills ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skills li {
  margin: 8px 0;
  position: relative;
  padding-left: 25px;
}

.skills li::before {
  content: "✔";
  color: #f7b731; /* Yellow checkmark */
  position: absolute;
  left: 0;
  font-weight: bold;
}

.resume-link {
  font-weight: 550;
  text-decoration: none;
  padding: 17px 0;
  font-size: 16px;
  color: #a0a0a0;
  text-shadow: #ffffff 0px;
  transition: text-shadow 0.3s ease;
  transition: color 0.5s ease;
}
.resume-link:hover {
  transform: translateY(-3px);
  color: rgb(255, 255, 255);
  text-shadow: #ffffff 0px 0px 1px;
}

.main-page-banner-typing-effect {
  margin-bottom: 10px;
  height: 23px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid orange;
  width: 0;
  animation: typing 4s steps(35) forwards, blinkCaret 0.75s step-end 5 forwards;
  animation-fill-mode: forwards;
  font-size: 20px;
  color: orange;
  text-shadow: 0 0 4px rgba(255, 165, 0, 0.6);
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 35ch;
  }
}

@keyframes blinkCaret {
  0%,
  100% {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}