body {
    background-image: linear-gradient(to bottom,#242424, #00013d);
    background-repeat: no-repeat;
    font-family:'Trebuchet MS', sans-serif ;
    margin: 0;
    padding: 20px;
    min-height:100vh;
}
/* Paragraph Styles */
.paragraph-container {
    margin: 0 auto;
    max-height: 400px;
}
.left-aligned-paragraph {
    text-align: left;
    width: 50%;
    float: left;
}
.right-aligned-paragraph {
    text-align: center;
    width: 50%;
    float: right;
}
.newline-centered{
    width: 100%;
    display:inline-block;
    border-top: 2px solid #242424;
    align-items: center;
}
/* Inner Box formatting for the text and items */
.outer-box {
    border: 2px transparent;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner-box {
    background-color: #645e8569;
    padding: 20px;
    border: 1px solid #505050;
    margin-top: 1px;
    width: 100%;
}
.button-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom:2px;
    border-bottom: 2px solid #242424;
}
.my-button {
    /* Box Model & Sizing */
  padding: 10px 12px; /* Adjusts width based on content, not fixed size */
  border: none; /* Removes the default border */
  border-radius: 5px; /* Adds rounded corners */
  cursor: pointer; /* Changes cursor to a hand on hover */
  outline: none; /* Removes the default focus outline (custom focus should be added for accessibility) */
  
  /* Color & Typography */
  background-color: transparent; /* Primary brand color (blue) */
  color: #c5c5c5; /* Text color */
  font-family: Arial, sans-serif; /* Ensures a readable font is used */
  font-size: 16px; /* Sets text size */
  font-weight: bold; /* Makes text stand out */
  
  /* Visual Effects */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds depth with a subtle shadow */
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Smooths state changes */
}
.my-button:hover {
    background-color: #242424; /* Darker blue on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.my-button:active {
    transform: translateY(2px); /* Moves button down slightly */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-image {
    width: 185px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    display: block;
    align-items: right;
}

/* Viewport for STLs */
.viewport-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px auto;
    border: 1px solid #505050;
}
.viewport-iframe {
    width: 100vw;
    height: 100vh;
    border: none;
}
.google-slides-container iframe {
    width: 70%;
    height: auto; /* Or set a fallback height if needed */
    aspect-ratio: 16 / 9; /* Set this to your slide's ratio (e.g., 4 / 3) */
    border: 0;
}

.model-view-css-fix{
    align-self:center;
  height: 400px;
  width:400px;  
}
model-viewer {
  width: 800px;
  height: 800px;
} 

p {
    font-size: 15px;
    line-height: 1.6;
    color: #c5c5c5;
}
h1 {
    font-size: 24px;
    color: #c5c5c5;
}
h2 {
    font-size: 20px;
    color: #c5c5c5;
}
h3 {
    font-size: 18px;
    color: #c5c5c5;
}
 table, th, td {
    border: 1px transparent antiquewhite; /* Adds borders to the table, headers, and data cells */
    border-collapse: collapse; /* Collapses the borders into a single line */
    padding: 8px; /* Adds space inside the cells */
    text-align: center; /* Aligns text to the center */
  }
  table {
    width: 30%; /* Sets the width of the table */
  }