/* Base styles */
body {
    margin: 0 10%; /* Default margin of 10% on left and right */
    padding: 20px;
    font-family: sans-serif;
}

.content {
    padding: 20px;
    border-radius: 8px;
    max-width: 100%;
    text-overflow: ellipsis; /* Add an ellipsis (...) to indicate that text is truncated */
}

.typing-animation {
    animation: blink 1s step-end infinite;
    font-family: monospace;
}

#typing {
    border-right: 0px solid;
    overflow: hidden;
    word-wrap: break-word;     /* Allow breaking words to prevent overflow */
    word-break: break-all;     /* Break words at any point to prevent overflow */
    white-space: normal;       /* Allow text to wrap to the next line */
}

@keyframes blink {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: #000;
    }
}

table {
  border: 1px solid coral;
  margin: auto;
  border-collapse: collapse;
  max-width: 100%;
  width: 100%;
}

td {
  padding: 10px;
}

a {
  color: royalblue;
}

/* Media query for tablets and smaller screens */
@media (max-width: 768px) {
  body {
    margin: 0 5%; /* Reduce margin to 5% for screens 768px or smaller */
  }
}

/* Media query for smartphones and very small screens */
@media (max-width: 480px) {
  body {
    margin: 0 2%; /* Further reduce margin to 2% for screens 480px or smaller */
  }
}

/* Text input box */
.input-box {
    width: 300px;
    padding: 5px;
    border: 2px solid #FF7F50; /* Coral border */
    border-radius: 5px;
    outline: none;
    color: #333;
}

.input-box:focus {
    border-color: #4169E1; /* Royal blue border on focus */
}

/* Button */
.button {
    padding: 5px 10px;
    margin-top: 10px;
    background-color: #4169E1; /* Royal blue background */
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #27408B; /* Darker royal blue on hover */
}

#floating {
   position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    padding: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for styling */
    z-index: 1000; /* Ensure it appears on top of other content */
    text-align: center; /* Center content inside the div */
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    padding: 10px;
    padding-left: 20px;
}