@font-face {
    font-family: "main_font";
    src: url("./MartianMono-StdRg.ttf");
}


body { 
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: 'main_font', sans-serif;
    padding: 0rem;
    colo: red;
}

input, textarea, button, select {
    width: 100%;
    margin-top: 0.1rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-family: 'main_font', sans-serif;
    line-height: 2rem;
    box-sizing: border-box;   /* Ensures padding/border count inside width */
    border: 1px solid #888;   /* Simple solid border */
    border-radius: 2px;

}

input[type='radio'] {
    accent-color: #000000;
    transform: scale(1.5);
}

select {
    margin-top: 0.5rem;
    /*margin-bottom: 0.2rem;*/
    background-color: white;
    padding: 0.2rem;
}

textarea {
    height: 10rem;    
    field-sizing: content;
}

img, embed {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    display: inline-block; /* removes inline spacing below images */
    border-radius: 5px;
    /*border: 1px solid #ccc;*/
}

embed {
    width: 100%;
}

embed.pdf-viewer {
    width: 100%;
    height: 80vh; /* fills 80% of viewport height */
    border: none;
}

.photo-block {
    margin-bottom: 1rem;
    padding: 1rem;
    /*background: #ccc;*/
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
}

#photo-list > .photo-block {
    /*border-bottom: 1px solid #ccc;*/
    /*padding: 8px 0;*/
}

#photo-list > .photo-block:last-child {
    /*border-bottom: none; /* optional, no line after the last item */*/
}

#photo-list {
    margin-bottom: 2rem;
}

.element-block {
    margin-bottom: 1rem;
    /*padding: 1rem;*/
    /*background: #ccc;*/
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr 1fr;*/
}

.element-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 1rem;
    text-decoration: none; /* remove underline */
    color: inherit;        /* inherit text color */
    margin-bottom: 0.5rem;
}

.element-card:hover {
    background-color: #f5f5f5;  /* light gray hover */
}

.element-card > div {
    display: flex;
    align-items: center;  /* vertically center content */
}


.status-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 1rem;
    /*text-decoration: none;*/
    color: inherit;
    margin-bottom: 0.5rem;
}

.status-form {
  display: flex;
  gap: 0.5em;       /* space between options */
  align-items: center;
}
.status-form label {
  margin: 0;        /* prevent vertical spacing */
  text-align: center;
}


a{
  color: inherit; /* use the same color as surrounding text */
  text-decoration: none; /* remove underline */
}

a:hover{
  text-decoration: underline; /* optional hover effect */
}

a:visited{
  color: inherit; /* use the same color as surrounding text */
  text-decoration: none; /* remove underline */
}

a:active{
  color: inherit; /* use the same color as surrounding text */
  text-decoration: none; /* remove underline */
}

h2 .icon {
  height: 1em;      /* same height as the font size of the h2 */
  vertical-align: middle;  /* aligns it nicely with the text */
  border-radius: 0px;
}

header h2, footer h2 {
  margin: 0;      /* remove default top/bottom margins */
  padding: 0;     /* not usually needed, but keeps things clean */
}

.block-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 1rem;
    text-decoration: none; /* remove underline */
    color: inherit;        /* inherit text color */
    margin-bottom: 0.5rem;
}

.block-one-two {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 1rem;
    text-decoration: none; /* remove underline */
    color: inherit;        /* inherit text color */
    margin-bottom: 0.5rem;
}

.formy {
    border: 1px solid #ccc;
    border-radius: 1rem;
    padding: 1rem;
}

.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}

.collapsible .arrow {
  transition: transform 0.3s ease;
  margin-right: 0.5em;
}

.collapsible-content {
  will-change: height;
  height: 0;           /* start collapsed */
  overflow: hidden;        /* hide content when collapsed */
  transition: height 0.3s ease;
  padding: 0 0;            /* start with no vertical padding */
}

.collapsible-content.open {
  max-height: 500px;       /* large enough for your content */
  padding: 1em 0;          /* optional padding when expanded */
}