/* GLOBAL */
body{
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

/* Header container to hold the image and nav on the same line */
.header {
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes content to opposite sides */
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    /* background-color: #333; */
}

.container{
    max-width: 700px;
    border: 12px;
    padding: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

p{
    overflow: hidden;
}

img {
    max-width: 700px;
}

.container iframe {
    width: 100%; /* Matches the container width */
    height: auto; /* Ensures the aspect ratio is maintained */
    display: block; /* Removes inline-block extra spacing */
    aspect-ratio: 16 / 9; /* Maintains the 16:9 aspect ratio */
}

/* iframe{
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
    border: 12px;
    padding: 20px;
} */

/* photo */

.me{
    display: inline-flex;
    overflow: hidden;
    width: 85px;
    height: auto;
    border-style: solid;
    float: left;
    border-radius: 9999px;
    color: white;
}

/* NAV BAR */

  /* Top navigation styles */
.topnav {
    /* background-color: #333; */
    border-bottom: #333;
    overflow: hidden;
    display: flexbox; /* Use flex for better alignment */
    justify-content: flex-end; /* Align nav items to the right */
    position: relative; /* Relative positioning for the dropdown */
}

/* Style the links */
.topnav a {
    color: #333;
    text-decoration: none;
    padding: 14px 16px;
    font-size: 17px;
}

/* Hover effect for links */
.topnav a:hover {
    border-left: 5px solid black;
    font-weight: 900;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
  }


/* CONTACT */

.form-container{
    /* background: rgba(255, 255, 255, 0.1); */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(8, 9, 9, 0.3);
    /* width: 520px; */
    max-width: 700px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}

h2 {
    color: black;
    margin-bottom: 20px;
}

.input-box {
    position: relative;
    margin: 20px 0;
}

.input-box input, textarea {
    width: 100%;
    padding: 12px 15px;
    background: none;
    border: none;
    outline: none;
    color: black;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    border-bottom: 2px solid rgba(21, 19, 19, 0.5);
    transition: 0.4s;
}

.input-box input:focus, textarea:focus {
    border-color: #242424;
    box-shadow: 0 5px 15px rgba(19, 19, 19, 0.3);
}

.input-box span {
    position: absolute;
    top: 50%;
    /* left: 15%; */
    line-height: 1.7;
    color: black;
    font-size: 16px;
    pointer-events: none;
    transition: 0.4s;
    transform: translateY(-50%);
}

.input-box input:focus + span, 
.input-box input:not(:placeholder-shown) + span
 {
    top: 5px;
    font-size: 12px;
    color: black;
}

.input-box textarea:focus + span,
.input-box textarea:not(:placeholder-shown) + span
 {
    top: 5px;
    font-size: 12px;
    color: black;
}

.input-box textarea:focus {
    height: 250px; /* Expanded height */
    border-color: #242424;
    box-shadow: 0 5px 15px rgba(19, 19, 19, 0.3);
}

.submit-btn {
    background: linear-gradient(90deg, #000000, #131414);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
    margin-top: 10px;
}

.submit-btn:hover {
    background: linear-gradient(90deg, #000000, #080c0a);
    box-shadow: 0 5px 15px #0a052e80;
}

/* Circle container */
.char-circle {
    position: absolute;
    bottom: -40px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid lightgrey;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: grey;
    background: conic-gradient(#59b6b6 0deg, lightgrey 0deg);
    
}

/* Count number in the center */
#char-count {
    position: center;
    z-index: 1;
    color: black;
    align-items: center;
}


/* Code blocks */

pre {
    background-color: #272822; /* Dark background for code blocks */
    color: #f8f8f2; /* Light text */
    padding: 15px;
    border-radius: 8px; /* Rounded corners */
    overflow-x: auto; /* Enable horizontal scrolling for long lines */
    max-width: 1000px; /* Ensure it doesn't exceed the container width */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    white-space: pre-wrap; /* Wrap text and remove literal indentation */
    word-wrap: break-word;
}

/* copy button */
.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    z-index: 1;
}

.copy-button:hover {
    background-color: #0056b3;
}


/* table */
table{
    border-collapse: collapse;
    border-radius: 15px;
    margin: 25px 0;
    font-family: sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    text-align: center;
    table-layout: fixed;
  }

  thead tr {
    background-color: black;
    color: #ffffff;
    padding: 12px 15px;
  }

  td {
    padding: 12px 15px;
  }

  tbody tr {
    border-bottom: 1px solid #dddddd;
  }

  tbody tr:last-of-type {
    border-bottom: 2px solid #009870;
  }

  /* media screens */

  @media screen and (max-width: 600px) {
    .topnav a{display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      color: black;
      background-color: white;
      padding: 14px 16px;
      cursor: pointer;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      display: none;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav {
        background-color: #333;
        overflow: hidden;
        display: flexbox; /* Use flex for better alignment */
        justify-content: flex-end; /* Align nav items to the right */
        position: relative; /* Relative positioning for the dropdown */
    }
    .topnav a {
        color: #f2f2f2;
        text-decoration: none;
        padding: 14px 16px;
        font-size: 17px;
    }
    /* Hover effect for links */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
  }

  /* media screen */
  @media screen and (max-width: 600px) {
    img {
      max-width: 100%;
    }
}

/* Parent container for scrolling */
.table-container {
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
    width: 100%; /* Ensure the container doesn't exceed the viewport */
}

/* grid */
.content-grid {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 40px;
}

/* cards */
.card-link {
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Ensure the text inside maintains the card's color scheme */
    display: block; /* Makes the <a> tag span the full width and height of the card */
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    max-width: 300px;
  }
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    cursor: pointer;
  }
  
  /* Add some padding inside the card container */
  .card-container {
    padding: 2px 16px;
  }

  .card img {
    max-width: 300px;
  }