:root {
  --blackColor: #212121;
  --blueColor: #77dbfe;
  --whiteColor: #ffffff;
  --greyColor: #bcbcbc;
  --blueGreyColor: #528b9f;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Clash Display", sans-serif;
  scroll-behavior: smooth;
  flex-direction: column;
  display: flex;
  min-height: 100vh;
  text-decoration: none;
}
nav {
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--whiteColor);
  background-color: var(--blackColor);
  height: 10vh;
  z-index: 1;
  transition: all 0.15s ease-in-out;
}
#active {
  text-decoration: none;
  color: var(--blueColor);
  transition: all 0.2s ease-in-out;
  filter: drop-shadow(0px 0px 5px rgba(119, 219, 254, 0.7));
}
.inActive {
  text-decoration: none;
  color: var(--blueGreyColor);
  transition: all 0.2s ease-in-out;
}

nav ul {
  display: flex;
  list-style: none;
}
nav ul li {
  margin-right: 55px;
}
li a:hover {
  color: var(--blueColor);
  filter: drop-shadow(0px 0px 5px rgba(119, 219, 254, 0.7));
}
.inActiveHover:hover {
  color: var(--blackColor);
  filter: none;
}
#navLink {
  position: absolute;
  left: 100px;
  top: 25px;
}
#navLogo {
  width: 130px;
}
main {
  min-height: 100vh;
  background-color: var(--blackColor);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#aboutSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--blackColor);
  min-height: 100vh;
  width: 85%;
}
.aboutTitle {
  color: var(--whiteColor);
  grid-area: title;
  font-weight: 1000;
  font-size: 3rem;
  text-align: right;
  margin-top: 11%;
}
.titleAnimation {
  opacity: 0;
  translate: translateY(350px);
}
.aboutGridContainer {
  display: grid;
  grid-template-areas:
    "title ."
    "textLeft ."
    ". textRight";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 130px 1fr 1fr;
  column-gap: 4%;
  width: 100%;
  height: 70%;
  transition: all 2.8s ease;
}
.aboutAnimation {
  opacity: 0;
  translate: translateY(350px);
}
.aboutTextLeft {
  color: var(--whiteColor);
  grid-area: textLeft;
  font-size: 1rem;
  font-weight: 1;
  text-align: right;
  line-height: 28px;
}
.textLeftAnimation {
  opacity: 0;
  margin-left: 200px;
}
.aboutTextRight {
  color: var(--whiteColor);
  grid-area: textRight;
  font-size: 1rem;
  font-weight: 1;
  line-height: 28px;
}

.madeByContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 1.8s ease;
}
.madeByContainer p {
  color: var(--whiteColor);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  margin: 2px 0;
}
.madeByContainer h2 {
  color: var(--greyColor);
  font-size: 0.9rem;
  font-weight: 300;
  text-align: center;
  margin: 2px 0;
}

#iconContainer {
  height: 12%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 18%;
  margin: 5% 0 2% 0;
}
#iconContainer img {
  height: 50px;
  transition: filter 1s, transform 1s, opacity 1s, scale 0.2s ease-in-out;
}
#iconContainer img:hover {
  scale: 1.1;
}

.mouseGlow {
  position: fixed;
  width: 800px;
  height: 800px;
  z-index: 1;
  transition: left 0.15s, top 0.15s, opacity 1s ease;
  pointer-events: none;
}

.githubIcon {
  transform: translateX(0);
}
.githubAnimation {
  transform: translateX(-50px);
  filter: blur(5px);
  opacity: 0;
}
.youtubeIcon {
  transform: translateX(0);
}
.youtubeAnimation {
  transform: translateX(-50px);
  filter: blur(5px);
  opacity: 0;
}
.juIcon {
  transform: translateX(0);
}
.juAnimation {
  transform: translateX(-50px);
  filter: blur(5px);
  opacity: 0;
}
.madeByAnimation {
  opacity: 0;
}
.mouseAnimation {
  opacity: 0;
}