html,
body {
  margin: 0;
  padding: 0;
  font-family: "Advent Pro", sans-serif;
  /* font-weight: bold; */
  /* font-size: 1.7vw; */
}

.starry_background {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4c0047, #00013d);
  background-size: cover;
  z-index: -1;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: #fefefe4f;
  animation: twinkle linear infinite;
}

@keyframes twinkle {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.nav-bar {
  position: absolute;
  margin-top: 3vh;
  margin-left: 23vw;
  color: white;
  font-size: 2.4vw;
  display: flex;
  flex-direction: row;
  gap: 1vh;
}

.nav-bar a {
  background-color: rgb(0, 7, 73);
  border-image: linear-gradient(#ae7de3, rgb(158, 98, 222), #9d51ef, #80589e, #6f29a5, rgb(88, 38, 126), rgb(87, 23, 137), #4c0b7d, #ae7de3, rgb(158, 98, 222), #9d51ef, #80589e, #6f29a5) 30;
  border-width: 0.5vw;
  border-style: solid;
}

.nav-bar a.active {
  background-color: rgb(0, 1, 47);
  color: white;
}

.nav-bar a:hover {
  background-color: rgba(0, 7, 73, 0.466);
  border-image: linear-gradient(#ae7de37c, rgba(158, 98, 222, 0.49), #9d51ef79, #80589e84, #6f29a57d, rgba(88, 38, 126, 0.501), rgba(88, 23, 137, 0.501), #4c0b7d7c, #ae7de37a, rgba(158, 98, 222, 0.507), #9d51ef7d, #80589e7e, #6f29a57e) 30;
}

a {
  color: white;
}

a:visited {
  color: white;
}

.content {
  position: absolute;
  margin-left: 27vw;
  margin-top: 24vh;
  width: 70vw;
  height: 70vh;
  color: white;
  display: flex;
  flex-direction: column;
  place-items: center;
  animation: increaseMarginTop 1s ease;
}

@keyframes increaseMarginTop {
  0% {
    margin-top: 7vw;
  }

  100% {
    margin-top: 24vh;
  }
}

h1 {
  position: absolute;
  margin-top: 7vh;
  font-size: 3vw;
}

#introduction {
  position: absolute;
  margin-top: 27vh;
  font-size: 1.2vw;
  width: 37vw;
  text-align: center;
}

h3 {
  position: absolute;
  margin-top: 16vh;
  font-size: 2.7w;
}

.home-links {
  display: flex;
  justify-content: center;
  font-size: 2.1vw;
}

#home-github {
  position: absolute;
  margin-top: 43vh;
  margin-left: 3.7vw;
}

#home-linkedin {
  position: absolute;
  margin-top: 43vh;
  margin-left: 16vw;
}

#home-email {
  margin-top: 52vh;
}

#home-github,
#home-linkedin,
#home-email {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1vh 1vw 1vh 1vw;
  border-radius: 1vw;
}

#home-github:hover,
#home-linkedin:hover,
#home-email:hover {
  background-color: rgb(0, 1, 47);
}

.resume {
  font-family: 'Amita';
  font-weight: bold;
  position: absolute;
  margin-top: 47vh;
  margin-left: 12vw;
  padding: 1.7vh 1.7vw 1.7vh 1.7vw;
  background-color: black;
  font-size: 1.3vw;
  color: white;
  animation: increaseWidth 1s ease-out forwards;
  border-radius: 1vw;
}

.resume:hover {
  background-color: rgb(0, 1, 47);
}


.skill-buttons {
  position: absolute;
  margin-top: 37vh;
  margin-left: 3vw;
  display: flex;
  flex-direction: column;
}

.skill1,
.skill2,
.skill3 {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1.7vh 1.7vw 1.7vh 1.7vw;
  animation: increaseWidth 1s ease-out forwards;
  font-size: 1.7vw;
  font-family: 'Amita';
  font-weight: bold;
  margin-top: 1.2vh;
  padding: 2vh 2vw;
  border-radius: 1vw;
}

