:root{
    /* Colors */
    --dark-main: #181818;
    --dark-secondary: #222222;
    --dark-hover: #1D1D1D;
    --dark-selected: #3E3E3E;
    --light-main: #E2E2E2;
    --light-secondary: #cfcfcf;
    --light-third: #A0A0A0;

    --light-gray-main: #B0B0B0;
    --light-gray-secondary: #4F4F4F;

    --blue-main: #547de5;
    --blue-secondary: #305fd5;

    /* Styling Variables */
    --max-width: 720px;
    --min-padding: 16px;
    --padding-width: max(16px, calc((100% - var(--max-width)) / 2));
}

body {
    font-family: monospace;
    color: var(--light-main);

    background: var(--dark-main);

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    min-height: 100vh;

    padding-bottom: 32px;
    padding-top: 32px;
    padding-left: var(--padding-width);
    padding-right: var(--padding-width);
}
main {
    display: flex;
    flex-direction: column;
    flex:1;
}
p {
    color: var(--light-secondary);
    font-size: 13px;
}
p > span:not([class]),output, .focus {
    opacity:50%;
}

.dim {
    color: var(--light-gray-main) !important;
}
p1 {
    font-size: 9px;
}
H1,H2,H3,H4,H5,H6 {
    color: var(--light-main);
}
ul {
  list-style: none;
  padding-left: 8px;
}
ul > li::before {
    content: "* ";
}
form {
    margin-bottom: 0;
}
details {
    border: solid 1px var(--light-gray-secondary);
    padding: 8px;
    margin-bottom: 8px;
}
summary {
    cursor: pointer;
}
hr {
    border-color: var(--light-gray-secondary);
    border-style: solid;
    border-width: 1px;
    border-top: none;
}
.red {
    color: rgb(175, 46, 46);
    opacity: 100%;
}
.centered {
	margin: auto;
  	justify-content: center;
}
.row {
    display: flex;
    flex-direction: row;
}

.full-width{
    min-width: 100%;
    max-width: 100%;
}
output > textarea {
    min-height: 64px;;
}
summary::marker {
    content: '+ ';
}
details[open] summary::marker {
    content: '- ';
}
/* Anchor Elements*/
a {
    color: var(--blue-main);
    text-decoration-line: none;
    opacity: 100% !important;
}
a:hover{
    color: var(--blue-secondary);
    text-decoration-line: underline;
}
a:active{}
a:visited{}
a:visited:hover{}
a:visited:active{}
a:not([href]){
    /*color: rgb(175, 46, 46);*/
    cursor: not-allowed;
}
a:not([href])::after{
    content: '[dead-link]';
    font-size: 10px;
    vertical-align: super;
    color: rgb(175, 46, 46);
}
a.lowkey {
    color: var(--light-main);
    text-decoration: underline;
}
a.lowkey:hover, a.lowkey:active, a.lowkey:hover:active {
    font-weight: bold;
}
/* Footer Styling! */
    footer {
        margin-top: auto;
    }
    /* Footer Info */
    footer > .footer-info {
        opacity: 50%;
    }
	/* ASCII Signature */
	code > pre {
        font-size: 12px;
    }
    code {
        opacity: 50%;
    }
    footer > .ASCII{
		display:flex;
      	justify-content:center;
    }    
    @media (max-width: 767px) {
        code > pre{
          font-size: 9px;
        }
      }

      /* Styling specifical to unique page. Move to individual CSS file */
      .message-break {
        gap: 8px;
      }
      .message-break p1 {
        text-wrap: nowrap;
        margin-top: 4px;
        margin-bottom: 4px;
      }
      .message-break hr {
        margin: 0;
        width: 100%;
        align-self: center;
      }
      .input-message{
        min-height: 96px;
      }
      .single-message{
        min-height: 128px;
      }
      .multi-message{
        min-height: 64px;
      }
      @media (max-width: 767px) {
        .input-message{
            min-height: 192px;
        }
        .single-message {
            min-height: 192px;
        }
        .multi-message {
            min-height: 96px;
        }
      }

    /* Styling specifically for Media-progress */
    .media-progress {
        border: solid 1px var(--light-gray-secondary);

        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px;
        margin-top: 16px;
    }
    .media-progress * {
        padding: 0;
        margin: 0;
    }
    .media-header{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .media-information {
        display: flex;
        flex-direction: row;
        gap:4px;
        justify-content: space-between;
    }
    .media-note {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 75%;
    }
    .percentage::before{
        content: "[" attr(data-display) "]";
    }
    .percentage{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);
        
        background:var(--dark-main);
        padding-left: 4px;
        padding-right: 4px;
    }
    .loaded, .unloaded{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
    }
    .loading-bar{
        display: flex;
        flex-direction: row;
        overflow: hidden;
        position: relative;
    }
    .loading-bar-div {
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }