nav {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 75px;

  background: linear-gradient(to bottom, var(--bg-dark), transparent);

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 10vw auto 10vw;

  align-items: start;
  z-index: 5;
}
@media screen and (max-aspect-ratio: 4/5) {
  nav {
    display: none;
    background: transparent;
    opacity: 0;
  }
}

#navbar-text h3 {
  font-family: 'Tomorrow';
  width:min-content;
  position: relative;
}

#navbar-text {
  --hover-padding-lr: 4px;
  --hover-padding-down: 15px;

  width: 100%;
  height: 75%;

  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;

  /* display: flex;
  justify-content: space-between; */
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: 1fr;

  grid-column-gap: max(3vw, calc((2 * var(--hover-padding-lr)) + 10px));

  align-content: center;
  align-items: center;
  justify-content: center;

  /* grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  grid-template-rows: 1fr; */
}

.navbar-text-container {
  width: max-content;
  position: relative;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;

  align-content: center;
  align-items: center;
  justify-items: center;
}

.navbar-button {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;

  width: 100%;
  height: 50%;

  background-color: transparent;
  border: none;
  z-index: 2;
}

.navbar-text-basic {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  font-weight: 100;
  opacity: 1;
  text-align: center;
  padding: auto;
}

.navbar-text-hover {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  font-weight: 700;
  text-align: center;

  mask:
    /* 1st layer */
    linear-gradient(#000 0 0),

    /* 2nd layer */
    linear-gradient(135deg, #000 50.5%, #0000 0) padding-box 
      50% 50% / 200% 200% no-repeat,

    /* 3rd layer */
    linear-gradient(-45deg, #000 50.5%, #0000 0) padding-box 
      50% 50% / 200% 200% no-repeat;

  mask-composite: exclude, add;
  transition: .15s;

  background: var(--primary3);

  color: var(--text-inverse);

  padding-left: var(--hover-padding-lr);
  padding-right: var(--hover-padding-lr);

  position: relative;
}

.navbar-text-container:hover .navbar-text-hover {
  mask-position: 0% 0%, 100% 100%, 0% 0%;
}

#socials-container {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;

  min-width: 150px;
  max-width: 150px;
  min-height: 75%;
  max-height: 75%;

  display: grid;
  grid-template-columns: 30px auto auto 10px;
  grid-template-rows: auto;

  justify-self: end;
  position: relative;
}

#socials-ig, #socials-git, #socials-ig-hover, #socials-git-hover {
  align-self: center;
  justify-self: center;
  position: absolute;
  
}

.social-nonhover {
  filter: invert(99%) sepia(6%) saturate(625%) hue-rotate(321deg) brightness(115%) contrast(90%);
}

.social-hover {
  filter: invert(0%) sepia(100%) saturate(7432%) hue-rotate(210deg) brightness(88%) contrast(115%);
}

.social-ig {
  grid-column: 3 / 4;
  grid-row: 1 / -1;
  height: 100%;
  padding: 8px 0px;
}

.social-git {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  height: 100%;
  padding: 14px 0px;
}

#socials-bg {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  height: 70%;

  background-color: var(--primary3);
  align-self: center;
  justify-self: stretch;

  transform: skew(25deg) translateX(calc(100% + 20px));
  transition: 100ms;

  box-shadow: 
    -2px -2px var(--primary1),
    3px 3px var(--primary2);
}

#socials-container:hover #socials-bg {
  transform: skew(25deg) translateX(20px);
}

#socials-ig-hover, #socials-git-hover {
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(0deg, #000 50%, #0000 0) padding-box 
      100% 100% / 200% 200% no-repeat;
  mask-composite: exclude;
  transform: scale(90%);
}

#socials-ig-hover {
  transition-delay: 0ms;
  transition-duration: 100ms;

  background-image: url("../socials_icons/ig-logo.svg");
  background-size: 80%;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

#socials-git-hover {
  transition-delay: 0ms;
  transition-duration: 100ms;

  background-image: url("../socials_icons/github-logo.svg");
  background-size: 56%;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

#socials-container:hover #socials-ig-hover {
  transition-delay: 100ms;
  mask-position: 0% 0%;
  transition-duration: 150ms;
  transform: scale(100%);
}

#socials-container:hover #socials-git-hover {
  transition-delay: 200ms;
  mask-position: 0% 0%;
  transition-duration: 150ms;
  transform: scale(100%);
}