body {
    background-color: black;
}

.art {
    display: flex;
    /* margin-bottom: 20px; */
    color : green;
    display: flex;
    align-items: center;
    justify-content: center;
}

#name {
    font-size: 20px;
}

pre {
    font-size: 10px;
}

.clone .active {
    margin-right: 0px;
}

.clone {
    margin-right: 0px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#prefix {
    flex-grow: 0;
}

.in {
    /* white-space: nowrap; */
    flex-grow: 1;    
}

hr {
    background-color: green;
    padding-bottom: 3px;
    border: none;
    margin-bottom: 10px;
    border-bottom: none;
}

.clone {
    height: 20%;
    align-items: center;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.clone.remove-animation{
    animation: remove-clone 1s ease forwards;
    transform-origin: top center;
}

.clone.active {
    opacity: 1;
    transform: translateX(0);
}

#terminal *{
    font-family: "Kode Mono", monospace;
    align-content: center;
    display: flex;
    color: green;
    margin-right: 20px;
}

#input-line {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    display: flex;
    flex-basis: auto;
}

#input-line textarea {
    width: 60%;
    margin-right: 0px;
}

#prefix {
    color: green;
    font-weight: 700;
}

#projects{
    color: green;
    font-weight: 700;
}

#userInput, .in {
    font-family: "Kode Mono", monospace;
    font-weight: 700;
    resize: none;
    caret-color: green; 
    caret-shape: block;
    animation: blink-caret 1s infinite; 
    overflow: hidden;
    border: none;
    background: none;
}

#userInput:focus {
    resize: none;
    outline: none;
    overflow: hidden;
    border: none;
    background: none;
}

.in {
    margin-right: 0px;
    display: flex;
    font-size: 12px;
}

.error {
    color: red;
}

.fadeOut {
    transform: translateY(50px);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.3px ease;
}

.fab {
    display: none;
    opacity: 0;
}

img {
    height: 25px;
}

@keyframes blink-caret {
    from, to {
      border-color: transparent; /* Make the cursor invisible */
    }
    50% {
      border-color: green; /* Set the cursor color during the blink */
    }
  }

  @keyframes remove-clone {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(-100px);
    }
  }

  @media screen and (max-width: 1170px) {
    .art {
        flex-direction: column;
        justify-content: center;
    }
  }

  @media screen and (max-width: 1030px) {
    .art, #name {
        font-size: 10px;
        flex-direction: column;
        justify-content: center;
    }
    /* .in {
        font-size: 10px;
    } */
  }

  @media screen and (max-width: 600px) {
    .art, #name {
        font-size: 10px;
        flex-direction: column;
        justify-content: center;
    }
    .item-skill {
        flex-wrap: wrap;
    }
    .clone, #input-line {
        font-size: 10px;
    }
  }

  @media screen and (max-width: 370px) {
    #input-line {
        font-size: 10px;
    }
    textarea::placeholder {
        font-size: 10px;
    }
    .deets {
        white-space: normal;
    }
  }

  @media screen and (max-width: 880px) {
    .deets {
        white-space: normal;
    }
    /* img {
        height: 15px;
    } */
  }

  @media screen and (max-width: 745px) {
    .deets {
        white-space: normal;
    }
  }

  @media screen and (max-width: 606px) {
    .deets {
        white-space: normal;
    }
  }

  @media screen and (max-width: 428px) {
.deets {
        white-space: normal;
    } /*
    img {
        height: 5px;
    } */
  }

  @media screen and (max-width: 332px) {
 .deets {
        white-space: normal;
    } /*
    img {
        height: 5px;
    } */
  }