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

        .main-nav {
            text-align: center;
            font-style: italic;
        }

        .main-image {
            display: grid;
            place-items: center;
        }

        .main-image img {
            max-width: 50%;
            height: auto;
            display: block;
        }

        body {
            background-image: url('/images/greenpinkbackground.jpg');
            cursor: url('https://www.rw-designer.com/cursor-view/173848.png'), auto;
        }

        .container {
            background-color: whitesmoke;
            width: 75%;
            margin: auto;
            margin-right: auto;
            margin-left: auto;
            border: 2px solid Hotpink;
            border-radius: 10px;
        }

.profile-container {
    border: 2px solid Hotpink;
    border-radius: 10px;
    margin: 10px;
    display: grid;
    grid-template-columns: 25% 75%;
    gap: 20px; /* Adds space between the columns */
    padding: 20px;
}

.profile-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.profile-container-bio {
    padding: 20px;
    box-sizing: border-box;
    overflow-x: auto; /* Safe fallback */
}

.bio-table {
    border-collapse: collapse;
    width: 100%; /* Changed to 100% to fill its container */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    max-width: 100%;
    table-layout: fixed; /* Helps with consistent column widths */
}

.bio-table th, .bio-table td {
    border: 2px solid Hotpink;
    border-radius: 10px;
    padding: 10px; /* Adds padding inside table cells */
    text-align: left;
    width: 50%;
}

        p {
            color: Hotpink;
            font-family: MilkyVintage;
            padding-left: 5px;
            padding-right: 5px;
            font-size: 20px;
        }
        
        a {
          color: Hotpink;
          font-family: MagicVintage;
          text-decoration: none;
        }
        
        a:hover {
          background-color: lawngreen;
          cursor: url('/images/catcursorlink.ani'), pointer;
        }
        
        
@font-face {
  font-family: MagicVintage; /* set name */
  src: url('/fonts/Magic Vintage TTF.ttf'); /* url of the font */
}

h1 {
  font-family: MagicVintage;
}

@font-face {
  font-family: MilkyVintage;
  src: url('/fonts/MilkyVintage-Regular.ttf');
}

td {
  font-family: MilkyVintage;
  color: Hotpink;
  font-size: 20px;
}

h3 {
  font-family: MagicVintage;
}

hr {
  color: Hotpink;
  width: 75%;
}

@media (max-width: 768px) {
    .profile-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }
    
    .profile-container-bio {
        padding: 10px;
    }