body {
    font-family: "Fira Mono";
    font-size: medium;
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    line-height: 1.2em;
    align-items: center;
    height: 100vh;
    animation: gradientAnimation 15s ease infinite;
    background-size: 400% 400%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;

}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.cursor {
    display: inline-block;
    width: 8px; /* Increase cursor width */
    height: 1em;
    background: #fff; /* Cursor color */
    /* position: absolute; */
    /* animation: blink-caret 0.75s step-end infinite; */
}

.blink {
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink-caret {
    from, to { background: transparent; }
    50% { background: #fff; }
}

.terminal {
    background-color: #2e3436;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    height: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    color: white;
    min-height: 80%;
    opacity: 0.9;
    /* line-height: 2em; */
}

.about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2e3436;
    padding: 10px;
    font-size: 1em;
    border-bottom: 2px solid #3e3e3e;
    margin-bottom: 20px;
}

.nav-icons {
    padding-left: 10px;
    color: #f0c674;
}


.nav-path {
    padding-right: 10px;
    color: #f439f1;
}

.header p {
    margin: 0;
}

.user {
    color: #90e430;
}

.main {
    color: #f1f159;
}

.symbol {
    color:red;
}

.command {
    color: #81a2be;
}
.close{
    cursor: pointer;
}
.minmax{
    cursor: pointer;
}
.minimize{
    cursor: pointer;
}
.body-text {
    margin-top: 10px;
    line-height: 1.7em;
}

.userinput {
    font-family: "Fira Mono", monospace; 
    border: none;
    font-size: medium;
    background-color: transparent;
    color: #81a2be;
    outline: none;
    width: 50%; /* Make the input box take up the full width of its container */
  overflow-wrap: break-word; /* Break long words onto the next line */

}

.userinput::placeholder {
    color: #c5c8c6;
    opacity: 0.6;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .about {
        font-size: 0.9em;
        flex-direction: column;
        align-items: flex-start;
    }

    .terminal {
        padding: 15px;
    }

    .userinput {
        width: 100%;
    }
}



@media (max-width: 480px) {
    body {
        font-family: "Fira Mono";
        font-size: medium;
        font-weight: 400;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        line-height: 1.2em;
        align-items: center;
        height: 100vh;
        animation: gradientAnimation 15s ease infinite;
        color: #c5c8c6;
        background-size: 400% 400%;
        background: linear-gradient(to bottom right, rgb(155, 232, 228), yellow);
    }
    
    @keyframes gradientAnimation {
        0% {
            background: linear-gradient(to bottom right, rgb(155, 232, 228), yellow);
        }
        25% {
            background: linear-gradient(to top left, yellow, rgb(155, 232, 228));
        }
        50% {
            background: linear-gradient(to bottom, rgb(155, 232, 228), yellow);
        }
        75% {
            background: linear-gradient(to right, rgb(155, 232, 228), yellow);
        }
        100% {
            background: linear-gradient(to bottom right, rgb(155, 232, 228), yellow);
        }
    }
    .close{
        cursor: pointer;
    }
    
    .terminal {
        background-color: #2e3436;
        border-radius: 8px;
        padding: 20px;
        width: 90%;
        max-width: 900px;
        height: auto;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
        color: #c5c8c6;
        min-height: 80%;
    }
    .about {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #2e3436;
        padding: 10px;
        font-size: 1em;
        border-bottom: 2px solid #3e3e3e;
        margin-bottom: 20px;
    }
    
    .nav-icons {
        padding-left: 10px;
        color: #f0c674;
    }
    
    .nav-path {
        padding-right: 10px;
        color: #81a2be;
    }
    
    .header p {
        margin: 0;
    }
    
    .user {
        color: #90e430;
    }
    
    .main {
        color: #f1f159;
    }
    
    .symbol {
        color: #f0c674;
    }
    
    .command {
        color: #81a2be;
    }
    
    .body-text {
        margin-top: 10px;
        line-height: 1.5;
    }
    
    .userinput {
        font-family: "Fira Mono", monospace; 
        border: none;
        font-size: medium;
        background-color: transparent;
        color: #81a2be;
        outline: none;
        width: 50%;
    }
    
    .userinput::placeholder {
        color: #c5c8c6;
        opacity: 0.6;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
        .about {
            font-size: 0.9em;
            flex-direction: column;
            align-items: flex-start;
        }
    
        .terminal {
            padding: 15px;
        }
    
        .userinput {
            width: 100%;
        }
    }
    
    @media (max-width: 480px) {
        body {
            font-size: small; /* Adjust font size for smaller screens */
        }
    
        .terminal {
            padding: 10px;
            width: 95%;
            max-width: 100%;
        }
    
        .about {
            font-size: 0.8em;
        }
    
        .header p,
        .body-text p {
            font-size: 0.9em; /* Adjust font size for better readability */
        }
    
        .userinput {
            font-size: 0.9em;
        }
    }
    

    .terminal {
        padding: 10px;
        width: 95%;
        max-width: 100%;
    }
    .about {
        font-size: 0.8em;
    }

    .header p,
    .body-text p {
        font-size: 0.9em; /* Adjust font size for better readability */
    }

    .userinput {
        font-size: 0.9em;
    }
}

/* Terminal initial state, hidden at the bottom with no opacity */
/* Terminal initial state, hidden at the bottom with no opacity */
/* .terminal {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;

    transition: opacity 1s ease-in-out, background-color 600ms ease-in-out;  
  }
  
  /* Terminal state after animation */
  /* .terminal.visible {
    opacity: 1; 
  } */