*{ 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);
z-index:1;
left:0;
}
  
  
 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;}
 
  
  .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.4s;
}
.riba .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
}

.riba .bar2 {opacity: 0;}

.riba .bar3 {
  transform: translate(0, -3px) rotate(45deg);
}
  
  
.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; opacity:70%;
  padding-left: 10px;
   padding-top: 2px;
bottom:5px;}
.message{position:relative;}
 .current{color:purple;}
  .cse a:hover, #back:hover{color:purple;}
hr{opacity:25%;}
  
  
 select{margin: 1px 0 0 15px;
    height:40px; outline:none;
    width:65px; 
    border:none;

   background-color:#f2f2f2;
   color:#183;
    font-weight:bold;}
  option{border:none; color:red;
 }
 

  
  #chat-container{
      max-width:360vw;
      margin: 40px 0 0 0;
      font-family: Arial, sans-serif;
      
      border-radius: 15px;
      padding:40px 0 10px 0;
      overflow-y:auto;
      background-color:rg(100%,0%,0%);
      flex-grow:1;
      max-height:86vh;  display:flex;
      flex-direction:column;
      align-items:flex-end;
  }

  

  .chat-messages{display:flex;
      flex-direction:column;
      align-items:flex-end;}

   .user-message, select, .input-container{padding:8px;
      align-self:flex-end;
      //background-color: #a0e05d;
     border-radius:10px 10px 0 10px; 
     margin:0 0 5px 50px;}

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

  
  
      @keyframes  buttonAnimation{
  0% { opacity: 0; transform: translateX(-50px) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

  
  
  
  
  
    /* User options */
 .button-container{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin:0 0 0 0;
      padding: 0;}
  
  button{display: flex;
      flex-direction: column;
      align-self: flex-start;
      margin: 5px 8px 10px 10px;
      padding: 8px;
      background-color:#f2f2f2;
      border: none;
      border-radius:15px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      color:#183;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s;
    
    
      
    
    
    opacity:0;
  transform: translateY(50px) rotate(360deg);
  animation: buttonAnimation 0.6s forwards;

  }
  
  
  
  
  
  
  
      
    .input-container{padding:8px;
      align-self:flex-end; display:none;
     
     border-radius:10px 10px 0 10px; 
     margin:0 0 5px 50px;}

        input[type="number"], input[type="text"], select{
            width: calc(100% - 50px);
            padding: 10px; outline:none;
            margin-top: 5px;
            border-radius: 10px;
            border: 2px solid #ddd;   }
         
        .show {display: block;}
     p{line-height:1.8;}
      #explanations, #explanationButton{display:none;}
  button:hover {color:purple;}
   .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;}
}