@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&family=Pacifico&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  background-color: #6e2c4c;
}

body {margin-top: 85px;}

h1 {
  padding: 1px;
  font-family: 'Pacifico', cursive;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 5px;
  text-transform: capitalize;
}

h2 {
  padding: 1px;
  font-family: 'Pacifico', cursive;
  font-size: 0.8rem;
  text-align: center;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: capitalize;
}

h3,
h4,
h5 {
  padding: 2px;
  font-family: 'Pacifico', cursive;
  font-size: 0.6rem;
  text-align: center;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: capitalize;
}

p {
  padding: 1px;
  font-family: 'Dancing Script', cursive;
  font-size: 0.5rem;
  text-align: left;
  font-weight: 200;
  line-height: 5px;
}

a {
  padding: 5px;
  font-family: 'Dancing Script', cursive;
  text-decoration: none;
  color: black;
  font-weight: 700;
  transition: border 0.8s ease-in;
}

a:hover {border: 2px 0 solid black;}

img {max-width: 100%;}

span {margin-top: -200px;}

#container {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: 1600px;
  height: auto;
}


header {
  margin: 0 auto;
  padding: 10px;
  width: 100%;
  max-width: 1600px;
  height: 80px;
  color: white;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.5);
  border-bottom: 1px solid black;
  box-shadow: 2px 2px 5px black;
  z-index: 10;
}

header h1 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 3px;
}

header ul {
  width: 60%;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

header ul li {
  padding: 20px;
  color: white;
  border-radius: 5px;
  transition:  background-color 1.2s ease-in-out;
}

header ul li:hover {background-color: #7E2742;}

main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main #landingpage {
  margin-bottom: 300px;
  padding: 0;
  width: 100%;
  height: 800px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../assets/Mandala.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


main #landingpage article {
  margin: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

main #landingpage article div {
  margin: 0 auto;
  padding: 10px;
  width: 80%;
  height: 300px;
  display: flex;
  flex-direction: column;
  background-color: rgba(0,0,0,0.5);
  border-radius: 20px 10px;
}

main #landingpage article  div h5 {
  margin: 0;
  width: auto;
  color: #FFEBFA;
  text-align: center;
  text-shadow: 5px 5px 5px black;
  font-size: 2.5em;
}


main #landingpage article div  h3 {
  margin:  0;
  text-align: center;
  color: #FFEBFA;
  text-shadow: 5px 5px 5px black;
  font-size: 2rem;
}

main #landingpage article div h4 {
  margin: 0;
   color: #FFEBFA;
  text-shadow: 5px 5px 5px black;
  font-size: 0.8rem;
}

main #landingpage #down_arrow {
  width: 100px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  background-color: #6e2c4c;
  border-radius: 50px;
  box-shadow: 2px 2px 5px black;
  animation: 5s arrow infinite;
  transition: animation 1s ease-in-out;
}

main #landingpage #down_arrow:hover {
  filter: brightness(200%);
  box-shadow: 2px 2px 5px black;
}

@keyframes arrow {
  0% {bottom: 60px;}
  20% {bottom: 50px;}
  40% {bottom: 60px;}
  60% {bottom: 50px;}
  80% {bottom: 60px;}
  100% {bottom: 50px;}
}

main #about {
  margin: 100px 0;
  padding: 10px;
  width: 100%;
  color: white;
}

main #about article {
  padding: 10px;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 40%, 60%;
  grid-template-rows: repeat(3, 30%);
  background-color: #6e2c4c;
  border-radius: 20px;
}

main #about article img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 2;
}

main #about article #about-date{
  width: 100%;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

main #about article #about-date h4 {font-size: 1rem;}

main #about article #about-date ul {list-style: none;}

main #about article #about-date ul li {margin: 10px 0;}

main #about article #about-description {
  margin-top: 70px;
  width: 100%;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

main #about article #about-description h4 {font-size: 1rem;}

main #about article #about-description p {
  font-size: 1rem;
  line-height: 20px;
}

main #skills {
  margin: 100px 0;
  padding: 0;
  width: 100%;
  height: auto;
  color: white;
  background-color: #6e2c4c;
}

main #projects h2,
main #about h2,
main #skills h2,
main #contact h2{
  padding: 20px;
  font-size: 2rem;
}

main #skills article{
  margin: 10px auto;
  padding: 5px;
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

main #skills article div {
  display: flex;
  align-items: center;
  justify-content: center;
}

main #skills article div h5 {text-align: center;}

main #skills article img,
main #skills article div img {
  margin: 10px;
  width: 100%;
}


main #projects {
  margin: 100px auto;
  padding: 10px;
  width: 95%;
  height: auto;
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #6e2c4c;
}

main #projects #grid {
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 50%);
  grid-auto-columns: auto;
}

main #projects #grid  .card {
  padding: 5px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main #projects #grid .card img {
  width: 300px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px black;
}

main #projects #grid .card p {
  margin: 5px 0;
  padding: 5px;
  width: 100%;
  font-size: 1.5rem;
  line-height: 35px;
  text-align: center;
}

main #projects #grid .card a {
  color: white;
  cursor: pointer;
}

main #contact {
  margin: 100px 0;
  padding: 10px;
  width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #6e2c4c;
}

main #contact ul {
  padding: 5px;
  width: 100%;
  height: 100%;
  list-style: none;
}

main #contact ul li {
  padding: 5px;
  width: 100%;
  display: flex;
  align-items: center;
}

main #contact ul li a {
  width: 100%;
  color: white;
  font-size: 1.5rem;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
}

main #contact ul li a img {
  margin: 10px;
  width: 30px;
}

main #contact ul li:hover {
  filter: brightness(200%);
  box-shadow: 2px 2px 5px black;
}


@media(max-width: 768px) {
  html {font-size: 10px;}
  header ul li {padding: 5px;}
  main #landingpage  {
    flex-direction: column;
    justify-content: center;
  }
   main #landingpage article {
     margin: 20px 0;
     height: auto;
   }
   main #landingpage article div {
     align-items: center;
     justify-content: center;
   }
   
   main #about article ul li{font-size: 0.8rem;}
   
   main #about article img {width: 200px;}
   
  main #projects {height: auto;}
}