/* styles.css */
:root {
    --color-black: #000;
    --color-cyan: #85d0d7;
    --color-dark-cyan: #1d5459;
    --color-green: green;
    --color-dark-green: #004d00;
    --color-grey: #2f3130;
    --color-light-grey: #3b3e3d;
    --color-red: #512222;
    --color-off-white: #767676;
    --color-white: #fff;
    --border: 1px solid var(--color-off-white);
    --border-radius: 5px
  }

html {
  color: var(--color-white);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0
}

body {
    color: var(--color-white);
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #333;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #282c34;
}

.footer {
    background-color: #282c34;
    padding: 10px 0;
    text-align: center;
}

.modal-header {
    background-color: #343a40;
    color: white;
}

.code-container {
    margin: 20px auto;
    max-width: 90%;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1em;
    white-space: pre;
    overflow: hidden;
}

.content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.content-inner {
    flex-grow: 1;
    background-color: #d5f1fc;
    padding: 16px;
}

.section {
    overflow: auto;

    /* position: absolute;
    bottom: 34px; */
    /* Fixed margin from the bottom of the page */
    width: 100%;
    /* opacity: 0; */
    /* transform: translateY(100%); */
    transition: opacity 0.5s ease, transform 0.5s ease;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #282c34;
    color: #e6e6fa;
    margin: 20px;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

#code-div {
    height: calc(75vh - 15rem);
    /* Adjust 4rem to match your header height */
}

/* Blinking cursor */
#code:after{
    content: "|";
    animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@-moz-keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}