@font-face {
  font-family: "upheaval";
  src : url("../fonts/upheavtt.ttf");
}

body
{
  margin : 0;
  background-color: black;
  overflow-x: hidden;
}
.text_effect {
  z-index:-1;
  position: fixed;
  width : 100vw;
  height : 100vh;
  background-image: url("../img/portfolio_bg_txt.png");
  background-size: 10%;
  animation : backgroundScrollDiagonal 10s infinite;
  animation-timing-function : linear;
  mix-blend-mode: lighten;
  filter : sepia();
  pointer-events: none;
}

.bg_display {
  position : absolute;
  z-index: -1;
  width : 100%;
  top : -45vw;
  left : 4%;
  
  opacity: 50%;
  mix-blend-mode: hard-light;
}

@keyframes backgroundScrollDiagonal {
  0% {
    background-position-x: 0;
    background-position-y: 0;
  }
  100% {
    background-position-x: 100vw;
    background-position-y: -100vh;
  }
}

header img
{
  width : 14vw;
  margin-left :44vw;
  margin-top : 1vw;
  animation : logoPulse 3s infinite;
}

nav {
  margin-top : 12rem;
}

nav ul li {
  width : 100%;
  text-align: center;
  margin-bottom : 1rem;
}
nav ul li a {
  /*text-decoration: none;*/
  color : lime;
  mix-blend-mode:  normal;
  
  font-family: "upheaval";
  filter : sepia();
}

@keyframes logoPulse {
  0% {
    filter : drop-shadow(0 0 2px white);
  }
  30% {
    filter : drop-shadow(0 0 2px white);
  }
  65% {
    filter : drop-shadow(0 0 10px white);
  }
  100% {
    filter : drop-shadow(0 0 2px white);
  }
}

h1 {
  text-align: center;
  color : white;
  font-family: "upheaval";
  font-size : 3rem;
}
#mylibs {
  margin-top: 20rem;
}
#mylibs nav {
  margin-top : 0;
  margin-bottom : -15rem;
}

#portfolio {
  margin-top : 20rem;
}

.project {
  display : block;
  /*width : 100%;*/
  margin : 0 1rem 2rem 1rem;
  height : 30vw;
}

.project #media {
  display : inline-block;
  width : 47.5%;
}
.project #description {
  display: inline-block;
  margin-top : -1rem;
  width : 47.5%;
  color : white;
  font-family: "upheaval";
  font-size: 1.4rem;
  float : right;
}
.project #description p {
  text-align: justify;
}
.project #description a
{
  color : lime;
  cursor: cell;
}
.project #description .disabled-link {
  color : red;
  cursor : default;
}

#other-stuff {
  text-align: center;
  color : white;
  font-family: "upheaval";
  font-size : 1rem;
}
#other-stuff h1 {
  margin-left: 1rem;
  font-size: 3rem;
}

#other-stuff h2 {
  margin-left: 1rem;
  font-size:2rem;
}
.gallery {
  display : flex;
  flex-wrap: wrap;
  gap :1rem;
  
  margin : 1rem;
  
  transform-origin: top center;
  scale : 25%;
  height : 50rem;
  
}
.gallery img {
  aspect-ratio: initial;
  width : 25%;
  flex: fit-content;
  border-radius : 1rem;
}

.music {
  display : block;
  position:relative;
  width : 50%;
  height : 1.2rem;
  transform-origin: top center;
  left : 25%;
  text-align: left;
  margin : 1rem;
  top : 2rem;

}

.music #music_title {
  display : inline-block;
  position : relative;
  font-size : 1.2rem;
  text-align: top left;
  bottom : 1.2rem;
  
}

audio {
  display: inline-block;
  position : relative;
  float : right;
  transform-origin: top right;
  top : -1.2rem;
  align-self: right;
  height : 1.2rem;
  width : 25rem;
}

nav ul li #mygithub {
  filter:none;
  background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}