* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;

}

header {
  width: 100%;
  text-align: center;
  background-color: seashell;
}
/*nav links*/
ul {
  list-style-type: none;
}
.nav-links {
  padding: 10px;
}
.nav-links li {
  display: inline;
}

.nav-links li a {
  padding: 8px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: bolder;
}
.nav-links li a.active {
  color: red;
}
li a:hover {
  background-color: #24d17bef;
  color: white;
}

.home-container {
  width: 100%;
  height: auto;
  background-image: linear-gradient(to bottom right, #ffffff, #df8896f1);
  padding: 10px;
}
#home-section {
  display: grid;
  grid-template-areas:
    "bio bio bio bio"
    "logo-img bio1 bio1 bio1"
    "logo-img bio2 bio2 bio2";
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  color: #7099ce;
}

.bio {
  grid-area: bio;
  background-image: linear-gradient(to bottom right, rgb(12, 89, 92), white);
  color: white;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  font-weight: bolder;
  font-size: 150%;
}
.logo-img {
  grid-area: logo-img;
  margin-top: 5%;
  max-width: 100%;
}
.logo-img img {
  border: 1px solid red;
  border-radius: 10px;
}

.bio1 {
  grid-area: bio1;
  padding: 10px;
  text-align: justify;
  font-size: x-large;
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.397);
}
.bio2 {
  grid-area: bio2;
  padding: 10px;
  text-align: justify;
}
/*media Query starts Here*/
@media (max-width: 800px) {
  #home-section {
    display: grid;
    grid-template-areas:
      "bio bio bio bio"
      "logo-img logo-img logo-img logo-img"
      "bio1 bio1 bio1 bio1 "
      "bio2 bio2 bio2 bio2";
    width: 95%;
  }

  .logo-img img {
    width: 100%;
  }

  .about-container {
    flex-direction: column;
    width: 95%;
  }
  .nav-links li {
    display: block;
    padding: 4px;
  }
  .about-section + .about-section {
    margin: 20px;
  }
} /*Media Query Ends Here*/

#about-me {
  width: 100%;
  min-height: 100vh;
  background-image: url("images/about-bg.jpg");
  background-size: cover;
}

#about-me h1 {
  text-align: center;
  font-size: 200%;
  color: cadetblue;
  padding: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.about-container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  line-height: 2.5;
}

.about-container h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.about-section {
  border: 2px solid white;
  border-radius: 1.5em;
  padding: 10px;
  height: auto;
  width: 100%;
  color: cadetblue;
  margin-top: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about-section + .about-section {
  margin-left: 20px;
}
.about-section h2 {
  text-align: center;
}
#portfolio {
  width: 100%;
  min-height: 100vh;
  background-color: rgb(241, 234, 233);
}
#portfolio h1 {
  color: rgb(209, 144, 155);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 12vh;
}
.back-to-top {
  display: block;
  color: white;
  background-color: tomato;
  padding: 10px;
  position: fixed;
  bottom: 2px;
  float: right;
}
.skills {
  color: cadetblue;
  border: 1px solid rgb(121, 157, 255);
  border-radius: 20px;
  width: 75%;
  margin: 10px auto;
  text-align: center;
  font-weight: 900;
}
.skills:hover {
  color: cadetblue;
}
.to-top {
  width: 12%;
  position: fixed;
  bottom: 0;
  right: 0;
}
.to-top a {
  background-color: rgb(236, 153, 150);
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  padding: 8px;
}
.contacts{
    width: 100%;
    min-height: 100vh;
    background-color: rgb(240, 163, 240);

}
.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  height:20vh;
  color: hsl(240, 65%, 70%);
  background-color: cornsilk;
    font-family: sans-serif;
  font-size:small;
  font-weight: 300;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}