@import url("components/about.css");
@import url("components/navbar.css");
/* @import url("components/javascript.css"); */

* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  color: #2A2F3D;
  text-align: center;
  letter-spacing: -3px;
  line-height: 68px;
  text-decoration: none;
}

body  {
  /* background-color: #EAEFF3; */
  background-image: url('../images/background-mobile.png');
  object-fit: cover;
  background-size: cover;
  background-attachment: fixed;
}

.text-wrapper {
  position: absolute;
  top: 11%;
  width: 100%;
}

.title, .projects, .contact {
  margin-bottom: 27%;
}

h2, .name h3, .name h4, .roll h1, .location h3, .projects a {
  font-weight: 200;
}

.name h2 {
  font-weight: 400;
}

.location h2, .projects h4 {
  font-weight: 700;
}

.name {
  margin-bottom: -7px;
}

.name h2 {
  font-size: 24vw;
  overflow-wrap: anywhere;
  line-height: .8;
}

.name h3 {
  font-size: 22vw;
  text-align: left;
  line-height: 85px;
  letter-spacing: 2px;
  margin-bottom: 1%;
}

.name h4 {
  position: relative;
  top: -23px;
  font-size: 21vw;
  line-height: 128px;
  width: 93.54px;
  height: 95px;
  text-align: left;
  margin-right: 14px;
}

.roll {
  margin-bottom: -4px;
}

.roll h1 {
  font-size: 41vw;
  font-weight: 600;
  line-height: .8;
  letter-spacing: 16.5px;
}

.roll h2 {
  font-size: 18vw;
  line-height: .7;
}

.location h3 {
  font-size: 42vw;
  letter-spacing: 1px;
  line-height: .7;
  overflow-wrap: anywhere;
}

.location.in h3 {
  font-size: 101px;
  letter-spacing: 1px;
  margin-top: -37px;
}

.location h2 {
  font-size: 32vw;
  letter-spacing: -4px;
  line-height: .8;
  overflow-wrap: anywhere;
}

.projects {
  margin: 0 auto;
}

.projects h4 {
  font-size: 60px;
}

.projects a {
  font-size: 48px;
  text-align: left;
  color: #E84A5F;
  line-height: 1.5;
  letter-spacing: -2px;
  text-decoration: underline 2px #E84A5F;
  cursor: pointer;
}

.projects a:hover {
  color: #E84A5F;
  font-weight: 400;
  text-decoration: solid;
}

.contact {
  width: 96%;
  margin: 0 auto;
}

.contact p {
  font-size: 26px;
  letter-spacing: 0;
  width: 100%;
  margin: 100px auto;
  line-height: 1.3;
}

.contact a {
  color: #E84A5F;
  letter-spacing: -1px;
  line-height: 21px;
  font-weight: 600;
  cursor: pointer;
}

.square-one {
  position: absolute;
  right: 7%;
  width: 97px;
  height: 71px;
  background-color: #E84A5F;
}

.square-two {
  position: absolute;
  left: 6%;
  top: 12px;
  width: 92px;
  height: 71px;
  background-color: #E84A5F;
  z-index: -1;
}


/* :::::::::::::::: Media Queries Desktop ::::::::::::::: */

@media screen and (min-width: 992px) {

   .text-wrapper {
    top: 20%;
  }

  .title {
    margin-bottom: 13%;
  }

  .name h3 {
    margin-bottom: 9%;
  }

  .location h3 {
    font-size: 25vw;
  }

}


/* :::::::::::::: Extra Large Desktop ::::::::::::::::::: */

/* @media screen and (min-width: 1440px) {



  .im h4 {
    font-size: 170px;
  }

  .name h2 {
    font-size: 192px;
    top: 102px;
  }

  .name h3 {
    font-size: 169px;
    left: 160px;
    top: 54px;
  }

  .roll {
    top: 252px;
  }

  .roll h1 {
    font-size: 194px;

  }

  .roll h2 {
    font-size: 160px;

  }

  .location {
    top: 437px;
  }

  .location h3 {
    font-size: 185px;

  }

  .location h2 {
    font-size: 175px;
    top: -39px;
  }

  /* .projects {

  } */
/*} */