@import url("https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@200;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Clicker+Script&family=Josefin+Sans:wght@300&family=Poppins:wght@200;600&family=Roboto+Condensed&family=Source+Code+Pro:wght@300&display=swap");
body main {
  position: fixed;
  left: 20%;
  top: 0;
  right: 0;
  height: 100vh;
  padding: 4% 2%;
  color: #ffffff;
  background-color: #151515; }

.home .home__content .text .btn, .about .btn-container .btn, .contact .contact__form .btn {
  width: 150px;
  height: 35px;
  border-radius: 20px;
  background-color: #ec1839;
  color: white;
  text-align: center;
  border: none;
  transition: transform .3s; }
  .home .home__content .text .btn:hover, .about .btn-container .btn:hover, .contact .contact__form .btn:hover {
    transform: scale(1.1); }

.about .about__container--row--text h2, .services .services__element1 .title, .contact .contact__title, .portfolio .portfolio__title {
  font-size: 4rem;
  font-weight: bold;
  position: relative; }
  .about .about__container--row--text h2::before, .services .services__element1 .title::before, .contact .contact__title::before, .portfolio .portfolio__title::before {
    content: '';
    width: 5%;
    height: 4px;
    background-color: #ec1839;
    position: absolute;
    top: 100%;
    left: 0; }
  .about .about__container--row--text h2::after, .services .services__element1 .title::after, .contact .contact__title::after, .portfolio .portfolio__title::after {
    content: '';
    width: 3%;
    height: 4px;
    background-color: #ec1839;
    position: absolute;
    top: 120%;
    left: 0; }

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none; }

html {
  font-size: 62.5%; }

body {
  font-family: 'Poppins', sans-serif; }

