app.css

/* * Common Section */

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: rotateY(-10deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0);
  }
}

html {
  animation: transitionIn 1s;
  scroll-behavior: smooth;
}

p {
  font-family: "Poppins";
}

#scrollbtn {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  cursor: pointer;
  border-radius: 20%;
  border: 1px blue solid;
  background-color: aquamarine;
}

#scrollbtn:hover {
  background-color: #0f0;
  transition: 0.8s;
  transform: scale(1.25);
}

#scrollbtn.see {
  display: block;
}

#bars {
  width: 90px;
  height: 5px;
  background-color: black;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: black;
  cursor: pointer;
}
::-webkit-scrollbar-thumb {
  background-color: #999;
}

/* **************************************** Nav Section */

#navbar.scrolled {
  background-color: blue !important;
  transition: background-color 200ms linear;
}

#navtitle {
  font-family: "Montserrat";
  color: white;
  border: 2px white solid;
  font-size: 25px;
  font-weight: 900;
  margin-left: 30px;
}

#navlist li {
  font-family: "Montserrat";
  font-weight: 500;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  transition: 0.1s;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  border-bottom: 2px white solid;
  border-top: 2px white solid;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

#navlist li img {
  width: 30px;
  display: none;
  height: 30px;
  margin: 5px;
  border-radius: 50%;
}

#navlist li a {
  color: white;
}

#navlist li:hover {
  transition: 0.5s;
  transform: scale(1.05);
  background-color: crimson;
}

@media (max-width: 993px) {
  #navlist li img {
    display: flex;
    background-color: grey;
  }
}

/* **************************************** Home Section */

#home-section {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#homeBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 650px) {
  #homeBox {
    display: flex;
    justify-content: space-evenly;
  }
}

#homeboxdetailsleft {
  margin-bottom: 10px;
  min-width: 350px;
  color: white;
  display: flex;
  border-left: 1px greenyellow solid;
  flex-direction: column;
  flex-wrap: wrap;
  padding-top: 40px;
  padding-left: 30px;
}

/* ********************************* About Section */

#about-heading {
  font-family: "Montserrat";
  text-align: center;
  font-weight: 700;
  padding-top: 120px;
}

#about-subheading {
  font-family: "Montserrat";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#about-subheading-text {
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Roboto Slab";
}

#aboutdetails {
  padding: 15px;
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#aboutdetails div {
  background-color: white;
  border: 3px blue solid;
  border-radius: 10%;
  text-align: center;
  font-family: "Montserrat";
  font-weight: 500;
  min-width: 150px;
}

#aboutdetails div:hover {
  background-color: blue;
  color: white;
  border: 3px white solid;
  transition: 0.5s;
  cursor: pointer;
}

#aboutdetailsBody {
  margin-left: 10px;
  margin-right: 10px;
}

#downloadresumebtn,
#viewresumebtn {
  background-color: blue;
}
#downloadresumebtn:hover,
#viewresumebtn:hover {
  transform: scale(1.05);
}

#introBasket {
  width: 100%;
  margin-top: 10px;
}
#educationBasket {
  width: 100%;
  margin-top: 10px;
  display: none;
}
#activitiesBasket {
  width: 100%;
  margin-top: 10px;
  display: none;
}

#introBasketData {
  width: 90vw;
  height: 100%;
  margin-bottom: 20px;
  animation: transitionIn 1s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#educationBasketData {
  width: 80vw;
  height: 100%;
  margin-bottom: 20px;
  animation: transitionIn 1s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#activitiesBasketData {
  width: 80vw;
  height: 100%;
  margin-bottom: 20px;
  animation: transitionIn 1s;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
}

#highschoolDetails {
  margin-bottom: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#IntermediateDetails {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#graduationDetails {
  margin-top: 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#introDetails {
  margin-top: 70px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

#organiserDetails,
#volunteerDetails {
  font-family: "Ubuntu";
}

#highschoolLeft,
#IntermediateLeft,
#graduationLeft {
  min-width: 320px;
  text-align: right;
  font-family: "Spartan";
  border-right: 1px black solid;
}

