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

body {
  display: grid;
  place-items: center;
  height: 70vh;
  background-color: black;
  align-self: center;
  min-width: 600px;
}

.back-video{
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
}

header {
  position: absolute;
  color: white;
  height: max-content;
  width: max-content;
  z-index: 0;
  margin-bottom: 20vh;
  display:grid;
  background-color: rgba(137, 137, 137, 0.377);
  
  border-radius: clamp(2rem, 0.5vw, 1rem);
  padding-top: 2px;
  transition: 1s;
  min-width: 550px;
}

header:hover{
  background-color: rgb(255, 200, 59);
}

.mainCard{
  background-color: black;
  position: relative;
  display: grid;
  grid-template-columns: 10% 30% 50%;
  justify-items: start;
  gap: 10px;
  width: 98%;
  height: 95%;
  margin-left:1%;
  margin-top:0.5%;
  left:0px;
  top:0px;
  border-radius: clamp(2rem, 0.5vw, 1rem);
  min-width: 500px;
}

.headingText{
  padding-top: 5%;
  right: 30px;
  background-color: transparent;
  font-family: 'Space Mono', monospace;
  font-size: 6vh;
  text-align: left;
  pointer-events: none;  
}

.credentials{
  min-height: 100%; 
  font-family: 'JetBrains Mono';
  font-size: 2vh;
}

.portfolioIMG{
  background-color: transparent;
  object-fit:scale-down;  
  height: 24vh;
  width: 24vh;
  pointer-events: none;
  justify-self: center;
}

.links{
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 20px;
  z-index: 0;
  background-color: transparent;
  object-fit:scale-down;  
  display: grid; 
  grid-template-rows: auto auto auto;
  gap: 2vw;
  width: 2rem;
  align-items: center;
}

.header .mainCard .links a.linkImg,
.header .mainCard .links a.linkImg:link,
.header .mainCard .links a.linkImg:visited {
    height: 2vw;
    width: 2vw;
    display: block;
    color: white !important; /* Default icon color is white */
    transition: color 0.3s ease-in-out;
}

.header .mainCard .links a.linkImg:hover {
    color: rgb(255, 200, 59) !important; /* Hover color */
}

.container {
  display: flex;
  position: relative;
  margin-top: 40vh;
  margin-bottom: 10vw;
  width: 70%;
  height: 40vh;
  min-width: 600px;
  justify-content: space-evenly;
}


.cardHeader{
  font-family: 'Space Mono', monospace;
  font-size: calc(1.75vw + 1rem);
  color: white;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 20vw;
  min-width: 150px;
  z-index: 2;
}

.headerLine{
  top: calc(2vw + 1rem);
  position: absolute;
  height: 0.5%;
  left: 10%; 
  width: 0%;
  z-index: 3;
  background-color: rgb(255, 200, 59);
  transition: width 1s;
}

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

.cardIMG{
  position: absolute;
  height: 100%;
  width: 20vw;
  min-width: 150px;
  background-color: black;
  object-fit: cover;  
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
}

.card{
  padding: 5px;
  font-family: 'Space Mono', monospace;
  font-size: clamp(3rem, 3vw, 10rem);
  text-align:center;

  display: grid;

  border-radius: clamp(0.4rem, 0.75vw, 1rem);
  height: 100%;
  width: 20vw;
  min-width: 150px;
  background-color: rgba(255, 255, 255, 0.186);
  transition: background-color 1s;
}

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

.gradient {
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
  position: absolute;
  height: 100%;
  width: 20vw;
  min-width: 150px;
  object-fit: cover;  
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
}

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

