:root {
  --skewdeg: -5deg;
  --vblur: 3.5px;
}
/* 
TODO: ADD DARK MODE TOGGLE 
*/

* {
  font-family: "Fira Code", monospace;
  padding: 0;
  margin: 0;
  outline: none;
  box-sizing: border-box;
}

body {
  /* #3f87a6, white, grey */
  /* filter: blur(var(--vblur)); */
  background: url("/assets/connected.png") fixed center;
  background-color: black;
  background-position: center;
}

.box {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
  transform: translate3d(0, 0, 0);
  transform: translateZ(0);
  max-width: 75%;
  max-height: 75%;
  margin-left: auto;
  margin-right: auto;
  /* margin-bottom: 1vh; */
  /* padding-bottom: 10px; */
  background: linear-gradient(
    135deg,
    rgba(100, 100, 100, 0.1),
    rgba(100, 100, 100, 0.2)
  );
  backdrop-filter: blur(var(--vblur));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transform: skewY(var(--skewdeg));
}

.skewit {
  transform: skewY(var(--skewdeg));
}

.box1 {
  padding-bottom: 7vh;
}

/* .resizeable {
    min-width: fit-content;
    min-height: fit-content;
    resize: vertical;
    overflow: auto;
  } */

.box2 {
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  /* background-color: rgba(0, 0, 0, 0); */
  border-radius: 0px;
  border: 0;
  margin-top: 4%;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  /* color: white; */
}
/* .box3 {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
} */
/* .profile_img {
  margin-top: 3%;
  max-width: 35%;
  max-height: 35%;
  border-radius: 20px;
} */
.project_img {
  width: 47%;
  height: 47%;
  border-radius: 20px;
  margin: 0;
  transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
}
ul {
  z-index: 1;
  position: fixed;
  top: 0;
  right: 0;
  list-style-type: none;
  padding: 0.5%;
  background: linear-gradient(
    to right,
    rgba(37, 170, 225, 0.5),
    rgba(43, 182, 115, 0.1)
  );
  backdrop-filter: blur(var(--vblur));
  border-right: 100px;
  color: white;
  margin: 1%;
  overflow: hidden;
  /* border:1px solid rgba(255, 255, 255, 0.18); */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  border-radius: 20px;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 0.8rem;
}
li a:active {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 100px #fff;
}
li a:hover {
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff,
    0 0 100px #fff;
}
.center {
  display: grid;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  margin: 1%;
  font-size: 30px;
}
/* h1:hover:not(.header){
  color: darkslategrey;
} */
h2 {
  margin: 1%;
  font-size: 30px;
}
p {
  /* margin-top: 3%; */
  margin: 1%;
  color: white;
  font-size: 1rem;
}
/* a {
  width: 100;
  height: 100;
  border-radius: 20px;
  margin: 1%;
} */
.container a {
  width: 100;
  height: 100;
  border-radius: 20px;
  margin: 1%;
}
i {
  /* icons */
  margin: 0.5vw;
  /* margin-left: 7px;
  margin-right: 7px; */
}
.fa:hover {
  /* filter: invert(); */
  color: #2bb673;
}
.fa {
  color: white;
}

.box4 {
  margin-top: 1vh;
  margin-bottom: 1vh;
  max-width: fit-content;
  max-height: fit-content;
  align-items: center;
  text-align: center;
}
.box4 a {
  margin: 1%;
}

.header {
  margin-top: 100px;

  max-width: 100%;
  max-height: 100%;
}

.hoverbox {
  color: #fff;
  /* background: linear-gradient(60deg, #29323c 0%, #485563 100%); */
  moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.welcome {
  color: #fff;
  border-top: 3px solid rgba(255, 255, 255, 0.18);
  border-bottom: 3px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(
    to right,
    rgba(37, 170, 225, 0.9),
    rgba(43, 182, 115, 0.4)
  );
  backdrop-filter: blur(var(--vblur));
  transform: skewY(5deg);
}

.project_img:hover {
  transform: scale(1.05);
  /* filter: brightness(80%); */
}

.hoverbox:hover {
  /* box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75); */
  background: linear-gradient(
    135deg,
    rgba(37, 170, 225, 1),
    rgba(43, 182, 115, 1)
  );
  background-position: 100% 0;
}

.hoverbox:focus {
  outline: none;
}

/*misc*/

::-moz-selection {
  color: white;
  background: grey;
}

::selection {
  color: white;
  background: grey;
}

::-webkit-scrollbar {
  width: 0.5vw;
}

/* Track */
::-webkit-scrollbar-track {
  position: absolute;
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  position: absolute;
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #30dd8a;
}

.project-text {
}

.bionic {
}

.tech-stack {
  height: 50px;
  width: 50px;
}