#highschoolName,
#IntermediateName,
#collegeName {
  font-weight: 700;
  text-decoration: underline;
  line-height: 40px;
}

#aboutIntroTitle {
  font-family: "Red Hat Display";
  font-size: 40px;
  font-weight: 600;
}

#activityTitle {
  font-size: 50px;
  font-weight: 600;
}

#highschoolRight,
#IntermediateRight,
#graduationRight {
  min-width: 320px;
  text-align: left;
  font-family: "Spartan";
  border-left: 1px black solid;
}

#line-break-img {
  width: 300px;
}

#highSchoolImage,
#graduationImage,
#IntermediateImage {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 50%;
}

#introDetailsLeft {
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px black solid;
}

#introDetailsRight {
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#aboutProfileImage {
  width: 280px;
  height: 280px;
  border-radius: 2%;
  border: 1px white solid;
  box-shadow: 2px 2px 2px 2px;
}

/* ******************************** Services Section */

#services-section {
  color: white;
}

#services-heading {
  font-family: "Montserrat";
  text-align: center;
  font-weight: 700;
  padding-top: 120px;
}

#services-subheading {
  font-family: "Montserrat";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#services-subheading-text {
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Roboto Slab";
}

#servicesdetails {
  margin-top: 150px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#androiddetails,
#webdetails {
  background-color: #222;
  height: 55vh;
  padding: 5px;
  min-width: 320px;
  border: none;
  margin-bottom: 150px;
  transition: 0.5s;
  border-bottom-left-radius: 20%;
  border-bottom: 2px blue solid;
  border-right: 2px blue solid;

  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  #androiddetails,
  #webdetails {
    height: 63vh;
  }
}

#androiddetails:hover,
#webdetails:hover {
  transform: scale(1.05);
  background-color: blue;
  border-bottom: 2px white solid;
  border-right: 2px white solid;
}

#androiddetails div,
#webdetails div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#androiddetails img,
#webdetails img {
  background-color: blue;
  border-radius: 50%;
  height: 150px;
  width: 150px;
  margin: 10px;
}

#webdetails img {
  padding: 20px;
}

#androiddetails #title,
#webdetails #title {
  font-family: "Montserrat";
  font-size: 25px;
  text-align: center;
}

#androiddetails div #text,
#webdetails div #text {
  font-family: "Ubuntu";
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/* ************************************* Skills Section */

#skills-heading {
  font-family: "Montserrat";
  text-align: center;
  font-weight: 700;
  padding-top: 120px;
}

#skills-subheading {
  font-family: "Montserrat";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#skills-subheading-text {
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Roboto Slab";
}

#skillsdetails {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#skillsdetails div {
  border-top: 2px black solid;
  border-bottom: 2px black solid;
  text-align: center;
  font-family: "Montserrat";
  font-weight: 500;
  min-width: 150px;
  cursor: pointer;
}

#ides,
#dbs {
  border-left: 1px black solid;
  border-right: 1px black solid;
}

#skillsdetails div:hover {
  border-left: 3px black solid;
  border-right: 3px black solid;
  transition: 0.5s;
  font-size: 1.2em;
  font-weight: 600;
}

#skillsdetailsBody {
  margin-top: 40px;
  padding-bottom: 40px;
}

#languagesBasket {
  animation: transitionIn 1s;
}

#androidTitle,
#cpTitle,
#webTitle,
#otherTitle {
  text-align: center;
  text-decoration: underline;
  font-family: "Oswald";
}

#androidlanguages,
#cplanguages,
#weblanguages,
#otherlanguages {
  margin-top: 50px;
  margin-bottom: 20px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#languageDetails {
  min-width: 320px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: "Quicksand";
}

#kotlinlanguageProgress,
#javalanguageProgress,
#xmllanguageProgress,
#cjlanguageProgress,
#clanguageProgress,
#htmllanguageProgress,
#csslanguageProgress,
#javascriptlanguageProgress,
#reactlanguageProgress,
#pythonlanguageProgress,
#sqllanguageProgress {
  width: 100%;
  background-color: lightgray;
  height: 8px;
  position: relative;
}