/* ----------- iPhone X ----------- */
/* @media only screen 
  and (min-device-width: 0px) 
  and (max-device-width: 600px){ 
    body {
      display: grid;
      place-items: center;
      height: 70vh;
      background-color: black;
      align-self: center;
      min-width: 300px;
      max-width: 375px;
      overflow-x: hidden;
    }

    .back-video {
        position: fixed;     
        width: 100%;        
        height: 100%;       
        z-index: -1;         
        right: 0px;
        bottom: 0px;
        object-fit: cover;
        opacity: 50%;
    }

    header {
      position: absolute;
      color: white;
      min-height: 90px;
      max-height: 120px;
      width: max-content;
      z-index: 0;
      margin-bottom: 50px;
      display:grid;
      background-color: rgba(137, 137, 137, 0.377);
      
      border-radius: clamp(1rem, 0.5vw, 2rem);
      padding-top: 2px;
      transition: 1s;
      min-width: 200px;

      margin-left: 20px;
      margin-right: 20px;

      margin-top: 100px;
      margin-bottom: 100px;
    }

    header:hover{
      background-color: rgb(255, 200, 59);
    }

    .mainCard{
      background-color: black;
      position: relative;
      display: grid;
      grid-template-columns: 20% 30% 50%;
      justify-items: start;
      gap: 10px;
      
      max-height: calc(object-fit - 2px);

      margin-left:1%;
      margin-top:0.5%;
      left:0px;
      top:0px;
      border-radius: clamp(1rem, 0.5vw, 2rem);
      min-width: 200px;
      max-width: 300px;
    }

    .headingText{
      padding-top: 5%;
      margin-right: calc(5% + 5px);
      background-color: transparent;
      font-family: 'Space Mono', monospace;
      font-size: 2.5vh;
      text-align: left;
      pointer-events: none;  
    }

    .credentials{
      min-height: 100%; 
      font-family: 'JetBrains Mono';
      font-size: 1vh;
      text-wrap-mode: wrap;
    }

    .portfolioIMG{
      background-color: transparent;
      object-fit:scale-down;  
      height: 24vw;
      width: 24vw;
      pointer-events: none;
      justify-self: center;
    }

    .links{
      margin-top: calc(0.5rem);
      margin-left: 20%;
      z-index: 0;
      background-color: transparent;
      object-fit:scale-down;  
      display: grid; 
      grid-template-rows: 20px 20px 20px;
      gap: 5px;
      width: 1rem;
      align-items: center;
    }

    .header .mainCard .links a.linkImg,
    .header .mainCard .links a.linkImg:link,
    .header .mainCard .links a.linkImg:visited {
        height: 0.9rem;
        width: 0.9rem;
        display: block;
        color: white !important; 
        transition: color 0.3s ease-in-out;
    }

    .header .mainCard .links a.linkImg:hover {
        color: rgb(255, 200, 59) !important;
    }

    .container {
      display: flex;
      position: relative;
      max-width: 375px;
      width: 100%;
      min-width: 200px;
      justify-content: space-evenly;
      flex-direction: column;
    }

    .cardHeader{
      font-family: 'Space Mono', monospace;
      font-size: calc(0.75vw + 1rem);
      color: white;
      text-align: center;
      position: relative;
      height: 30px;
      width: 100%;
      min-width: 150px;
      z-index: 2;
    }

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

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

    .cardIMG{
      position: absolute;
      height: 100px;
      min-width: 250px;
      background-color: black;
      object-fit: cover;  
      border-radius: clamp(0.4rem, 0.75vw, 1rem);
    }

    .card{
      margin-top: 20px;
      margin-left: calc(50% - 125px);

      padding: 5px;
      font-family: 'Space Mono', monospace;
      font-size: clamp(3rem, 3vw, 10rem);
      text-align:center;

      display: grid;

      border-radius: clamp(0.4rem, 0.75vw, 1rem);
      min-height: 100px;
      min-width: 250px;
      background-color: rgba(255, 255, 255, 0.186);
      transition: background-color 1s;
    }

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

    .gradient {
      background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
      z-index: 2;
      position: absolute;
      height: 100px;
      min-width: 250px;
      object-fit: cover;  
      border-radius: clamp(0.4rem, 0.75vw, 1rem);
    }

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

/* ----------- Google Pixel ----------- */
/*@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}*/

/* ----------- Galaxy S8+ ----------- */
/*@media screen 
  and (device-width: 360px) 
  and (device-height: 740px) 
  and (-webkit-device-pixel-ratio: 4) {

}*/