* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  /* width: 80%; */
  align-items: center;
  font-family: serif;
  line-height: 1.5;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h3 {
  margin-left: 6px;
}
a {
  text-decoration: none;
  color: rgb(188, 187, 187);
}
a:hover {
  text-decoration: underline;
  color: rgba(0, 0, 0, 1);
}

li {
  margin-top: 10px;
}

.grid {
  display: grid;
  justify-content: center;
}

.full {
  justify-content: center;
  display: flex;
  width: 100vw;
  border: 2px solid black;
  overflow-x: hidden;
}

/* left section */
.profile {
  background-color: #333f50;
  display: flex;

  width: 40vw;
  padding-top: 12px;
  padding-left: 12px;

  color: white;


  flex-direction: column;
  .image-area {
    display: grid;
    justify-content: center;
    align-items: center;

    img {
      height: 200px;
      width: 200px;
      border-radius: 50%;
      margin-left: 15px;
    }
  }

  .contact-area {
    width: 100%;
    p {
      margin-top: 10px;
    }
    i {
      margin-right: 6px;
    }
  }

  .skills,
  .languages,
  .hobbies {
    margin-top: 20px;
    padding-right: 18px;
  }
  .line-left {
    height: 1px;
    /* width: 36vw; */
    background-color: white;
    margin-right: 0px;
  }
}

/* right section */
.qualifications {
  width: 60vw;

  justify-content: center;
  flex-direction: column;
  /* margin: 0px 20px 0 12px; */
  padding: 0 12px 0 12px;

  .horizontal-block {
    height: 2.5vh;
    width: 26vw;
    margin-left: 33vw;
    background-color: #333f50;
    position: relative;
  }

  /* .vertical-block{
    height: 230px;
    width: 20px;
    background-color: #333f50;
    display: inline-block;
    margin-left: 20px;
  } */

  .line-right {
    height: 1.5px;
    width: full;
    margin-right: 0px;
    background-color: black;
  }
  .summary p {
    text-align: justify;
    padding: 10px 12px 5px 8px;
  }
  .summary,
  .projects,
  .workshop,
  .education {
    margin-top: 40px;
  }

  .projects a {
    text-decoration: underline;
    color: blue;
    
  }

  .tribhuwan h4 {
    display: inline-block;
    margin-right: 20vw;
  }
  .universal h4 {
    display: inline-block;
    margin-right: 23vw;
  }
}

.download{
  display: flex;
align-items: center;
justify-content: end;
padding: 4px 40px;

  button{
    background-color: #333f50;
    height: 5vh;
    color: white;
   font-size: medium;
    border-radius: 10%;
    padding: 4px 10px;
    cursor: pointer;
  }
}

/* for the screen below 700px(below tablet) */
@media screen and (max-width: 700px) {
  body {
    width: 100%;
  }
  .full {
    display: flex;
    flex-direction: column;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .profile .image-area img{
    height: 200px;
    width: 200px;
  }
  .profile,
  .qualifications {
    width: 100%;
    overflow-x: hidden;
  }
  .qualifications {
    padding-right: 25px;

    /* .summary-content{
        padding: 5px;
    } */
    .horizontal-block {
      display: none;
    }
  }
}