/* Author: Shree Dhar Acharya
     Student ID:8899288
     Date: 2023/06/05
     Personal Website
     DSGN8320-23S-Sec1-Advanced Responsive Site Design!
*/

/* 
  Notes:
  1.All the background color and foreground color(text color) are verified through WEBAIM contrast checker
  2.Followed Html 5 semantic
  3.Responsive for tablet and mobile
  4.Images used are either own or royalty free commented in the footer section

*/
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

main {
  padding-top: 50px;
}

.container {
  width: 90%;
  margin: 0 auto;
  padding: 0 20px;
}


header {
  background-color: #000;
  color: #FFF;
  padding: 10px 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  float: left;
  color: #00AD93;
  font-weight: bold;
}

.logo h1 {
  font-size: 24px;
  margin: 0;
}

.menu {
  float: right;
  list-style: none;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

.menu li {
  display: inline-block;
  margin-left: 20px;
}

.menu a {
  color: #FFF;
  text-decoration: none;
}

.menu a:hover {
  color: #00AD93;
  text-decoration: none;
}

.menu a.active {
  color: #00AD93;
  font-weight: 600;
  text-decoration: none;
}


.grid_container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns with equal width */
  grid-gap: 1em;
}


.diagonal_bg {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns with equal width */
  grid-gap: 1em;
}

/* this css style is used to create a diagonal background effect using a pseudo-element ::before. 
This style applies a skew transformation to the left half of the element with the class diagonal_bg
Without any content(content:""), it acts as a background layer.
transform: skewY(-110deg); applies a skew transformation along the Y-axis to the pseudo-element. 
The value -110deg indicates the amount of skew in the counterclockwise direction
I explored this while going through the css documentation about creating  unique visual effects in web design.
*/
.diagonal_bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background-color: #00AD93;
  /* Left half color */
  transform-origin: top right;
  transform: skewY(-110deg);
}

.diagonal_bg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-color: #00AD93;
}

.home_content {
  margin-top: 10em;
  position: relative;
  z-index: 1;
}

.info {
  display: flex;
  flex-direction: column;
  padding: 50px;
}

.sub_title {
  font-size: 30px;
  font-weight: 600;
  color: #00AD93;
  letter-spacing: 4px;
  margin: 0px;
}

.title {
  font-size: 50px;
  font-weight: 700;
  color: #293651;
  margin: 0px;
  margin-top: 20px;

}

.tag {
  font-size: 18px;
  font-weight: 500;
  color: #293651;
  margin: 0px;
  margin-top: 15px;

}

.details {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4A5164;
  margin: 0px;
  margin-top: 15px;

  line-height: 1.6;
  /* color: #000; */
  margin-bottom: 20px;
}

.image_container {
  max-width: 100%;
  height: auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}



.hero {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns with equal width */
  grid-gap: 1em;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.tagline {
  font-size: 24px;
  margin-bottom: 40px;
}

.btn {
  display: inline-block;
  width: fit-content;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  margin-top: 15px;
  padding: 0 40px;
  font-size: 16px;
  line-height: 55px;
  height: 55px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  /*
  transition: all 0.4s ease-out 0s is the another interesting property i discovered.
  By using this we can smoothly animate CSS property changes, 
  making the transitions between different states of an element more visually appealing and engaging.
   This can enhance the user experience on our website or web application.
  */
  transition: all 0.4s ease-out 0s;
  background-color: #00A88F;
}



.btn:hover {
  opacity: 0.8;
}

/* About section styles */
.about {
  padding: 100px 0px 0px 0px;
  text-align: center;
}

.container h2 {
  font-size: 36px;
  margin-bottom: 20px;
  margin-top: 0px;
}

.about p {
  font-size: 18px;
  margin-bottom: 40px;
}

.skill_grid {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns with equal width */
  grid-gap: 5em;
  margin-bottom: 20px;
}

.skill {
  margin-bottom: 5px;
}

.skill_name {
  font-weight: bold;
  margin-bottom: 5px;
}

.progress_bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #00AD93;
  border-radius: 10px;
}

.progress_percent {
  color: #000;
  font-weight: bold;
  padding-left: 10px;
}

.progress_99 {
  width: 99%;
}

.progress_90 {
  width: 90%;

}

.progress_80 {
  width: 80%;

}

.progress_95 {
  width: 95%;

}

/* Services section styles */
.services {
  padding: 100px 0;
  text-align: center;
}

.services_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.service_item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.service_item:hover {
  transform: translateY(-5px);
  background-color: #00AD93;
  color: white;
}

.service_item i {
  font-size: 40px;
  margin-bottom: 20px;
}

.service_item h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.service_item p {
  font-size: 18px;
}

/* Portfolio section styles */
.portfolio {
  padding: 100px 0px 0px 0px;
  text-align: center;
}


.portfolio_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.portfolio_item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.portfolio_item:hover {
  transform: scale(1.05);
  background-color: #00AD93;
  color: white;
}

.portfolio_item img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  padding: 0px;
}

.card_content h3 {
  font-size: 24px;
  margin: 5px;
  padding: 0px;
}

.card_content p {
  font-size: 16px;
  margin: 5px;
  padding: 0px;
}