@keyframes transitionkotlin {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

#kotlinlanguageProgress::before {
  width: 80%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionkotlin 1s;
  position: absolute;
}

@keyframes transitionjava {
  from {
    width: 0%;
  }
  to {
    width: 55%;
  }
}

#javalanguageProgress::before {
  width: 55%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionjava 1s;
  position: absolute;
}

@keyframes transitionxml {
  from {
    width: 0%;
  }
  to {
    width: 85%;
  }
}

#xmllanguageProgress::before {
  width: 85%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionxml 1s;
  position: absolute;
}

@keyframes transitioncj {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}

#cjlanguageProgress::before {
  width: 90%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitioncj 1s;
  position: absolute;
}

@keyframes transitionc {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

#clanguageProgress::before {
  width: 60%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionc 1s;
  position: absolute;
}

@keyframes transitionhtml {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}

#htmllanguageProgress::before {
  width: 90%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionhtml 1s;
  position: absolute;
}

@keyframes transitioncss {
  from {
    width: 0%;
  }
  to {
    width: 85%;
  }
}

#csslanguageProgress::before {
  width: 85%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitioncss 1s;
  position: absolute;
}

@keyframes transitionjavascript {
  from {
    width: 0%;
  }
  to {
    width: 95%;
  }
}

#javascriptlanguageProgress::before {
  width: 95%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionjavascript 1s;
  position: absolute;
}

@keyframes transitionreact {
  from {
    width: 0%;
  }
  to {
    width: 25%;
  }
}

#reactlanguageProgress::before {
  width: 25%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionreact 1s;
  position: absolute;
}

@keyframes transitionpython {
  from {
    width: 0%;
  }
  to {
    width: 40%;
  }
}

#pythonlanguageProgress::before {
  width: 40%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionpython 1s;
  position: absolute;
}

@keyframes transitionsql {
  from {
    width: 0%;
  }
  to {
    width: 80%;
  }
}

#sqllanguageProgress::before {
  width: 80%;
  background-color: blue;
  height: 8px;
  left: 0;
  top: 0;
  content: "";
  animation: transitionsql 1s;
  position: absolute;
}

#idesBasket {
  display: none;
  margin-top: 50px;
  margin-bottom: 50px;
  animation: transitionIn 1s;
}

#allidesDetails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#idesdetails {
  margin: 10px;
  min-width: 320px;
  color: white;
  background-color: dodgerblue;
  border: 1px black solid;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

#idesdetails:hover {
  transform: scale(1.05);
  background-color: blue;
  color: white;
}

#uses {
  background-color: white;
  margin: 10px;
  color: black;
  font-weight: 500;
  font-family: "Montserrat";
  border: 1px black solid;
}

#uses li {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

#idesdetails img {
  width: 150px;
  height: 150px;
  border: 2px black solid;
  border-radius: 50%;
  background-color: white;
  padding: 10px;
  margin: 10px;
}

#idesdetails h5 {
  font-family: "Nunito";
  min-width: 130px;
  text-align: center;
}

#dbsBasket {
  display: none;
  margin-top: 50px;
  margin-bottom: 50px;
  animation: transitionIn 1s;
}

#webdbs,
#androiddbs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#webTitle,
#androidTitle {
  text-decoration: underline;
  font-family: "Oswald";
}

#dbsdetails {
  margin: 10px;
  min-width: 320px;
  background-color: dodgerblue;
  border: 1px black solid;
  color: white;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  transition: 0.5s;
}

#dbsdetails:hover {
  transform: scale(1.05);
  background-color: blue;
}

#dbsdetails img {
  border: 2px black solid;
  border-radius: 50%;
  background-color: white;
  margin: 10px;
  padding: 10px;
  width: 100px;
  height: 100px;
}
#dbsdetails h5 {
  font-family: "Nunito";
  padding: 10px;
  margin: 10px;
  text-align: center;
}

