body {
    font-family: Verdana, Geneva, sans-serif;
    background-image: url(./utils/cells.jpg);
    background-size: 160px;
    padding: 3.2rem 4.5rem;
}

main {
    min-height: calc(100vh - 200px); /* 100vh minus footer height */
}

footer,
h1 {
    font-style: italic;
    font-family: "Courier New", Courier, monospace;
}

section.logger{
    margin: 2rem 0 2rem 0;
    /*padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(130, 198, 220, 0.3);*/
}

textarea {
    height: 240px;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    background-color: #e4e6e5;
    border: solid 2px #81788e;
}

output{
    outline: none;
}

select {
    padding: 0.57rem;
    /*background: #ebe1cc /* #f4f0ed #f5f4fc */;
    background-color: rgba(237, 199, 137, 0.3); /* #edc789 with 30% opacity */
    appearance: none;
    font-size: 1rem;
    color: black;
    border-radius: 0.2rem;
    border: 2px solid #81788e; /* #aca3eb /* #9084e5 */;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2381788e' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}

option {
    word-wrap: normal !important;
    white-space: normal;
}

button {
    appearance: none;
    vertical-align: middle;
    width: fit-content;
    padding: 0px 6px;
    text-align: center;
    display: flex;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    color: black;

    font-size: 1.61rem;
    font-weight: normal;

    line-height: 2.2rem;
    text-decoration: none;
    border-radius: 0.2rem;
    outline: none;
    border: 2px solid #81788e; /* #aca3eb/* #9084e5 */
    /* background-color: #ebe1cc /*#d0cbf4*/;
    background-color: rgba(237, 199, 137, 0.3);
    cursor: pointer;
    user-select: none;
}

h5 {
    margin: 0;
}

aside{
    background-color: rgba(237, 234, 180, 0.3); /* #edeab4 with 30% opacity */
    border: 4px solid #ecf096;
    border-radius: 0.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    margin: 2rem 0 2rem 0;
    padding: 0.78rem;
}

media-menu {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem
}

media-menu select {
    width: min(100%, 30rem);
}

media-menu button {
    font-size: 1rem;
    font-style: italic;
}

media-element {
    display: inline-grid;
    grid-template-columns: auto;
    grid-template-areas:
        "video"
        "audio"
        "controls";
    grid-row-gap: 0.61rem;
    padding: 1rem;
    /* background-color: #e6e6e3;  #e2dff7 #cfdbdb;*/
    background-color: rgba(214, 211, 213, 0.3); /* #d6d3d5 with 30% opacity */    vertical-align: top;
    border: 2px solid #81788e; /*#aca3eb;*/
    border-radius: 0.2rem;
    max-width: 100vw;
    box-sizing: border-box;
}
media-element div:first-child {
    grid-area: video;
    display: grid;
    grid-row-gap: 0.61rem;
    grid-template-columns: 1.5rem 4rem 1.5rem 4rem 1.5rem 1fr 2.5rem 2.5rem 2.5rem;
    align-items: center;
    align-content: space-evenly;
    justify-content: center;
    justify-items: start;
}
media-element div:first-child h5,
media-element div:nth-child(2) h5 {
    grid-column: 1/9;
    font-size: 1rem;
}
media-element div:first-child output:first-of-type {
    grid-column: 1 / 5;
}
media-element div:first-child output:nth-of-type(2) {
    grid-column: 5 / 10;
    justify-self: end;
}
media-element div:first-child h5,
media-element div:first-child output{
    padding-left: 0.61rem;
}
media-element div:first-child input,
media-element div:first-child label {
    margin-left: 0.61rem;
}
media-element div:first-child select {
    grid-column: 1/7;
    width: 100%;
    font-size: 0.78rem;
}

media-element div:first-child button,
media-element div:first-child input,
media-element div:first-child label,
media-element div:nth-child(2) button {
    grid-column: span 1;
}
media-element div:first-child output,
media-element div:first-child label {
    font-size: 0.79rem;
}
media-element div:first-child video,
media-element div:first-child canvas {
    grid-column: 1/10;
}

media-element button.destroy {
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
    place-self: start end;
    margin-top: -0.51rem;
    margin-right: -1rem;
    color: #81788e; /*#aca3eb;*/
}
media-element div:first-child button.destroy:hover {
    color: black;
}


media-element div:nth-child(2) {
    grid-area: audio;
    display: grid;
    grid-template-columns: 1fr 2.5rem 2.5rem 2.5rem;
}

media-element div:nth-child(3) {
    grid-area: controls;
}

media-element meter {
    width: 100%;
}

media-element button {
    width: 2.5rem;
    appearance: none;
    border: solid 1px #000;
}
media-element select:not(fieldset *),
media-element button {
    border: solid 1px mediumslateblue;
    border-radius: 0;
    height: 2.3rem;
}
media-element select:not(details *) {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}
media-element div:first-child button {
    border-left: none;
}
media-element div:first-child button:last-of-type {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}


/* hack for iPhone video stop streaming if not in view */
media-element video {
    width: 1px;
    height: 1px;
}

media-element canvas.webGLCanvas,
media-element canvas.outCanvas {
    display: none;
}

media-element[showwebgl] canvas.webGLCanvas,
media-element[showoutcanvas] canvas.outCanvas {
    display: block;
}

media-element div {
    align-items: center;
}


/* Audio element styling */
media-element div:nth-child(2) {
    grid-area: audio;
    display: grid;
    grid-template-columns: auto 1fr 2.5rem 2.5rem;
    grid-template-rows: auto auto;
    grid-column-gap: 0.5rem;
    align-items: center;
    position: relative;
}

media-element div:first-child:not(empty) ~ div:nth-child(2) h5, div:nth-child(2) button.destroy {
  display: none;
}

media-element div:nth-child(2) button.destroy {
    margin-top: -1.21rem;
    margin-right: -1.2rem;
}

summary button.destroy {
    margin-top: -1.21rem;
    margin-right: -1.8rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ccc;
}

/* Position h5 and destroy button on first row */
media-element div:nth-child(2) h5 {
    grid-column: 1 / 4;
    grid-row: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

media-element div:nth-child(2) meter {
    grid-column: 1 / 3;
    grid-row: 2;
    width: 100%;
}
media-element div:nth-child(2) button.open-controls,
media-element #toggle-audio {
    grid-row: 2;
    background: transparent;
    border: none;
    font-size: 2rem;
}
media-element #toggle-audio {
    grid-column: 3;
    /* Default state - audio on */
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 24px 24px;
}
#toggle-audio[data-muted="true"] {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/></svg>");
}
media-element div:nth-child(2) button.open-controls {
    grid-column: 4;
}

media-controls {
    display: block;
    padding: 0.62rem;
    background-color: #f4f0ed;
    /* background: #f5f4fc; */
    /* #f4f4f4;  #afb9c8; */
    border: 2px solid #ccc;
    border-radius: 5px;
}

details select {
    padding: 0.33rem;
    width: 100%;
    border: solid 1px #ccc;
    background-color: #fff;
}

summary {
    padding: 1rem;
}
summary h5 {
    display: inline-grid;
    width: calc(100% - 1rem);
    grid-template-columns: 1fr 1rem;
}

media-controls form {
    column-count: 3;
    column-gap: 0.3rem;
}

media-controls form fieldset {
    break-inside: avoid;
    page-break-inside: avoid;
}

media-controls output {
    white-space: pre;
    font-family: monospace;
}

media-controls output[contenteditable] {
    background-color: #fff;
}

/* Hyperlink styling */
a {
    color: #4a6572; /* Darker version of #becdd4 for good contrast */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #2d3e47; /* Even darker on hover */
    text-decoration: underline;
}

a:visited {
    color: #6b5b95; /* Purple-gray that complements the color scheme */
}

a:visited:hover {
    color: #564a7a; /* Darker purple on hover */
    text-decoration: underline;
}

a:focus {
    outline: 2px solid #81788e; /* Uses existing border color */
    outline-offset: 2px;
    border-radius: 2px;
}

/* Special styling for links in specific contexts */
main a {
    color: #3a5a6b; /* Slightly different shade for main content */
    font-weight: 500;
}

main a:hover {
    color: #1f3640;
    background-color: rgba(190, 205, 212, 0.2); /* Very light background on hover */
    padding: 1px 3px;
    border-radius: 3px;
}

/* Keep existing footer link styling but enhance it */
footer a {
    color: #fff;
}

@media (max-width: 768px) {
    body{
        padding: 3rem 0;
    }
    media-element {
        padding: 0;
        padding-top: 6px;
    }

    media-element div:first-child button.destroy {
        margin-top: 0;
        margin-right: 0;
    }

    media-controls form {
        padding: 5px;
        column-count: 1;
    }

  media-element div:first-child {
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, auto));
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  media-element div:first-child select {
    width: 100%;
    max-width: 100vw;
  }

  media-controls {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  media-controls output {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }
}

@media (min-width: 768px) and (max-width: 1800px) {
    media-controls form {
        padding: 5px;
        column-count: 2;
    }
}

video,
canvas {
    display: block;
    border: 1px solid mediumslateblue;
    position: relative;
}

video.keep-on-screen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    border: none;
}

footer {
    /*background: rgba(127, 105, 150, 0.3);*/
    border-top: solid 2px #81788e;
    color: #81788e;
    font-weight: bold;
    text-align: center;
}