@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Jost:wght@100;200;300;400;500&family=Spartan:wght@100;300;500;725&display=swap");
/*Adding Mixins*/
/*Defining Variables*/
/*Setting the default boilerplate for all elements*/
* {
  margin: 0px;
  padding: 0px;
  font-family: Jost;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  z-index: 0;
}

html {
  overflow-x: hidden;
}

body {
  overflow: hidden;
}

/*CSS Rules for the Nav Bar starts*/
.navbar {
  width: 100vw;
  max-width: 100vw;
  min-height: 8vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1f1f1f;
  color: white;
  text-transform: uppercase;
  z-index: 2 !important;
  -webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  position: fixed;
}

/*Adding the logo styles.*/
.logo {
  font-family: Spartan;
  text-transform: uppercase;
  letter-spacing: -2px;
  font-weight: 600;
  font-size: 1.5rem;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.logo:hover {
  -webkit-transform: translate(0%, -20%);
          transform: translate(0%, -20%);
}


/*Adding the styles for unordered list nav*/
.nav-list {
  text-decoration: none;
  float: right;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 30%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

/*Styling all the links in the nav-list unordered list*/
.nav-list a {
  color: inherit;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-animation: fadeintransformup 0.3s ease-in;
          animation: fadeintransformup 0.3s ease-in;
}

.nav-list a:hover {
  -webkit-transform: translate(0%, -20%);
  transform: translate(0%, -20%);
}

.nav-list a:nth-child(4) {
  -webkit-transform: none !important;
          transform: none !important;
}

/*CSS Rules for the Nav Bar ends*/
/* To make the navbar resonsive, we will be using JS to make that hamburger menu.
   We'll use media queries to display:none when the width is too small. 
   We'll use the following break points: 768px and 1024px
*/
/*Adding the styles for hero section.*/
.hero-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  -ms-flex-direction: row;
      flex-direction: row;
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  /*Overiding this helped me to fix tons of bugs.*/
  -webkit-box-align: unset;
      -ms-flex-align: unset;
          align-items: unset;
  -webkit-box-pack: unset;
      -ms-flex-pack: unset;
          justify-content: unset;
}

/*Adding styles for Title*/
.hero-title {
  font-family: Spartan;
  letter-spacing: -2px;
  font-size: 4rem;
  -webkit-animation: fadeoutslideout 0.5s ease-in;
          animation: fadeoutslideout 0.5s ease-in;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

/*Animations defined for title animation.*/
@-webkit-keyframes fadeoutslideout {
  from {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fadeoutslideout {
  from {
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}

/* Adding styles for the ha;f section (section with moving icons) */
.half-sec-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 50%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
  margin-right: 0;
  background-color: #D7D7D7;
  color: black;
}

.half-sec-1 div {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.divimage {
  margin: -99px 0px 0px -150px;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  -webkit-transform: translate(100%, 100%);
          transform: translate(100%, 100%);
}

.subtitle {
  font-family: 'Inter';
  letter-spacing: 5px;
  text-transform: uppercase !important;
  color: #1a1a1a;
  -webkit-animation: fadeoutslideout 0.5s ease-in;
          animation: fadeoutslideout 0.5s ease-in;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

/*Styling for moving icons in background starts.*/
.main-row {
  position: relative;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  z-index: -100;
}

/*Adding styling for system of rows*/
.main-row .row {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0;
  white-space: nowrap;
  font-size: 30px;
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  top: -50%;
}

/*Adding styling for icons*/
.main-row .row i {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: none;
  padding: 0 10px;
  color: #b9b9b9;
}

/*Adding styling for individual rows*/
.main-row .row .icon-row {
  -webkit-animation: animate1 80s linear infinite;
          animation: animate1 80s linear infinite;
  -webkit-animation-delay: -80s;
          animation-delay: -80s;
  padding: 0 10px;
}

/*Used for animation first rows.*/
@-webkit-keyframes animate1 {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes animate1 {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.main-row .row .icon-row:nth-child(2) {
  -webkit-animation: animate2 80s linear infinite;
          animation: animate2 80s linear infinite;
  -webkit-animation-delay: -40s;
          animation-delay: -40s;
}

/*Used for animation second rows.*/
@-webkit-keyframes animate2 {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}
@keyframes animate2 {
  0% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}

.main-row .row:nth-child(even) .icon-row {
  -webkit-animation: animate3 80s linear infinite;
          animation: animate3 80s linear infinite;
  -webkit-animation-delay: -80s;
          animation-delay: -80s;
}

/*Used for animation third rows.*/
@-webkit-keyframes animate3 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes animate3 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

/*Animation for every second row in even set of rows*/
.main-row .row:nth-child(even) .icon-row:nth-child(2) {
  -webkit-animation: animate4 80s linear infinite;
          animation: animate4 80s linear infinite;
  -webkit-animation-delay: -40s;
          animation-delay: -40s;
}

/*Used for animation forth rows.*/
@-webkit-keyframes animate4 {
  0% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes animate4 {
  0% {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

/*Hero section ends.*/
/*Development section starts.*/
.dev {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  width: 100vw;
  height: 100vh;
  -ms-flex-direction: row;
      flex-direction: row;
}

/*Adding styles for Title*/
.dev-title {
  font-family: Spartan;
  letter-spacing: -2px;
  font-size: 2rem;
  background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Styling for that card.*/
.dev-card {
  width: 40%;
  height: 40%;
  background: #1f1f1f;
  -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
          box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
  border-radius: 5px;
  color: white;
  padding: 1.75rem;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  overflow-wrap: break-word !important;
  margin: 1rem;
  opacity: 0;
}

/*Icon formatting. Taking more rules than expected*/
.dev-card i,
.dev-card img {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center;
  vertical-align: middle;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}

.dev-card i:hover,
.dev-card img:hover {
  -webkit-transition: .75s ease-in-out;
  transition: .75s ease-in-out;
  -webkit-transform: scale(1.25);
          transform: scale(1.25);
}

/*Adding styling for each individual icon. The python icon required 2 colors so I used a svg and added a filter that desaturated by default and adds colors when hovered. I know this isn't efficient, but I was left with no other choice. */
.fa-sass:hover {
  color: #c69 !important;
}

.fa-html5:hover {
  color: #FC490B !important;
}

.fa-css3:hover {
  color: #2296F3 !important;
}

.fa-js:hover {
  color: #F8E017 !important;
}

.fa-bootstrap:hover {
  color: #563D7C !important;
}

.fa-react:hover {
  color: #61DCFB !important;
}

.dev-card img:hover {
  -webkit-filter: none !important;
          filter: none !important;
  -webkit-transition: 0, 4s ease-out !important;
  transition: 0, 4s ease-out !important;
}

.grid-container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px 50px;
  -ms-grid-columns: auto auto auto;
      grid-template-columns: auto auto auto;
}

/*The card styling is over. On to the text.*/
.dev-txt {
  width: 50%;
  margin: 1rem;
  margin-right: 2rem;
}

/*On to the Timeline section. Still needs bug fixing.*/
.design-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  min-height: 100vh;
  padding: 100px 0;
}

.design {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
}

/*These are for basic mobile devices. These containers are rather just stacked on top of each other.*/
.timeline {
  width: 80%;
  height: auto;
  max-width: 800px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.timeline-content {
  padding: 20px;
  background: #1f1f1f;
  -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
          box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
  border-radius: 5px;
  color: white;
  padding: 1.75rem;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  overflow-wrap: break-word !important;
  margin: 1rem;
  margin-bottom: 20px;
  border-radius: 6px;
}

.timeline-component {
  margin: 0px 20px 20px 20px;
}

/*I might have well added this to the media-queries.css, but this is more than important styling for this section. And this doesn't add much to responsiveness.*/
@media screen and (min-width: 768px) {
  .timeline {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3px 1fr;
        grid-template-columns: 1fr 3px 1fr;
  }
  .timeline-middle {
    position: relative;
    background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
    width: 3px;
  }
  .main-middle {
    opacity: 0;
  }
  .timeline-circle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

/*Adding styles for the Round Up section*/
.round-up {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  -ms-flex-direction: row;
      flex-direction: row;
  min-height: 100vh;
  max-height: 200vh;
}

/* Adding Round up card styling*/
.roundup-card {
  background: #1f1f1f;
  -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
          box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
  border-radius: 5px;
  color: white;
  padding: 1.75rem;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  overflow-wrap: break-word !important;
  margin: 1rem;
  width: 40%;
}

.roundup-card:hover {
  -webkit-transform: rotate(5deg) translate(0%, -10%);
          transform: rotate(5deg) translate(0%, -10%);
}

.roundup-card:hover .roundup-card::after {
  -webkit-transform: rotateZ(5deg) translate(0%, -10%);
          transform: rotateZ(5deg) translate(0%, -10%);
}

/*CSS Art section*/
.css-projects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  flex-direction: column;
}

/*Styling for my CSS Art.*/
/*Needs some changing, but for now we'll keep it here.*/
.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #1f1f1f;
  color: white;
  -ms-flex-direction: row;
      flex-direction: row;
  width: 100vw;
  height: 50vh;
  background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
  overflow-x: hidden;
  font-size: 25px;
  text-align: center;
  padding: 3rem;
}

.footer .footer-content .follow-icons {
  margin: 20px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.footer .footer-content .follow-icons i {
  font-size: 35px;
  padding: 5px;
  margin: 10px;
  color: white;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.footer .footer-content .follow-icons i:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.footer .footer-content .follow-icons a {
  text-decoration: none;
  color: white;
}

/*Adding Hover colors for footer icons*/
.fa-twitter:hover {
  color: #1DA1F2 !important;
}

.fa-facebook:hover {
  color: #1778F2 !important;
}

.fa-telegram:hover {
  color: #0088CC !important;
}

.biglogo {
  font-family: Spartan;
  text-transform: uppercase;
  letter-spacing: -2px;
  font-weight: 600;
  font-size: 45px;
  padding: 5rem;
}

.biglogo:hover {
  -webkit-transform: none !important;
          transform: none !important;
}

.divider {
  width: 3px;
  height: 100px;
  margin: 20px;
  background: white;
}

/*This document Ends here. Finally!*/
/*# sourceMappingURL=style.css.map */