/* IzaacWeb V4 Terminal Bot */

body {display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      color: #66ff66;}

.bot-container {width: 80%;
                font-family: 'Courier New', Courier, monospace;
                max-width: 700px;
                padding: 20px;
                margin-top: 8px;
                margin-bottom: 8px;
                border: 2px outset #66ff66;
                border-radius: 10px;
                background-color: #2c2c3e55;
                box-shadow: 0 0 50px rgba(102, 255, 102, 0.5);
                text-align: center;
                opacity: 0;
                transform: translateY(-20px);
                animation: fadeInUp 1s forwards;}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bot-title {margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;}

.bot-message {margin: 10px 0;
              white-space: pre-wrap;
              word-wrap: break-word;
              text-align: left;}

.input-container {display: flex;
                  justify-content: center;
                  align-items: center;
                  gap: 10px;
                  flex-wrap: wrap;}

.bot-input {flex: 1;
            padding: 10px;
            border: 1px outset #66ff66;
            border-radius: 5px;
            background-color: #1a1a2d;
            box-shadow: 0 0 10px rgba(102, 255, 102, 0.5);
            transition: background-color 1s;
            color: #66ff66;}

.bot-input:hover {background-color: black; transition: background-color 1s;}

.bot-button {padding: 10px 20px;
             margin: 2px;
             border: 1px outset #66ff66;
             border-radius: 5px;
             background-color: #1a1a2d;
             color: #66ff66;
             cursor: pointer;
             box-shadow: 0 0 10px rgba(102, 255, 102, 0.5);
             transition: background-color 0.3s, transform 0.3s;}

.bot-button:hover {background-color: black; transform: scale(1.05);}

.button-container {display: flex;
                    gap: 10px;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;}