body {
  font-family: "indivisible", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

/* General focus styles for accessibility */
a:focus {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 2px;
}

/* Ensure focus is visible on all interactive elements */
*:focus {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 1px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 1px;
}

h1 {
  text-align: center;
  font-style: italic;
  font-family: "bitcount-grid-single-circle", serif;
  margin: 5px;
  margin-top: 50px;
  font-size: 3em;
}

#letter-a {
  animation: color-change 5s linear infinite;
  font-family: "halogen", sans-serif;
  animation-delay: 0s;
  color: rgb(56, 158, 198);
}

#letter-v {
  animation: color-change 5s linear infinite;
  font-family: "halogen", sans-serif;
  animation-delay: 1s;
  color: rgb(56, 158, 198);
}

#letter-i {
  animation: color-change 5s linear infinite;
  font-family: "halogen", sans-serif;
  animation-delay: 2s;
  color: rgb(56, 158, 198);
}

.gif-divider {

  margin: 0 auto;
  /* Center the container horizontally */

  max-width: 1024px;
  display: flex;
  /* Use Flexbox for layout */
  flex-wrap: nowrap;
  /* Prevent GIFs from wrapping to the next line */
  justify-content: space-between;
  /* Distribute GIFs evenly across the row */
  align-items: center;
  /* Align GIFs vertically */
  width: 100%;
  /* Full width of the screen */
  height: 16px;
  /* Fixed height for the divider */
  overflow: hidden;
  margin-top: 16px;
  margin-bottom: 20px;
  /* Prevent content overflow */
  background: linear-gradient(to right, rgb(67, 195, 237), rgb(213, 45, 213), rgb(95, 237, 190));
  /* Gradient background */

}

.gif-divider img {
  height: 100%;
  /* Scale GIFs to fit the divider's height */
  flex-shrink: 0;
  /* Prevent GIFs from shrinking too much */
  margin-right: 20px;
  /* Add spacing between GIFs */
  /* display: none; */
  object-fit: contain;
  /* Ensure GIFs maintain aspect ratio */
}

/* Keyframes for changing colors */
@keyframes color-change {
  0% {
    color: rgb(56, 158, 198);
  }

  25% {
    color: rgb(50, 216, 111);
  }

  50% {
    color: rgb(240, 78, 145);
  }

  75% {
    color: rgb(211, 57, 211);
  }

  100% {
    color: rgb(56, 158, 198);
  }
}

/* Centering Container */
.center-container {
  display: flex;
  flex-direction: column;
  /* Stack elements vertically */
  /* justify-content: center; */
  /* Center vertically */
  align-items: center;
  height: 40px;
  ;
  /* Center horizontally */
  /* Full viewport height */
  /* background: #f0f0f0; */
  /* Light background for visibility */
  margin: 0;
}

/* Static Description Text */
.description {
  font-size: 1.2em;
  font-family: Arial, sans-serif;
  line-height: 1;
  margin: 5px;
  ;
  white-space: nowrap;
  /* Prevent wrapping */
  text-align: center;
  /* Center align text */
  /* margin-bottom: 10px; */
  /* Add space between lines */
}


.section-title {
  text-align: center;
  margin: 10px;

}

h5 {
  text-align: center;
  margin: 0;
  font-style: italic;
  opacity: .6;

}










/* General Card Styling */
.portfolio-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  /* Center the container horizontally */

  max-width: 1024px;
  /* 3 columns on large screens */
  gap: 20px;
  padding: 10px;
}

@media (max-width: 1024px) {
  .portfolio-container {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on medium screens */
  }
}

@media (max-width: 768px) {
  .portfolio-container {
    grid-template-columns: 1fr;
    /* 1 column on small screens */
  }
}

.portfolio-card {
  background: white;
  border-radius: 8px;
  text-decoration: none;
  /* Remove underline */
  overflow: hidden;
  box-shadow: 0px 0px 0px rgb(22, 127, 233);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 350px;
  /* Fixed card height */
  transition: box-shadow 0.2s ease-in-out;

}

.portfolio-card:hover {
  box-shadow: 0px 8px 0px rgb(39, 194, 179);
}

.portfolio-card:focus {
  outline: 3px solid rgb(39, 194, 179);
  outline-offset: 2px;
  box-shadow: 0px 8px 0px rgb(39, 194, 179);
}

.portfolio-card:focus-visible {
  outline: 3px solid rgb(39, 194, 179);
  outline-offset: 2px;
  box-shadow: 0px 8px 0px rgb(39, 194, 179);
}

.media {
  width: 99%;
  height: 60%;
  border-radius: 20px 20px 0px 0px;
  /* border-radius: 10px 50px 0px 30px; */
  border: #222 2px solid;
  /* Take up half of the card height */
  object-fit: cover;
  /* Ensure the media fits nicely */
  /* border-bottom: 2px solid #000; */
}