.skill1:hover,
.skill2:hover,
.skill3:hover {
  background-color: rgb(0, 1, 47);
}

.about {
  height: auto;
  margin-top: 20vh;
  position: absolute;
  color: white;
  opacity: 0.8;
  width: 67vw;
  color: white;
  animation: increaseMarginLeft 1s ease-out forwards;
}

.about h1 {
  font-size: 4vw;
  margin-top: 1vh;
  margin-left: 5vw;
  color: white;
}

.about hr {
  width: 70vw;
  margin-top: 0px;
  margin-left: 5vw;
  margin-bottom: 2vh;
}

.about ol {
  margin-right: 5%;
  margin-left: 5%;
}

.about p {
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 11vh;
}

#about-ending-para {
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 10vh;
}

.timeline {
  width: 47vw;
  height: auto;
  margin-top: 30vh;
  color: white;
  opacity: 0.8;
  justify-content: center;
  align-items: center;
  position: absolute;
  border-spacing: 1vw;
  animation: increaseTimelineMarginLeft 1s ease;
  text-align: left;
  margin-left: 37vw;
}

.timeline table,
.timeline th,
.timeline td {
  border-color: rgb(87, 10, 159);
}

.timeline th,
.timeline td {
  border-radius: 1vw;
  border: 0.7vw solid transparent;
}

.timeline td {
  background-color: #630480;
  font-size: 2.3vh;
}

.timeline th {
  font-size: 3vh;
  background-color: #7c1586;
}


.contact_form {
  float: right;
  box-sizing: border-box;
  position: absolute;
  width: 70vw;
  height: auto;
  margin-top: 20vh;
  margin-left: 28vw;
  color: white;
  opacity: 0.8;
}

.contact_form h2 {
  font-size: 3vw;
}

.contact_form a{
  font-size: 1.2vw;
  margin-left: 1vw;
}

u {
  width: 37vw;
  border-radius: 37vw;
  margin-top: 1vh;
  margin-left: 1vw;
  text-underline-offset: 3vh;
}

.project-slider {
  display: flex;
  transition: transform 0.4 ease;
}

.project-container {
  overflow: hidden;
  width: 80vw;
  margin-top: 20vh;
  margin-right: 10vw;
  margin-left: 10vw;
  border-image: linear-gradient(#ae7de3, rgb(158, 98, 222), #9d51ef, #80589e, #6f29a5, rgb(88, 38, 126), rgb(87, 23, 137), #4c0b7d, #ae7de3, rgb(158, 98, 222), #9d51ef, #80589e, #6f29a5) 30;
  border-width: 0.5vw;
  border-style: solid;
  position: absolute;
  color: white;
  background-color: rgb(87, 10, 159);
  opacity: 0.8;
}

.project-container-info {
  flex: 0 0 79vw;
  color: white;
  margin-top: 2vh;
  margin-left: 0.7vw;
  margin-right: 0.7vw;
}

#home-image {
  border-radius: 3vw;
  margin-left: 7vw;
  margin-top: 23vh;
  width: 30vw;
  height: 73vh;
  animation: increaseOpacity 3s ease;
}

@keyframes increaseWidth {
  0% {
    width: 17vw;
  }

  100% {
    width: 23vw;
  }
}

@keyframes increaseMarginLeft {
  0% {
    margin-left: 27.7vw;
  }

  100% {
    margin-left: 28.7vw;
  }
}

@keyframes increaseTimelineMarginLeft {
  0% {
    margin-left: 36vw;
  }

  100% {
    margin-left: 37vw;
  }
}

@keyframes increaseOpacity {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

@media(max-width:800px) {

  html,
  body {
    margin: 0;
    padding: 0;
  }

  .nav-bar a {
    padding-top: 3.3vh;
    padding-bottom: 3.3vh;
    padding-right: 3.3vw;
    padding-left: 3.3vw;
  }



  .about p,
  .about ol {
    font-size: 2.7vw;
  }




  th {
    font-size: 3.5vw;
  }

  td {
    font-size: 2vw;
  }

  .project-container img {
    width: 50vw;
  }
}