*{box-sizing: border-box;}
  
   body {
      display:flex;
     background-color:#ece5dd;
}
header{top:0; flex:1;
  position:fixed;
  width:100%; 
  padding: 8px 0;
  align-items:center;
  background: #183;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  left:0; z-index:1;
}
  
  
 header div img{width:50px; 
   border-radius:50%;
    margin:0 10px 0 30px;
}
  
header div{color:white;
  display:flex; font-size:18px;
  align-items:center;
font-weight:bold;}
  
  .online{font-size:10px;
    padding:0;
    margin-left:9.3em; color:#1f0;
    margin-top:-15px;
}
  
header  div a i{ margin: 2em 0 0 15em; top: 0;position: fixed; color:white;}
a{text-decoration:none;color:#183;}
#back{color:#183;} 
  .bars {
  display: block;
  position: absolute;
  right:1em;
  top: 2.1em;}

  
.bar1, .bar2, .bar3{
  width: 18px;
  height: 2px;
  background-color:#ffffff;
  margin: 4px 0 0 0;
  transition: 0.6s;
}
.riba .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.riba .bar2 {opacity: 0;}

.riba .bar3 {
  transform: translate(0, -3px) rotate(45deg);
}
  
  

  #chat-container{
      max-width: 360vw;
      margin: 65px 0 0 0;
      font-family: Arial, sans-serif;
     
      border-radius: 15px;
      padding:13px 0 15px 0;
      overflow-y:auto;
      flex-grow:1;
      max-height:80vh;
       display:flex;
      flex-direction:column;
      align-items:flex-end;
}



  #chat-messages{display:flex;
      flex-direction:column;
      align-self:flex-start;}

   .user-message{padding:8px 70px 8px 8px;
      align-self:flex-end;
      background-color: #3c3;
     border-radius:10px 10px 0 10px; 
     margin:0 0 5px 40px;
 }

    .bot-message{                                                             font-family: 'Lucida ndwriting Std', sans-serif;
      background-color:#f2f2f2;
      align-self: flex-start;
      border-radius: 10px 10px 10px 0;
      padding: 8px 70px 8px 8px;
      margin:0 40px 5px 0;
      }
  

    /* User options */

    @keyframes  buttonAnimation{
  0% { opacity: 0; transform: translateX(200px) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
  
  
#button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin:0 0 0 0;
  padding:10px;
}


button {
  opacity:0;
  transform: translateY(0px) rotate(0deg);
  animation: buttonAnimation 1s forwards;
  
      color:#183;
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      margin: 5px 0px 5px 0;
      padding: 8px;
      background-color:#f2f2f2;
      border: none;
      border-radius:15px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;  

}


button:nth-child(1) {
  animation-delay: 0.0s;
}
button:nth-child(2) {
  animation-delay: 0.6s;
}
button:nth-child(3) {
  animation-delay: 1.2s;}
  
button:nth-child(4){
  animation-delay:1.8s;}
  
button:nth-child(5) {
  animation-delay: 2.4s;}
  
button:nth-child(6){
  animation-delay:3s;}
  
button:nth-child(7){
  animation-delay:3.6s;}

  button:nth-child(8) {
  animation-delay: 4.2s;
}
button:nth-child(9) {
  animation-delay: 4.8s;
}
button:nth-child(10) {
  animation-delay: 5.4s;}
  
button:nth-child(11){
  animation-delay:6.0s;}
  
button:nth-child(12) {
  animation-delay: 6.6s;}
  
button:nth-child(13){
  animation-delay:7.2s;}
  
button:nth-child(14){
  animation-delay:7.8s;}


  
  
  .resources{display:none;
    margin: 0 0 0 0;
  }
  
      button:hover{
      color: purple;
      transform: scale(1.05);}
  

footer{background-color:#f2f2f2;
    bottom:0px;
    padding:5px 3px;
    width:100%;
    position:fixed;
    right:0;}
select{margin: 10px 0 0 15px;
    height:30px; outline:none;
    width:65px; 
    border:none;
  font-weight: bold; color:#183;
   background-color:#f2f2f2; }
   option{border:none;}
  
   #back{display:none;
   bottom:15px;
   right:20px;
   position:fixed;
     font-weight:bold;
   }


  
.sec{top:63px; 
  overflow-x:hidden;
  display:block; align-items:center;
  height:0; 
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:0px;}
  
  .sec a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
  transition:0.6s;}
  
  
  .cse{top:63px;
  overflow-x:auto;
  display:block; align-items:center;
  height:400px;
background-color: #f2f2f2;
left:0;
width:100%; 
position:fixed;
  z-index:1;
  transition:0.6s;
  padding-top:20px;
 }
  .cse a{font-weight:bold;
    font-size: 20px;
  text-decoration: none;  
    padding:5px 15px;
    display:block;
  transition:0.6s;}
  
#media, #calculator{display:none;}
#media a, #calculator a{font-size:15px;
          padding: 8px 40px;
          color:b;
}
  
.message-time {font-size:10px;
  float: right; position:absolute;
  right:5px;
  padding-left: 10px;
   padding-top: 2px;
   bottom:5px;
  color:#455;
}
.message{position:relative;}
 .current{color:purple;}
  .cse a:hover, #back:hover, a:hover{color:purple;}
hr{opacity:25%;}
 .sec i{padding-left:10px;}

 @media screen and (min-width: 768px) {
  
  header  div a i{ margin-left:48em;}
 }


/* Smartphones (portrait and landscape) */
@media (max-width: 320px) {
    /* Styles for small screens */
  header  div a i{ margin-left:12.5em;}
}

/* Tablets (portrait) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Styles for tablets in portrait mode */
  header  div a i{ margin-left:35em;}
}

/* Tablets (landscape) and small laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Styles for tablets in landscape mode and small laptops */
  header  div a i{ margin-left:50em;}
}

/* Laptops and desktops */
@media (min-width: 1280px) and (max-width: 1919px) {
    /* Styles for standard laptops and desktops */
  header  div a i{ margin-left:65em;}
}

/* Large desktops and 4K monitors */
@media (min-width: 1920px) {
    /* Styles for large screens and 4K monitors */
  header  div a i{ margin-left:75em;}
}