body {
     --color-bg: #282828;
     --color-text: #e0e0e0;
     --color-text-subtle: #a29bfe;
 
     padding: 0;
     margin: 0;
     background: linear-gradient(to right, #2c3e50, #4b4b4b, #696969);
     width: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Arial', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-size: 16px;
     line-height: 1.5;
 }
 
 .container {
    display: grid;
    grid-template-columns: 1fr;
}
@media (max-width: 767px) {
    body {
        font-size: 12px;
    }

    [data-termynal] {
        margin: 5px 5px 0px 5px;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 12px;
    }

    [data-termynal] {
        margin: 5px 5px 0px 5px;
    }
}
 
 /**
  * termynal.js
  *
  * @author Ines Montani <ines@ines.io>
  * @version 0.0.1
  * @license MIT
  */
 
 :root {
     --color-bg: #252a33;
     --color-text: #eee;
     --color-text-subtle: #a2a2a2;
 }
 
 [data-termynal] {
     background: var(--color-bg);
     color: var(--color-text);
     font-size: 18px;
     font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
     border-radius: 4px;
     padding-top: 75px;
     padding-left: 35px;
     position: relative;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
 }
 
 [data-termynal]:before {
     content: '';
     position: absolute;
     top: 15px;
     left: 15px;
     display: inline-block;
     width: 15px;
     height: 15px;
     border-radius: 50%;
     /* A little hack to display the window buttons in one pseudo element. */
     background: #d9515d;
     -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
             box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
 }
 
 [data-ty] {
     display: block;
     line-height: 2;
 }
 
 [data-ty]:before {
     /* Set up defaults and ensure empty lines are displayed. */
     content: '';
     display: inline-block;
     vertical-align: middle;
 }
 
 [data-ty="input"]:before,
 [data-ty-prompt]:before {
     margin-right: 0.75em;
     color: var(--color-text-subtle);
 }
 
 [data-ty="input"]:before {
     content: '$';
 }
 
 [data-ty][data-ty-prompt]:before {
     content: attr(data-ty-prompt);
 }
 
 [data-ty-cursor]:after {
     content: attr(data-ty-cursor);
     font-family: monospace;
     margin-left: 0.5em;
     -webkit-animation: blink 1s infinite;
             animation: blink 1s infinite;
 }
 
 
 /* Cursor animation */
 
 @-webkit-keyframes blink {
     50% {
         opacity: 0;
     }
 }
 
 @keyframes blink {
     50% {
         opacity: 0;
     }
 }
 span[data-ty] {
     margin: 10px; /* Added margin */
 }
 span[data-ty] a {
     color: #e0e0e0; /* Matches --color-text */
     background-color: #34495e; /* Matches --color-text-subtle */
     padding: 10px 20px;
     border-radius: 5px;
     text-decoration: none;
     font-weight: bold;
     transition: background-color 0.3s, transform 0.3s;
 }
 
 span[data-ty] a:hover {
     background-color: #8e44ad; /* Darker shade for hover effect */
     transform: scale(1.05);
 }
 
 span[data-ty] a:active {
     background-color: #6b2d91; /* Even darker shade for active effect */
     transform: scale(0.95);
 }