@font-face {
    font-family: 'JetBrains Mono';
    src: url('./Assets/JetBrainsMono-Medium.ttf') format('truetype');
  }  
  
  a:link { 
    color:white;
    transition: 1s;
  } 
  a:visited { 
    color:white;
    text-decoration: none; 
  } 
  a:hover {
    color:#c2920e;  
  } 
  a:active { 
    color:white;
    text-decoration: none; 
  }


body{
    background-color: rgb(20, 20, 20);
    display: grid;
}

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

h1{
    height: 0%;
    color: white;
    font-size: 4vw;
    font-family: 'JetBrains Mono', monospace;
}

hr{
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    left:-100%;
    width:95%;
}

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{
    left:0px;
    top:0px;
    z-index: 20;
    height: 15%;
    background-color: black;
    width: 100%;
    position: fixed;
    display: grid;
}

.back-video{
  filter: sepia(100%) saturate(3) hue-rotate(190deg) blur(5px);
  position: fixed;
  right: 0px;
  bottom: -50%;
  min-width: 100%;
  min-height: 100%;
}

.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;
}

.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: 40%
}

.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);
}