@font-face {
    font-family: "BlenderPro";
    font-weight: 700;;
    src: url("/blog/fonts/BlenderPro-Bold.woff");
  }
  
  @font-face {
    font-family: "BlenderPro";
    font-weight: 400;;
    src: url("/blog/fonts/BlenderPro-Medium.woff");
  }

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline:none;
    color: rgb(240,240,240);

    font-family: "BlenderPro", sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background-color: #222325;
}

article {
    width: 100%;
    min-height: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    padding: 0 0.5rem;
    overflow-y: auto;
}

article::-webkit-scrollbar {
    width: 10px;
}

article::-webkit-scrollbar-track {
    background: #181818;
}

article::-webkit-scrollbar-thumb {
    background: #383838;
}

article::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.message {
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin: 0.25rem 0;
    max-width: 80%;
}

.message-ai {
    background-color: #1e90ff;
}

.message-user {
    background-color: #08cc88;
    margin-left: auto;
}

#end {
    min-height: 0.5rem;
}

.chat-textleiste {
    display: flex;
    justify-content: space-between;
}

.chat-textleiste input {
    display: inline-block;
    width: calc(100% - 1.5rem);
    background-color: rgb(20, 20, 20, 0.5);
    border: 1px solid rgba(20, 20, 20, 0.8);
    padding: 0.5rem 0.5rem;
    transition: 0.5s background-color;
}

.chat-textleiste input:hover,
.chat-textleiste input:focus {
    background-color: rgb(30, 30, 30, 0.8);
}

.chat-textleiste button {
    width: calc(2rem - 1px);
    background-color: rgb(20, 20, 20, 0.5);
    border: 1px solid rgba(20, 20, 20, 0.8);
    cursor: pointer;
    transition: 0.5s background-color;
}

.chat-textleiste button:hover {
    background-color: rgba(40, 40, 40, 0.8);
}