@import "https://fonts.googleapis.com/css?family=Montserrat:400,700";:root {
  --header-height: 3rem;
  --font-semi: 600;
  --hue-color: 224;
  --first-color: hsl(var(--hue-color), 89%, 60%);
  --second-color: hsl(var(--hue-color), 56%, 12%);
  --body-font: "Poppins", sans-serif;
  --big-font-size: 2rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
  --mb-2: 1rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;
  --z-back: -10;
  --z-fixed: 100;
}

@media (max-width: 56.25em) {
  .home__social {
    margin: auto;
  }
}

@media (max-width: 37.5em) {
  .home__social {
    margin: auto;
  }
}

@media (max-width: 20em) {
  .home__social {
    margin: auto;
  }
}

.home__social {
  display: grid;
  column-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-right: auto;
  max-width: 100px;
}

.home__social-icon {
  width: max-content;
  margin-bottom: var(--mb-2);
  font-size: 2rem;
  color: white;
}

.home__social a {
  margin: auto;
}

.home__social-icon:hover {
  color: #00cdac;
}

.home__social-icon {
  margin-bottom: 0;
  margin-right: var(--mb-4);
}

body {
  margin: 0 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--second-color);
}

.container {
  justify-content: center;
  margin: auto;
  max-width: 1180px;
  padding: 14px;
}

#hero {
  min-height: 100vh;
  height: 100vh;
  background-color: #272341;
  color: white;
  z-index: -1;
  /* background: #fff; */
  border-bottom: 0;
  align-items: center;
  margin-bottom: 0;
  padding: 0 5.6rem;
  font-weight: 400;
  display: flex;
  inset: 0;
}

@media (max-width: 37.5em) {
  #hero {
    padding: 0 1.6rem;
  }
}

#hero .hero-title {
  text-align: left;
  margin-bottom: 3.2rem;
  font-size: 4.0rem;
  font-weight: 700
}

@media (max-width: 75em) {
  #hero .hero-title {
      font-size:3.5rem
  }
}

@media (max-width: 56.25em) {
  #hero .hero-title {
      text-align:center;
      font-size: 2.7rem
  }
}

@media (max-width: 37.5em) {
  #hero .hero-title {
      font-size:2.0rem;
      line-height: 1.5
  }
}

@media (max-width: 20em) {
  #hero .hero-title {
      font-size:1.5rem
  }
}

/**
Social bits
**/

@media (max-width: 56.25em) {
  #hero .home__social {
    text-align: center;
}
}

@media (max-width: 37.5em) {
  #hero .home__social {
    text-align: center;
}
}

@media (max-width: 20em) {
  #hero .home__social {
    text-align: center;
}
}

/**
**/

@media (min-width: 576px) {
  .container-sm,.container {
      max-width:540px
  }
}

@media (min-width: 768px) {
  .container-md,.container-sm,.container {
      max-width:720px
  }
}

@media (min-width: 992px) {
  .container-lg,.container-md,.container-sm,.container {
      max-width:960px
  }
}

@media (min-width: 1200px) {
  .container-xl,.container-lg,.container-md,.container-sm,.container {
      max-width:1140px
  }
}

@media (min-width: 1400px) {
  .container-xxl,.container-xl,.container-lg,.container-md,.container-sm,.container {
      max-width:1320px;
  }
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .text-color-main {
      background-image: linear-gradient(135deg, #02aab0 0%, #00cdac 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      color: #0000;
  }
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  .bd-grid {
      margin-left: auto;
      margin-right: auto;
  }
}

@media screen and (min-width: 576px) {
  .work__container {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 1rem;
      padding-top: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .work__container {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1rem;
  }
}

.work__container {
  row-gap: 1rem;
  overflow: auto;
  margin: auto;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}
.bd-grid {
  max-width: 1024px;
  display: grid;
  margin: auto;
  /* margin-left: var(--mb-2);
  margin-right: var(--mb-2); */
  padding-bottom: 5px;
}

.work__img {
  box-shadow: 0px 1px 5px rgba(14, 36, 49, 0.15);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  color: #272341;
}

.work h1 {
  text-align: center;
  font-weight: bolder;
}

.about h1 {
  text-align: center;
  font-weight: bolder;
}

.footer {
  background-color: #272341;;
  color: #fff;
  text-align: center;
  font-weight: var(--font-semi);
  padding: 2rem 0;
}

.footer p {
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (min-width: 768px) {
  .section {
      padding-top: 4rem;
      padding-bottom: 3rem;
  }
}

.section {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.home__img {
  position: absolute;
  width: 260px;
}


@media screen and (max-width: 320px) {
  .home__img {
    width: 200px;
  }
}
@media screen and (min-width: 576px) {

  .home__img {
    width: 300px;
    bottom: 25%;
  }

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

  .home__img {
    width: 400px;
    bottom: 10%;
  }

}
@media screen and (min-width: 992px) {
  .home__img {
    width: 450px;
  }
}

.aboutme {
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  column-gap: 2rem;
  padding-top: 2rem;
}

@media screen and (min-width: 320px) {
  .aboutme {
      grid-template-columns: repeat(1, 1fr);
      column-gap: 2rem;
      padding-top: 2rem;
  }
}

@media screen and (min-width: 576px) {
  .aboutme {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
      padding-top: 2rem;
  }
}

@media screen and (min-width: 768px) {
  .aboutme {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
  }
}


.aboutme {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  row-gap: 1rem;
  overflow: auto;
  margin: auto;
  font-size: large;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  
}

.aboutmeimg {
  justify-self: center;
}

.aboutmeimg img {
  border-radius: 25px;
}

.about-grid {
  max-width: 750px;
  display: grid;
  margin: auto;
  padding-bottom: 5px;
}