@font-face {
  font-family: 'JetBrains Mono';
  src: url('./Assets/JetBrainsMono-Medium.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

/*
https://www.w3schools.com/howto/tryit.asp?font=JetBrains%20Mono
https://www.w3schools.com/howto/tryit.asp?font=IBM%20Plex%20Mono
https://www.w3schools.com/howto/tryit.asp?font=Albert%20Sans
https://www.w3schools.com/howto/tryit.asp?font=Bebas%20Neue
*/


body{
    background-color: black;
    display: grid;
}

.back-video{
    
    filter:sepia(100%) saturate(2) hue-rotate(190deg) blur(7px);
    
    position: fixed;
    right: 0px;
    bottom: -45%;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

menu{
    top: 30%;
    position:absolute;
    background-color: rgba(129, 129, 129, 0);
    height: 100%;
    width: 95%;
    right: 5%;
    padding: 0%;
    margin: 0%;
}

header{
    z-index: 20;
    position: absolute;
    color: white;
    background-color: black;
    width: 50%;
    height: 15%;
    margin-left: 25%;
    text-align: center;
    font-size: 5vw;
    font-family: 'JetBrains Mono', monospace;
    border-radius: clamp(2rem, 0.5vw, 1rem);
}

.back-button{
    top: 1vw;
    z-index: 20;
    position: absolute;
    color: white;
    background-color: black;
    width: 15%;
    height: 15%;
    margin-left: 5%;
    text-align: center;
    font-size: 3vw;
    font-family: 'JetBrains Mono', monospace;
    border-radius: clamp(2rem, 0.5vw, 1rem);
    transition: 1s;
}

.back-button:hover{
  color: #c2920e;
}

nav{
  top:0px;
  z-index: 20;
  height: 15%;
  background-color: black;
  width: 100%;
  position: fixed;
  display: grid;
}

.card{
    padding: 10px;
    background-color: rgba(101, 101, 101, 0.551);
    position: relative;
    display: grid;
    width: 80%;
    height: 50%;
    margin-left:1%;
    margin-bottom:5%;
    left:10%;
    top:0px;
    border-radius: clamp(2rem, 0.5vw, 1rem);
    transition: 1s;
}

.card:hover{
  color: black;
  background-color: #c2920e;
}

.project{
    background-color: black;
    position: absolute;
    display: grid;
    width: 98%;
    height: 97%;
    margin-left:1%;
    top:1.5%;
    left:0px;
    border-radius: clamp(2rem, 0.5vw, 1rem);
}

.headerLine{
    top: 3vw;
    position: absolute;
    height: 0.1%;
    left: 1.5%;
    width: 0%;
    z-index: 6;
    background-color: rgb(255, 200, 59);
    transition: width 1s;
}

.card:hover .headerLine{
  width: 50%;
}

.cardHeader{
  top:1.5%;
  left:1%;
  font-family: 'Space Mono', monospace;
  font-size: 2.5vw;
  color: white;
  text-align: center;
  position: absolute;
  background-color: black;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: clamp(2rem, 0.5vw, 1rem);

  height: 10%;

  z-index: 5;
  transition: 1s;
}

.projectLink{
  top:0px;
  left:0px;
  background-color: transparent;
  z-index: 10;
  height: calc(100%);
  width: calc(100%);
  border-radius: clamp(2rem, 0.5vw, 1rem);
}

.card:hover .cardHeader{
  color:rgb(255, 200, 59)
}

.projectDate{
  top:11.5%;
  left:8%;

  height: 10%;

  font-family: 'Jetbrains Mono', monospace;
  font-size: 2vw;
  color: transparent;
  text-align: center;
  position: absolute;
  
  background-color: transparent;
  border-radius: clamp(2rem, 0.5vw, 1rem);
  transition: 1s;

  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  
  z-index: 5;
}

.card:hover .projectDate{
  color:white;
}

.projectDescription{
  top:25%;
  left:4%;
  font-family: 'Space Mono', monospace;
  font-size: 1.5vw;
  color: transparent;
  text-align:start;
  position: absolute;
  transition: 1s;
  background-color: transparent;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: clamp(2rem, 0.5vw, 1rem);
  z-index: 5;
  width: 30%
}

.card:hover .projectDescription{
  color: white;
}

.cardIMG{
  top:1.5%;
  left:1%;
  position: absolute;
  height: 97%;
  width: 98%;
  object-fit: cover;  
  border-radius: clamp(2rem, 0.5vw, 1rem);
  z-index: 2;
}

.gradient {
  top:1.5%;
  left:1%;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0) 80%);
  z-index: 3;
  position: absolute;
  height: 97%;
  width: 98%;
  object-fit: cover;  
  border-radius: clamp(2rem, 0.5vw, 1rem);
  pointer-events: none;
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}