@import '../../node_modules/bootstrap-icons/font/bootstrap-icons.css';
@import 'style.css';
@import '../../node_modules/tiny-slider/src/tiny-slider.scss';
@import './tiny-slider.css';
@import 'color.css';

@import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
.custom-border {
    border-left: 7px solid #EC1D25;
    border-radius: 5px;
}

.navbar-brand-item {
    height: 20px;
}


.image-ratio-container {
    width: 100%;
    /* Assure que le conteneur prend la pleine largeur de son parent */
    padding-top: 62.5%;
    /* 100 / 1.6 = 62.5% pour maintenir un ratio de 1:1.6 */
    position: relative;
    /* Important pour positionner absolument l'image à l'intérieur */
}

.image-ratio-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Assure que l'image couvre la zone sans se déformer, coupant les parties excédentaires si nécessaire */
}


/* Terminal Css */


.terminal {
    background: #fff;
    color: #000;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    min-height: 250px;
    max-width: 600px;
    /* Vous pouvez ajuster cette largeur comme vous le souhaitez */
    margin: 20px auto;
    font-family: 'Courier New', Courier, monospace;
}

.terminal-header {
    display: flex;
    padding: 5px;
}

.terminal-button {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin-right: 5px;
}

.close {
    background: #ff605c;
}

.minimize {
    background: #ffbd44;
}

.fullscreen {
    background: #00ca56;
}

.terminal-body {
    white-space: pre;
    overflow-y: auto;
    max-height: 300px;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .terminal {
        max-width: 95%;
        margin: 20px auto;
    }
}