.nav {
    background-color: rgb(0, 0, 92); 
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
  }

a {
     color: #f2f2f2;
     text-decoration:none;
}
  .nav li {
    display: inline-block;
    font-family: 'Cambria', 'Cochin', 'Georgia', 'Times', 'Times New Roman', sans-serif;
    font-size: 200%;
    padding: 2%;
  }
section {
    padding-left: 5%;
    padding-right: 30%;
    padding-bottom: 5%;
}

h1 {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
h2 {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
h3 {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
h4 {
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
p {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.services-h2 {
  margin-bottom: 5%;
}

#chat-window {
  width: 80%;
  height: calc(100vh - 30vh);
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: scroll;
}

.input-flex {
  width: 100%;
  height: 40%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: left;
  align-items: center;
}

#user-input, textarea {
  max-width: 80%;  
  max-height: 20%;
  border: 1px;
  border-radius: 10px;
  padding: 2%;
  /*background-color: darkgray;*/
  margin: 10px;
  box-sizing: border-box;
  flex-grow: 1;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1% 0;  
    width: 100%; /*Ensure footer spans the entire width */
    position: fixed; 
    bottom: 0; 
}

:root  {
  --image-width: 100px;
  --image-height: 100px;
}

.banner {
  display: flex;
  flex-direction: row;
  position: relative;
  overflow-x: hidden;
  background-color: #0000007e; 
  align-items: center;
  margin-bottom: 20%;
}

@media (max-width: 768px) {
  .banner {
    margin-bottom: 20%; /* applies 20% margin for mobile screens */
  }
}

@media (min-width: 769px) {
  .banner {
    margin-bottom: 10%; /* applies 10% margin for desktop browsers */
  }
}

.banner img[src='static/imgs/alpinelinux-logo.svg'] {
  width: var(--image-width);
  height: 85px;
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='static/imgs/docker-mark-blue.svg'] {
  width: var(--image-width);
  height: var(--image-height);
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='static/imgs/galaxy-project-logo.svg'] {
  width: var(--image-width);
  height: var(--image-height);
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='static/imgs/reanimatorlogo.svg'] {
  width: var(--image-width);
  height: var(--image-height);
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='static/imgs/Ubuntu-logo-2022.svg'] {
  width: var(--image-width);
  height: var(--image-height);
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='static/imgs/rydm-ai.svg'] {
  width: var(--image-width);
  height: var(--image-height);
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}
.banner img[src='https://d0.awsstatic.com/logos/powered-by-aws.png'] {
  width: 80px;
  height: 80px;
  padding-left: 12%;
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% { transform: translateX(1920px); }
  100% { transform: translateX(-2300px); }
}

@media only screen and (max-width: 768px) { 
  @keyframes scroll-left {
    0% { transform: translateX(800px); } 
    100% { transform: translateX(-1000px); }
  }
}

.blue-link {
  text-decoration: none;
  color: #0000FF;
}