#otherBasket {
  display: none;
  margin-top: 50px;
  margin-bottom: 50px;
  animation: transitionIn 1s;
}

#otherdetails {
  background-color: dodgerblue;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  color: white;
  display: flex;
  margin: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  transition: 0.3s;
}

#otherdetails:hover {
  transform: scale(1.05);
}

#otherdetails div {
  padding-top: 10px;
  padding-bottom: 10px;
  min-width: 160px;

  display: flex;
  justify-content: center;
  align-items: center;
}

#otherdetails #questions {
  text-align: center;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Montserrat";
}

#otherdetails #answers li {
  background-color: dodgerblue;
  text-align: center;
  font-weight: 400;
  font-family: "Montserrat";
}

/* * ************************************* Links Section */

#links-section {
  color: white;
}

#links-heading {
  font-family: "Montserrat";
  text-align: center;
  font-weight: 700;
  margin-top: 120px;
}

#links-subheading {
  font-family: "Montserrat";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#links-subheading-text {
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Roboto Slab";
}

#linksHeadings {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#linksHeadings div {
  border-radius: 10%;
  border: 1px white solid;
  text-align: center;
  color: white;
  background-color: black;
  font-family: "Montserrat";
  font-weight: 500;
  min-width: 150px;
}

#techHeading,
#socialHeading {
  border-right: 1px black solid;
}

#linksHeadings div:hover {
  transition: 0.5s;
  cursor: pointer;
  transform: scaleX(1.05);
}

#linksBody {
  width: 100%;
}

#techBasket {
  margin-top: 50px;
  margin-bottom: 50px;
}

#socialBasket {
  margin-top: 50px;
  margin-bottom: 50px;
  display: none;
}

#techBasketData {
  margin-bottom: 20px;
  animation: transitionIn 1s;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#socialBasketData {
  margin-bottom: 20px;
  animation: transitionIn 1s;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

#techBasketData a,
#socialBasketData a {
  background-color: #222;
  margin: 10px;
  min-width: 250px;
  text-decoration: none;
  border-bottom: 2px white solid;
  border-top: 2px white solid;
  border-end-end-radius: 30%;
  border-start-start-radius: 30%;
  transition: 0.5s;
  font-family: "Montserrat";
  color: white;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#techBasketData a:hover,
#socialBasketData a:hover {
  color: white;
  transform: scale(1.05);
  text-decoration: underline;
  box-shadow: 1px 1px 1px 1px gray;
  background-color: blue;
}

#techBasketData a div h5,
#socialBasketData a div h5 {
  text-decoration: none;
  font-size: 25px;
}

#techBasketData a img,
#socialBasketData a img {
  border-radius: 50%;
  background-color: #999;
  border: 2px white solid;
  padding: 10px;
  margin-top: 20px;
  width: 70px;
  height: 70px;
}

/* ***************************** Contact Section */

#contact-heading {
  font-family: "Montserrat";
  text-align: center;
  font-weight: 700;
  margin-top: 120px;
}

#contact-subheading {
  font-family: "Montserrat";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#contact-subheading-text {
  margin-left: 10px;
  margin-right: 10px;
  font-family: "Roboto Slab";
}

#contactdetails {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#contact-section {
  background-color: #eee;
}

address a {
  background-color: lightgray;
  min-width: 300px;
  box-shadow: 2px 2px 2px 2px black;
  border-radius: 5%;
  height: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  transition: 0.5s;
}
address a:hover {
  background-color: gray;
}
address a img {
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
}

#messageHeadingArea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#messageHeading {
  font-family: "Roboto Slab";
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
}

#messageForm {
  padding-bottom: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#messageDetails,
#messageBody {
  min-width: 300px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#messageDetails label,
#messageBody label {
  font-family: "Montserrat";
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 600;
}

#field1 input,
#messageBody textarea {
  border: none;
  box-shadow: 2px 2px 2px 2px gray;
}

#messageBody textarea {
  border-radius: 10%;
}
/* * Common Section */

.footer {
  position: -webkit-sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  font-family: "Montserrat";
}