.style-switcher {
  position: fixed;
  right: -23rem;
  top: 60px;
  background-color: #222222;
  z-index: 100;
  width: 200px;
  padding: 15px;
  font-size: 20px;
  border-radius: 5px;
  color: #ffffff;
  border: 1px solid #393939;
  margin-right: 20px;
  transition: all .3s ease; }
  .style-switcher:hover {
    right: 0; }
  .style-switcher .icon {
    position: absolute;
    right: 100%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #222222;
    text-align: center;
    margin-right: 35px;
    cursor: pointer;
    border: 1px solid #393939; }
    .style-switcher .icon i {
      line-height: 40px; }
  .style-switcher .switcher {
    top: 0; }
  .style-switcher .dark {
    top: 60px; }
  .style-switcher h4 {
    font-size: 15px;
    margin: 0 0 15px; }
  .style-switcher .colors {
    display: flex;
    justify-content: space-between;
    flex-direction: row; }
    .style-switcher .colors span {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer; }
    .style-switcher .colors .color-1 {
      background-color: #ec1839; }
    .style-switcher .colors .color-2 {
      background-color: #fa5b0f; }
    .style-switcher .colors .color-3 {
      background-color: #37b182; }
    .style-switcher .colors .color-4 {
      background-color: #1854b4; }
    .style-switcher .colors .color-5 {
      background-color: #f021b2; }

.home .home__content {
  padding: 2%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  top: 5rem; }
  .home .home__content .img {
    width: 300px;
    height: 450px;
    margin-top: 30px;
    padding-top: 30px;
    position: relative; }
    .home .home__content .img::before {
      content: '';
      width: 50px;
      height: 50px;
      position: absolute;
      top: -4px;
      left: -40px;
      border-top: 10px solid #ec1839;
      border-left: 10px solid #ec1839; }
    .home .home__content .img::after {
      content: '';
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 0;
      right: -40px;
      border-bottom: 10px solid #ec1839;
      border-right: 10px solid #ec1839; }
    .home .home__content .img img {
      width: 100%; }
  .home .home__content .text {
    line-height: 2; }
    .home .home__content .text h3 {
      font-size: 3rem;
      font-weight: bolder; }
      .home .home__content .text h3 span {
        color: #ec1839; }
      .home .home__content .text h3 .name {
        font-family: 'Clicker Script', cursive; }
    .home .home__content .text p {
      font-size: 1.5rem;
      font-weight: bolder;
      padding-bottom: 20px; }
    .home .home__content .text .btn {
      padding-top: .5rem; }
      .home .home__content .text .btn:hover {
        transform: scale(1.1); }
      .home .home__content .text .btn a {
        color: white;
        font-size: 1.2rem;
        font-weight: bold; }

.aside {
  width: 20%;
  background-color: #222222;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ffffff; }
  .aside .aside__logo {
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    font-weight: bolder;
    position: absolute;
    top: 50px; }
    .aside .aside__logo a {
      letter-spacing: 5px;
      color: inherit; }
      .aside .aside__logo a span {
        font-family: 'Clicker Script', cursive; }
      .aside .aside__logo a ::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: -20px;
        width: 20px;
        height: 20px;
        border-bottom: 5px solid #ec1839;
        border-left: 5px solid #ec1839; }
      .aside .aside__logo a ::after {
        content: '';
        position: absolute;
        top: 0;
        right: -20px;
        width: 20px;
        height: 20px;
        border-top: 5px solid #ec1839;
        border-right: 5px solid #ec1839; }
  .aside .aside__nav-bar {
    margin-top: 50px; }
    .aside .aside__nav-bar ul {
      list-style: none;
      display: flex;
      flex-direction: column; }
      .aside .aside__nav-bar ul li {
        margin-bottom: 20px; }
        .aside .aside__nav-bar ul li :hover {
          color: #ec1839; }
        .aside .aside__nav-bar ul li .active {
          color: #ec1839; }
      .aside .aside__nav-bar ul a {
        font-size: 1.5rem;
        font-weight: bold;
        border-bottom: 1px solid #ffffff;
        display: flex;
        align-items: center;
        color: inherit; }
        .aside .aside__nav-bar ul a span {
          padding-right: 15px; }

.main__about {
  overflow-y: scroll; }

.about .about__container--row--text h3 {
  font-size: 30px;
  padding-top: 6%;
  padding-bottom: 1.5%; }
  .about .about__container--row--text h3 span {
    color: #ec1839; }
.about .about__container--row--text p {
  font-size: 15px;
  font-weight: bold; }
.about .about__container--row--info-items {
  display: flex;
  position: relative;
  top: 5rem;
  font-size: 15px;
  font-weight: bolder; }
  .about .about__container--row--info-items .part {
    flex: 1; }
    .about .about__container--row--info-items .part p {
      padding: 2% 0;
      margin-right: 20px;
      border-bottom: 1px solid #ffffff; }
      .about .about__container--row--info-items .part p span {
        font-family: 'Source Code Pro', monospace; }
        .about .about__container--row--info-items .part p span.active {
          background-color: #7FAD37;
          color: whitesmoke;
          padding: .5rem;
          border-radius: .7rem; }
        .about .about__container--row--info-items .part p span.busy {
          background-color: orangered;
          color: whitesmoke;
          padding: .5rem;
          border-radius: .7rem; }
.about .btn-container {
  position: relative;
  top: 10rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: row; }
  .about .btn-container .btn {
    margin-right: 15px;
    padding-top: 10px;
    height: 4.5rem; }
    .about .btn-container .btn a {
      color: white;
      font-size: 15px;
      font-weight: bold; }
.about .about__container--column {
  margin-top: 15rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: row; }
  .about .about__container--column .section {
    flex-basis: 50%; }
  .about .about__container--column .title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 2rem; }
  .about .about__container--column .column__element {
    display: flex;
    flex-direction: column;
    padding: 3.5rem 1rem;
    padding-left: 5rem;
    margin: 3rem 2rem;
    background-color: #222222;
    border-radius: 10px;
    box-shadow: 5px 5px 7px rgba(192, 191, 191, 0.5); }
    .about .about__container--column .column__element .content {
      border-left: 1px solid #ec1839;
      padding-left: 2rem;
      padding-bottom: 4rem; }
      .about .about__container--column .column__element .content .circle-dot {
        background-color: #ec1839;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-left: -2.8rem;
        margin-bottom: -2rem; }
      .about .about__container--column .column__element .content h3 {
        margin-top: .5rem; }
      .about .about__container--column .column__element .content h4 {
        font-size: 15px;
        margin: 7px 0; }
      .about .about__container--column .column__element .content p {
        font-size: 12px;
        font-weight: bold; }

.services .services__element2 {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 3rem;
  text-align: center;
  margin-top: 5rem; }
  .services .services__element2 .services--item {
    background-color: #222222;
    font-size: 15px;
    padding: 2rem;
    border-radius: 20px; }
    .services .services__element2 .services--item h3 {
      padding: 2rem 0; }
    .services .services__element2 .services--item .icon {
      margin: 0 auto;
      transition: all .5s ease-in-out; }
      .services .services__element2 .services--item .icon :hover {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        color: white;
        font-size: 30px;
        background-color: #ec1839; }
      .services .services__element2 .services--item .icon i {
        font-size: 35px;
        margin: 15px;
        color: #ec1839;
        text-align: center; }

.main__contact {
  overflow-y: scroll; }

.contact .contact__title {
  font-size: 2.5rem;
  margin-bottom: 3rem; }
.contact .contact__container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  text-align: center; }
  .contact .contact__container .contact__element {
    margin: 3rem; }
    .contact .contact__container .contact__element p {
      font-size: 15px; }
  .contact .contact__container .contact__element2 {
    display: flex;
    justify-content: space-between;
    flex-direction: row; }
    .contact .contact__container .contact__element2 div {
      padding: 5rem; }
      .contact .contact__container .contact__element2 div i {
        font-size: 25px;
        padding-bottom: 20px; }
.contact h3, .contact i {
  color: #ec1839; }
.contact .contact__form {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap; }
  .contact .contact__form .name, .contact .contact__form .email {
    flex-basis: 46%; }
  .contact .contact__form .subject, .contact .contact__form .message {
    flex-basis: 100%; }
  .contact .contact__form input {
    margin: 2rem 2%;
    padding: 2rem;
    height: 5rem;
    border-radius: 25px;
    border: none; }
  .contact .contact__form .btn {
    margin: 2rem 2%; }

.main__portfolio {
  overflow-y: scroll; }

.portfolio .portfolio__title {
  font-size: 3rem; }
.portfolio .portfolio__container h3 {
  margin: 3rem 0;
  padding-top: 3rem;
  font-size: 25px; }
.portfolio .portfolio__container .projects {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(2, 0.5fr) 0.75fr 0.75fr repeat(2, 0.5fr);
  grid-gap: 30px; }
  .portfolio .portfolio__container .projects .project img {
    width: 100%;
    border: 6px solid #222222; }
  .portfolio .portfolio__container .projects .project-1 {
    grid-column: 1/3; }
  .portfolio .portfolio__container .projects .project-2 {
    grid-column: 3/5; }
  .portfolio .portfolio__container .projects .project-3 {
    grid-column: 5/7; }
  .portfolio .portfolio__container .projects .project-4 {
    grid-column: 1 /4;
    grid-row: 5 /6; }
  .portfolio .portfolio__container .projects .project-5 {
    grid-column: 1 /4;
    grid-row: 4 /5; }
  .portfolio .portfolio__container .projects .project-6 {
    grid-column: 4/7;
    grid-row: 4 /6; }
  .portfolio .portfolio__container .projects .project-7 {
    grid-column: 2 /6;
    grid-row: 2 /3; }
  .portfolio .portfolio__container .projects .project-8 {
    grid-column: 4/7;
    grid-row: 3 /4; }
  .portfolio .portfolio__container .projects .project-9 {
    grid-column: 1 /4;
    grid-row: 3 /4; }

/*# sourceMappingURL=style.css.map */