@font-face {
    font-family: "SpaceMono";
    src: url("/static/fonts/SpaceMono-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --background-color: #1E1E2E; /* dark blue-grey */
    --text-color: #CDD6F4; /* light pastel blue */
    --accent-color: #F5C2E7; /* light pastel pink */
    --header-color: #89B4FA; /* soft blue */

    --peach: #f8bd96;
    --yellow: #fae3b0;
    --green: #94e2d5;
    --black: #161320
}

* {
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
    margin: 0;
    padding: 0;
    font-family: 'SpaceMono', monospace;
}

a {
    text-decoration: none;
    color: var(--yellow);
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Stack direct children (sections) vertically */
    align-items: center; /* Center sections horizontally */
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'SpaceMono', monospace;
    text-align: center;
}


main{
    flex: 1;
    position: relative;
}

.console-container {
    margin-top: 10vh;  /* prompt field starts 10 from the top */
    font-size: 2.5vw;
    border: var(--text-color) 1px;
    border-spacing: 2vw;
    border-style: solid;
    padding: 1.5vw;
}

#console-input {
    font-family: 'SpaceMono', monospace;
    font-size: 2.5vw;
    background: var(--background-color);
    border: none;
    caret-color: var(--peach);
    color: var(--text-color);
    outline: none; /* Remove the default focus outline */
    background: transparent;
}


#console-input:hover {
    border: none;
}

#console-input:focus {
    border: none;
}

.console-prompt {
    color: var(--peach);
}

/* here the content section that renders md  */

#output{
    margin-top: 2vh;
    font-size: 1vw;
    text-align: left;
}

.aligned-text {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.aligned-text span {
    flex: 1;
}

.aligned-text .left {
    text-align: left;
}
.aligned-text .center {
    text-align: center;
}
.aligned-text .right {
    text-align: right;
}

.info {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 10px 20px; /* Row and column spacing */
    margin-left: 20px;
    /* margin: 20px; */
    /* line-height: 1.6; */
}
.label {
    /* font-weight: bold; */
    text-align: left;
}
.value {
    text-align: left;
}

/*
this is the animation for typing ..

#tstdiv {
    width: 30ch;
    animation: typing 2s steps(25), blink .5s step-end infinite alternate-reverse;
    white-space: nowrap;
    overflow: hidden;
    border-right: 10px solid #f2d5cf;

}



/* animation */
/*
@keyframes fade {
    0% { opacity: 0}
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes typing {
    0% { width: 0; }
    100% { width: 30ch; }
}

@keyframes blink {
    50% { border-color: transparent;}
}

/* dynamic resizing */
/*
@media (min-width:600px) {
    body {
        font-size: 1.25rem;
    }
}
*/