.my_video_gallery {
  max-width: 100%;
  margin-bottom: 20px;
  padding: 20px 60px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.my_video_gallery .title {
  text-align: center;
  margin-bottom: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* Adjust this value based on the video's aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

.video-title {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 14px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Additional styling for accessibility */
.video-wrapper iframe:focus {

  outline: none;
  border: 2px solid #007bff;
}

/* Contact section styles */
.contact_grid {
  padding: 150px 50px;
  text-align: center;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Two columns with equal width */
  /* grid-gap: 1em; */
}

.map_container {
  border: 2px solid #00AD93;
  border-radius: 10px 0px 0px 10px;
  border-right: none;
  background-color: white;

}

.form_container {
  border: 2px solid #00AD93;
  border-radius: 0px 10px 10px 0px;
  background-color: white;

}


.contact_form {
  margin: 50px;
}

.contact_form input,
.contact_form textarea {
  width: 80%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.contact_form textarea {
  height: 120px;
}

.contact_form button {
  padding: 12px 24px;
  background-color: #00AD93;
  color: #FFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact_form button:hover {
  opacity: 0.8;
}



/*footer styles */
footer {
  background-color: #f1f1f1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* box-shadow is another css style which can be used to make element more visually appealing
  I discovered it from stack overflow and used for footer to display box shadow on top in all the pages*/
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.footer_top,
.footer_middle,
.footer_bottom {
  margin-bottom: 10px;
}

.footer_top p,
.footer_middle p,
.footer_bottom p {
  margin: 0;
}

.icon_row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}


.icon_row i {
  margin: 0 5px;
  font-size: 20px;
  color: #888;
}

.icon_row i:hover {
  color: #00AD93;
}

.icon {
  padding: 10px 5px;
}

.navigation_menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.navigation_menu li {
  margin: 0 10px;
}

.navigation_menu li a {
  color: #4A5164;
  font-weight: 600;
  text-decoration: none;
}

.navigation_menu li a:hover {
  color: #00AD93;
  text-decoration: none;
}

/* Responsive styles for tablet view */
@media only screen and (max-width: 768px) {
  .grid_container {
    grid-template-columns: 1fr;
  }

  .diagonal_bg:before {
    width: 70%;
  }

  .diagonal_bg:after {
    width: 30%;
  }

  .info {
    padding: 30px;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 36px;
  }

  .tagline {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .skill_grid {
    grid-template-columns: 1fr;
  }

  .services_grid {
    grid-template-columns: 1fr;
  }

  .portfolio_grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive styles for mobile view */
@media only screen and (max-width: 480px) {

  .logo {
    display: flex;
    justify-content: center;
  }

  main {
    margin-top: 220px;
  }

  .container {
    padding: 0 10px;
  }

  .menu {
    display: none;
  }

  .logo h1 {
    font-size: 24px;
  }

  .header {
    position: relative;
    padding: 20px 0;
  }

  .logo h1 {
    font-size: 20px;
  }

  .menu {
    display: block;
    margin-top: 10px;
    text-align: center;
  }

  .menu li {
    display: block;
    margin: 10px 0;
  }

  .menu a {
    font-size: 16px;
  }

  .diagonal_bg:before {
    width: 80%;
    transform: skewY(-73deg);
  }

  .diagonal_bg:after {
    width: 20%;
  }

  .home_content {
    margin-top: 2em;
    padding: 0px 20px;
  }

  .info {
    padding: 20px;
  }

  .image_container {
    padding-left: 100px;
  }

  .developer_image {
    margin-top: -120px;
  }

  .sub_title {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .title {
    font-size: 36px;
    margin-top: 10px;
  }

  .tag {
    font-size: 16px;
    margin-top: 10px;
  }

  .details {
    font-size: 14px;
    margin-top: 10px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .tagline {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .btn {
    font-size: 14px;
    line-height: 40px;
    height: 40px;
  }

  .about {
    padding-top: 50px;
  }

  .about p {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .skill_name {
    font-size: 16px;
    margin-bottom: 3px;
  }

  .progress_bar {
    height: 6px;
  }

  .progress_percent {
    font-size: 12px;
    padding-left: 5px;
  }

  .container h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .services {
    padding-top: 50px;
  }

  .service_item i {
    font-size: 30px;
    margin-bottom: 15px;
  }

  .service_item h3 {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .service_item p {
    font-size: 16px;
  }

  .portfolio {
    padding-top: 50px;
  }

  .portfolio_item h3 {
    font-size: 20px;
    margin-bottom: 5px;
  }

  .portfolio_item p {
    font-size: 16px;
  }

  .my_video_gallery {
    padding: 20px 20px;
  }

  .video-grid {
    grid-template-columns: 1fr;

  }

  .contact_grid {
    grid-template-columns: 1fr;
    padding: 80px 20px;
  }

  .map_container {
    border: 2px solid #00AD93;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .form_container {
    border: 2px solid #00AD93;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .contact_form input[type="text"],
  .contact_form input[type="email"],
  .contact_form textarea {
    font-size: 14px;
    padding: 12px;
    margin-bottom: 15px;
  }

  .contact_form textarea {
    height: 120px;
  }

  .contact_form input[type="submit"] {
    padding: 12px 20px;
    font-size: 14px;
  }
}