.portfolio-description {
  font-size: 1em;
  color: #333;
  /* margin: 16px; */
  text-align: center;
  justify-content: center;
  line-height: 1.2;
}

/* Font change animation */
.animate-font {
  animation: font-change .7s infinite;
  /* Change to a new font */
}

.animate-stuff {
  animation: font-change 2s infinite;
  /* Change to a new font */
}

#stuff-span {
  padding: 0px 5px;
}


@keyframes font-change {

  0%,
  100% {
    font-family: 'Courier New', monospace;
  }

  20% {
    font-family: 'Arial', sans-serif;
  }

  40% {
    font-family: 'Comic Sans MS', cursive;
  }

  60% {
    font-family: 'Palatino', serif;
  }

  80% {
    font-family: 'Helvetica', sans-serif;
  }
}




.portfolio-title {
  /* font-size: 1.5em; */
  font-weight: 900;
  /* color: rgb(68, 27, 233); */
  color: black;
  padding: 0px 5px;
  margin: 0px;
  background-color: rgba(182, 254, 0, 0.322);
  /* background-color:linear-gradient(to right, rgb(67, 195, 237), rgb(213, 45, 213), rgb(95, 237, 190)); */
  font-style: italic;
  font-family: "bookmania", serif;
}




/* Image to fly across the screen */
/* Flying image styles */
.flying-image {
  position: fixed;
  /* Keeps the image relative to the viewport */
  top: 50%;
  /* Start at the vertical center of the viewport */
  left: -100px;
  /* Start just outside the left edge of the screen */
  transform: translateY(-50%);
  /* Vertically center the image */
  width: 200px;
  /* Set a fixed width for the image */
  z-index: 9999;
  /* Ensure the image is on top of all content */
  pointer-events: none;
  /* Prevent the image from interfering with clicks */
  animation: fly-across 30s linear infinite;
  animation-delay: 10s;
  /* Smooth animation across the screen */
}

/*  */





@keyframes fly-across {

  0%,
  100% {
    /* Random vertical position between 10% and 90% */
    left: -100vw;
    transform: translateY(-50%) rotate(0deg);
    opacity: 1;

  }

  50% {

    left: -100px;
    transform: translateY(-50%) rotate(360deg);
    opacity: 1;
    /* Full rotation */

  }


51% {

  left: -100px;
  transform: translateY(-50%) rotate(360deg);
  opacity: 0;
  /* Full rotation*/
}

90% {
  left: -100px;
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}



}

@keyframes fly-across-2 {

  0%,
  100% {
    /* Random vertical position between 10% and 90% */
    left: -200px;
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;

  }

  50% {

    left: 100vw;
    transform: translateY(-50%) rotate(270deg);
    opacity: 1;
    /* Full rotation */
  }

  /* 51% {

    left: 50vw;
    transform: translateY(-50%) rotate(2700deg);
    opacity: 0;
    /* Full rotation 
  } */

  80% {
    left: -200px;
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;
  }



}


.social-title {
  text-align: center;
  margin: 0;
}

/* Footer styling */
.social-footer {
  display: flex;
  justify-content: center;
  /* Center the icons */
  align-items: center;
  padding-bottom: 20px;
  padding-top: 8px;
  /* background-color: #f8f9fa; */
  /* Light background color */
  /* border-top: 1px solid #ddd; */
  /* Optional border at the top of the footer */
  /* position: fixed; */
  /* Stick to the bottom of the page */
  bottom: 0;
  /* width: 100%; */
  /* Full width */
  /* z-index: 1000; */
  /* Keep it above other content */
}

/* Social icon styling */
.social-icon {
  color: #333;
  /* Neutral gray color */
  font-size: 24px;
  /* Icon size */
  margin: 0 15px;
  /* Space between icons */
  transition: color 0.3s ease;
  text-decoration: none;
  /* Remove underline */
}

.social-icon:hover {
  color: rgb(39, 194, 179);
  /* Change color on hover (blue) */
}

.social-icon:focus {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 3px;
  color: rgb(39, 194, 179);
}

.social-icon:focus-visible {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 3px;
  color: rgb(39, 194, 179);
}

.bsky-logo {
  width: 24px;
  /* Match the size of the Font Awesome icons */
  height: auto;
  /* Maintain aspect ratio */
  transition: transform 0.5s ease;
  /* Smooth hover effect */
filter: saturate(0%);
  transition: filter 0.3s ease;
}

.bsky-logo:hover{
  filter: saturate(100%);
}

.bsky-logo:focus {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 3px;
  filter: saturate(100%);
}

.bsky-logo:focus-visible {
  outline: 2px solid rgb(39, 194, 179);
  outline-offset: 3px;
  filter: saturate(100%);
}