body {
    background-color:#252422;
    color: whitesmoke;
    font-family: "PT Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
.landing {
    display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 70% auto;;   
  align-items: center;             
  min-height: 100vh;
  width: 100%;
}

#intro {
    grid-column: 1;
    grid-row: 1;
    font-size: 5rem;
    align-self: center;
    justify-self: center;
    
}
.hero-text {
    grid-column: 1/ span 2; 
    grid-row: 2;
    font-size: 1.2rem;
    align-self: start;  
    justify-self: center;
    margin-top: 1rem;
    
}
.scroll-down {
    position: absolute;
    bottom: 30px;
    right: 50%;
    color: whitesmoke;
    animation: bounce 2s infinite;
    
}
.scroll-down i {
  font-size: 1rem;      
  transform: scaleX(2);  
}

.techList {
    list-style: none;
    font-size: 1.7rem;
}
a:hover {
    color: red
}
.profile-pic {
  position: relative;
  display: inline-flex;
  justify-content: center; /* centers horizontally */
  align-items: center;
}
    
#headshot {
  max-width: 400px;
  height: auto;
  transform: scaleX(-1) scale(0.95);  /* optional */
  display: block;
}

#border-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#border-container svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.2); 
  transform-origin: center;
  animation: drift 4s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2px, -2px) rotate(0.3deg); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
.card {
  border-radius: 0 !important;
  border: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: scale(1.05);  
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); 
  cursor: pointer;
}
.img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.label {
  position: absolute;
  top: 87%;             
  left: 50%;
  transform: translate(-50%, -50%); 
  background: rgba(52, 58, 64, 0.7);   
  color: white;
  padding: 2rem 1rem;
  font-size: 1.5rem;
  font-weight: 600;
  width: 100%;            
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
  
}

.contact {
    outline: 1px solid white;
    width: 45rem;
    margin: 0% auto;
    margin-bottom: 5%;
}
#git-link {
    color: whitesmoke;
}
#git-link:hover {
    color: red;
}
video {
  width: 60%;
}