@charset "utf-8";

:root{
        --body-bg: #210c1b;
        --accent: #ae4f90;
        --white: #eeeeee;
        --off-white: #be6fc1;
}

html {
        position: relative;
        min-height: 100%;
}

body {
        background-color: var(--body-bg);
        font-family: monospace;
        font-size: 1.3em;
        display: flex;
        flex-direction: column;
        min-height:100vh;
        margin:0;
        justify-content: space-between;
        color: var(--white);
}

pre {
        color: var(--accent);
        white-space: pre;
        overflow:hidden;
}

.content {
        max-width: 70%;
        width: 100%;
        min-height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4rem;
        margin-bottom: 4rem;
        padding-left:1rem;
        padding-right:2rem;
        
}
.prompt::before {
        content: "~$ ";
        color: var(--accent);
}
p{
        margin:0;
}

a{
        font-weight:bold;
        color: var(--accent);
}

.man_header{
        display:flex;
        justify-content: space-between;
        flex-wrap:wrap;
}
.man_section{
        font-weight:bold;
        margin-top:1em;
}
.man_p{
        margin-left:2em;
}
#man_progress{
        font-size: 1em;
        background-color: var(--white);
        color: var(--body-bg);
}

@keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
@-webkit-keyframes blink {
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
.blink {
        animation: blink 1s step-start 0s infinite;
        -webkit-animation: blink 1.5s step-start 0s infinite;
}
footer{
        flex-shrink:0;
}
.buttons {
        margin-left: auto;
        margin-right: auto;
        margin-top: 4rem;
        margin-bottom: 1rem;
        padding-left:1rem;
        padding-right:1rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
.button{
        margin: 0.5em;
}