: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]) {
    opacity:50%;
}

H1,H2,H3,H4,H5,H6 {
    color: var(--light-main);
}

.centered {
	margin: auto;
  	justify-content: center;
}

/* Anchor Elements*/
a {
    color: var(--blue-main);
    text-decoration-line: none;
}
a:hover{
    color: var(--blue-secondary);
    text-decoration-line: underline;
}
a:active{}
a:visited{}
a:visited:hover{}
a:visited:active{}
a:not([href]){
    color: red;
    cursor: not-allowed;
}
/* Footer Styling! */
    footer {
        margin-top: auto;
    }
    /* Footer Info */
    footer > section {
        opacity: 50%;
    }
	/* ASCII Signature */
	code > pre {
        font-size: 12px;
    }
    footer > .ASCII{
		display:flex;
      	justify-content:center;
    }    
    @media (max-width: 767px) {
        code > pre{
          font-size: 9px;
        }
      }