:root {
  --darkBlue: #1c1d20;
  --brightBlue: rgb(98, 222, 253);
  --hovedBrightBlue: rgb(71, 159, 181);
  --fontwhite: #edf0f1;
  --fontLightGray: #c8c8c8;
  --folderBackground: #25262b;
  --btnHover: rgb(49, 103, 118);
}

* {
  padding: 0%;
  margin: 0%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Raleway", sans-serif;
  text-decoration: none;
  list-style-type: none;
  color: var(--fontwhite);
}

body {
  width: 100%;
  background-color: var(--darkBlue);
}

i {
  color: var(--brightBlue);
}

.btn:focus,
.btn:active {
  outline: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.btn-outline-primary {
  color: var(--brightBlue) !important;
  border: 1px solid var(--brightBlue);
}

.btn-outline-primary:hover {
  background-color: var(--hovedBrightBlue);
  border: 1px solid var(--brightBlue);
  color: #fdfdfd !important;
}

.btnSelected {
  background-color: var(--hovedBrightBlue);
  color: white !important;
}

.header {
  height: 5rem;
  position: fixed;
  top: 0%;
  left: 0%;
  right: 0%;
  z-index: 99;
}

.header a {
  position: relative;
}

.header a:after {
  content: "";
  position: absolute;
  display: block;
  width: 0%;
  height: 0.1rem;
  bottom: 0%;
  left: 0%;
  background-color: var(--brightBlue);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.header a:hover::after {
  width: 100%;
}

.leftSideBtns {
  position: fixed;
  height: 41vh;
  bottom: 0%;
  left: 2%;
  z-index: 99;
  font-size: 1.3rem;
}

.leftSideBtns ul li {
  text-align: center;
}

.leftSideBtns i {
  display: none;
  padding: 1rem 0;
  color: var(--fontLightGray);
}

.leftSideBtns i:hover {
  color: var(--brightBlue);
}

.leftSideBtns:after {
  content: "";
  display: none;
  width: 3%;
  height: 7rem;
  background: var(--hovedBrightBlue);
  opacity: 0.8;
  right: 20%;
  bottom: 0%;
  position: absolute;
}

.rightSideBtns {
  position: fixed;
  height: 17vh;
  bottom: 0%;
  right: 2%;
  z-index: 99;
  font-size: 1.3rem;
}

.rightSideBtns ul li {
  text-align: center;
}

.rightSideBtns i {
  display: none;
  position: absolute;
  left: -6%;
  padding: 0.5rem 0;
  font-size: 2rem;
  color: var(--fontLightGray);
}

.rightSideBtns i:hover {
  color: var(--brightBlue);
}

.rightSideBtns:after {
  content: "";
  display: none;
  width: 3%;
  height: 7rem;
  background: var(--hovedBrightBlue);
  opacity: 0.8;
  left: 22.5%;
  bottom: 0%;
  position: absolute;
}

.home {
  width: 100%;
  min-height: 100vh;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.home canvas {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent), radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);
}

.home h3 {
  font-size: 3.5rem;
  font-weight: 500;
}

.home h6 {
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  padding-bottom: 1rem;
}

.home span {
  font-size: 3.5rem;
  font-weight: 100;
  color: var(--brightBlue);
}

.home .bt1 {
  background-color: transparent;
  border: 1px solid var(--brightBlue);
  color: var(--brightBlue);
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 2rem;
  position: relative;
  z-index: 99;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.home .bt1:hover {
  background-color: var(--hovedBrightBlue);
  color: white;
}

.about::before {
  content: "";
  display: block;
  height: 5rem;
}

.about .container .row {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.about .txt {
  padding: 1rem;
}

.about .txt h2 {
  color: var(--brightBlue);
  font-weight: 100;
  padding-bottom: 1rem;
  position: relative;
}

.about .txt h2:after {
  content: "";
  display: block;
  width: 50%;
  height: 0.03rem;
  background: var(--brightBlue);
  opacity: 0.3;
  left: 50%;
  top: 35%;
  position: absolute;
}

.about .txt p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--fontLightGray);
}

.about .txt p span {
  color: var(--brightBlue);
  font-weight: 300;
}

.about .txt p ul li {
  color: red;
}

.about .txt .skillSet ul {
  padding: 0%;
}

.about .txt .skillSet ul li {
  font-weight: 100;
  font-size: 0.85rem;
  letter-spacing: 0.1rem;
  line-height: 1.5rem;
  color: var(--brightBlue);
}

.about .imgBox {
  width: 70%;
  position: relative;
}

.about .imgBox::before {
  content: "";
  display: block;
  width: 80%;
  height: 100%;
  background: var(--darkBlue);
  border: 0.01rem solid rgba(124, 218, 255, 0.533);
  opacity: 1;
  left: 20%;
  top: 5%;
  position: absolute;
  z-index: -1;
}

.about .imgBox:after {
  content: "";
  display: block;
  width: 80%;
  height: 100%;
  background: var(--darkBlue);
  border: 0.01rem solid rgba(41, 194, 255, 0.533);
  opacity: 1;
  left: 30%;
  top: 0%;
  position: absolute;
  z-index: -2;
}

.about .imgBox:hover img {
  -webkit-filter: hue-rotate(190deg);
          filter: hue-rotate(190deg);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.about .imgBox:hover::before {
  border: 0.2rem solid rgba(41, 194, 255, 0.533);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  width: 50%;
  height: 95%;
}

.about .imgBox:hover:after {
  border: 0.3rem solid rgba(41, 194, 255, 0.288);
  width: 50%;
  height: 95%;
}

.experience {
  padding: 7rem 0;
}

.experience h2 {
  color: var(--brightBlue);
  font-weight: 100;
  padding-bottom: 1rem;
  position: relative;
}

.experience h2:after {
  content: "";
  display: block;
  width: 45%;
  height: 0.03rem;
  background: var(--brightBlue);
  opacity: 0.5;
  left: 50%;
  top: 40%;
  position: absolute;
}

.experience p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--fontLightGray);
}

.experience p span {
  color: var(--brightBlue);
  font-weight: 100;
}

.projects {
  padding: 7rem 0;
}

.projects .buttons {
  padding-bottom: 3rem;
}

.projects .txt h2 {
  font-weight: 500;
  letter-spacing: 0.2rem;
  color: var(--fontLightGray);
}

.projects .txt a {
  color: var(--brightBlue);
  font-weight: 100;
  font-size: 0.9rem;
  display: block;
  margin: 1.3rem 0 4rem 0;
  letter-spacing: 0.2rem;
  text-decoration: none;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.2s linear;
  transition: -webkit-transform 0.2s linear;
  transition: transform 0.2s linear;
  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
}

.projects .txt a:hover {
  color: var(--hovedBrightBlue);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.projects .item {
  background-color: var(--folderBackground);
  margin: 0.2rem 0.2rem;
  padding: 3rem;
  width: 32%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 350px;
          flex: 1 1 350px;
  -webkit-box-shadow: 5px 5px 23px 1px rgba(18, 18, 18, 0.88);
          box-shadow: 5px 5px 23px 1px rgba(18, 18, 18, 0.88);
  -webkit-transform: translateY(0%) scale(1, 1);
          transform: translateY(0%) scale(1, 1);
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  opacity: 1;
  display: none;
}

.projects .item i {
  margin-bottom: 1.3rem;
}

.projects .item .content {
  text-align: left;
  color: var(--fontLightGray);
}

.projects .item .content h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin: 1rem 0;
  line-height: 2rem;
}

.projects .item .content p {
  font-size: 0.85rem;
  font-weight: 100;
  letter-spacing: 0.05rem;
}

.projects .item .content span {
  font-size: 0.7rem;
  margin-right: 1rem;
  font-weight: 700;
  color: var(--fontLightGray);
}

.projects .item:hover {
  -webkit-transform: translateY(-2%) scale(1.02, 1.02);
          transform: translateY(-2%) scale(1.02, 1.02);
  opacity: 0.5;
  cursor: pointer;
}

.projects .show {
  display: block;
}

.contact {
  padding: 7rem 0;
  text-align: center;
}

.contact .txtBox h2 {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0.2rem;
  color: var(--fontLightGray);
  position: relative;
}

.contact .txtBox h2::after {
  content: "";
  display: block;
  width: 40%;
  height: 0.2rem;
  background: var(--brightBlue);
  opacity: 1;
  left: 30%;
  top: 120%;
  position: absolute;
}

.contact .txtBox h6 {
  color: var(--fontwhite);
  font-weight: 100;
  font-size: 0.7rem;
  margin: 4rem 0 2rem 0;
  letter-spacing: 0.2rem;
}

.contact .infoBox {
  padding: 1rem 0rem;
}

.contact .infoBox form {
  text-align: left;
  width: 100%;
}

.contact .infoBox form input,
.contact .infoBox form textarea {
  width: 80%;
  background-color: var(--folderBackground);
  border: 0px solid var(--hovedBrightBlue);
  margin: 0.2rem 0rem;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.6rem;
}

.contact .infoBox form ::-webkit-input-placeholder {
  color: var(--brightBlue);
}

.contact .infoBox form :-ms-input-placeholder {
  color: var(--brightBlue);
}

.contact .infoBox form ::-ms-input-placeholder {
  color: var(--brightBlue);
}

.contact .infoBox form ::placeholder {
  color: var(--brightBlue);
}

.contact .infoBox form button {
  margin: 3rem 0;
}

.contact .infoBox form button outline-primary:hover {
  background-color: var(--hovedBrightBlue);
  color: white;
}

.footer {
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.footer span {
  color: var(--fontLightGray);
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}

.footer i {
  margin: 0 0.5rem;
  color: var(--fontLightGray);
}

@media screen and (min-width: 576px) {
  .home canvas {
    z-index: 0;
  }
  .about {
    height: 100vh;
  }
  .about .container {
    height: 100%;
  }
  .about .container .imgBox:before {
    width: 100%;
    top: -5%;
  }
  .about .container .imgBox:after {
    width: 100%;
    top: -10%;
  }
  .leftSideBtns i,
  .rightSideBtns i {
    display: inline-block;
    text-decoration: none;
    list-style: none;
  }
  .leftSideBtns:after,
  .rightSideBtns:after {
    display: block;
  }
}
/*# sourceMappingURL=style.css.map */