/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: "JetBrains Mono Nerd Font";
    src: url(JetBrainsMonoNerdFont.ttf);
}


body {
  background-color: var(--base);
  color: var(--text);
  font-family: "JetBrains Mono Nerd Font", monospace;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

        .terminal {
            width: 80%;
            max-width: 700px;
            background-color: var(--mantle);
            border: 3px solid var(--mauve);
            border-radius: 8px;
            box-shadow: 0 0px 10px var(--mauve);
            overflow: hidden;
        }

        .terminal-bar {
            background-color: var(--crust);
            padding: 10px;
            display: flex;
            align-items: center;
        }

        .traffic-lights {
            display: flex;
        }

        .light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .light.close {
            background-color: #ff5f56;
        }

        .light.minimize {
            background-color: #ffbd2e;
        }

        .light.maximize {
            background-color: #27c93f;
        }

        .title {
            color: var(--text);
            font-weight: bold;
            flex-grow: 1;
            text-align: center;
        }

        .terminal-body {
            padding: 20px;
        }

        .prompt-btn {
            display: flex;
        }

        .btn1 {
            padding: 0.25rem 0.8rem 0.25rem 1.5rem;
            color: #1e1e2e;
            border-radius: 1rem;
            background-color: var(--text);
            z-index: 1;
        }

        .btn2 {
            padding: 0.25rem 0.8rem 0.25rem 1.5rem;
            color: #1e1e2e;
            border-radius: 0rem 1rem 1rem 0rem;
            margin-left: -0.8rem;
            z-index: 0;
            background-color: var(--mauve)
        }

        .prompt-line {
            display: flex;
            flex-direction: column;
        }

        .prompt-div {
            margin: 0.5rem 0rem 0.5rem 0rem;
        }

        .prompt-symbol {
            color: var(--green);
            margin-right: 10px;
        }

        .prompt-path {
            color: var(--mauve);
        }

        .prompt-cursor {
            width: 8px;
            height: 1.2em;
            display: inline-block;
            background-color: var(--mauve);
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {

            from,
            to {
                background-color: transparent
            }

            50% {
                background-color: var(--mauve);
            }
        }

        form {
            margin-top: 15px;
        }

        input[type="text"] {
            background-color: var(--surface0);
            color: var(--text);
            border: 1px solid var(--surface2);
            padding: 8px;
            border-radius: 4px;
            width: calc(100% - 20px);
        }

        input[type="submit"] {
            background-color: var(--mauve);
            color: var(--base);
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
            font-weight: bold;
        }

        .results {
            margin-top: 20px;
        }

        .result-item {
            margin-bottom: 5px;
        }

        .result-item .prime {
            color: var(--green);
        }

        .result-item .not-prime {
            color: var(--red);
        }