style.css

@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Alegreya Sans", sans-serif;
}

body {
  background-color: #343541;
}


#app {
  max-width: 100vw;
  width: 70vw;
  height: 99vh;
  background-image: url("./assets/AskIboAi-Bg-Image.png");
  background-size: 300px;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  justify-items: center;
  margin: auto;
}


.header {
  padding: 1px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #383946;
  color: #ececf1;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

}

.header h1 {
  font-size: 70px;
  text-align: center;
  margin: 0;
}

.header p {
  font-size: 0.75em;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin: -0.5em 0 0 0;
  padding: 5px;
  text-align: center;
}


#chat_container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  gap: 10px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding-bottom: 20px;
  scroll-behavior: smooth;
}

/* hides scrollbar */
#chat_container::-webkit-scrollbar {
  display: none;
}

.wrapper {
  width: 100%;
  padding: 15px;
}

.ai {
  background: #40414F;
}

.chat {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.profile {
  width: 36px;
  height: 36px;
  border-radius: 5px;

  background: #5436DA;

  display: flex;
  justify-content: center;
  align-items: center;
}

.ai .profile {
  background: transparent;
}

.profile img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.message {
  flex: 1;

  color: #dcdcdc;
  font-size: 20px;

  max-width: 100%;
  overflow-x: scroll;

  /*
   * white space refers to any spaces, tabs, or newline characters that are used to format the CSS code
   * specifies how white space within an element should be handled. It is similar to the "pre" value, which tells the browser to treat all white space as significant and to preserve it exactly as it appears in the source code.
   * The pre-wrap value allows the browser to wrap long lines of text onto multiple lines if necessary.
   * The default value for the white-space property in CSS is "normal". This tells the browser to collapse multiple white space characters into a single space, and to wrap text onto multiple lines as needed to fit within its container.
  */
  white-space: pre-wrap; 

  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hides scrollbar */
.message::-webkit-scrollbar {
  display: none;
}

#input-area {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 5px;
  background-color: #343541;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

form {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  background: #40414F;

  display: flex;
  flex-direction: row;
  gap: 10px;

  border-radius: 5px;
}

#input-area textarea {
  width: calc(100% - 2em);

  color: #ececf1;
  font-size: 18px;

  padding: 10px;
  background: transparent;
  border: none;
  outline: none;
}

button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
}

form img {
  width: 40px;
  height: 40px;
}

#input-area input {
  width: calc(100% - 2em);
  background-color: #40414F;
  border: none;
  color: #ececf1;
  font-size: 1em;
  padding: 1em;
  border-radius: 5px;
}

.disclaimer {
  font-size: 0.7em;
  text-align: center;
  color: #757575;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 0px 0.5em;
  margin: 0.3em;
}

.disclaimer a {
  color: #818f7b;
  font-style: italic;
}


.creator-copyright {
  margin-left: 12px;
}

/* From uiverse.io by @pedertanberg */
.loader {
  display: inline-block;
  position: relative;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 12px 5px 0;
  transform-origin: 12px 5px 0;
  }
  
  .loader span {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgb(20, 245, 0);
  -webkit-animation: loader45 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: loader45 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .loader span:after,
  .loader span:before {
  content: " ";
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  background: rgb(20, 245, 0)
  }
  
  .loader span:before {
  left: -5px;
  border-radius: 50% 0 0 50%;
  }
  
  .loader span:after {
  top: -5px;
  border-radius: 50% 50% 0 0;
  }
  
  @-webkit-keyframes loader45 {
  0% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  5% {
      transform: scale(1.1);
      -ms-transform: scale(1.1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1.1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  39% {
      transform: scale(0.85);
      -ms-transform: scale(0.85);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.85);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  45% {
      transform: scale(1);
      -ms-transform: scale(1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  60% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  100% {
      transform: scale(0.9);
      -ms-transform: scale(0.9);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.9);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  }


@-o-webkit-keyframes loader45 {
  0% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  5% {
      transform: scale(1.1);
      -ms-transform: scale(1.1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1.1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  39% {
      transform: scale(0.85);
      -ms-transform: scale(0.85);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.85);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  45% {
      transform: scale(1);
      -ms-transform: scale(1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  60% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  100% {
      transform: scale(0.9);
      -ms-transform: scale(0.9);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.9);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
}


@keyframes loader45 {
  0% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  5% {
      transform: scale(1.1);
      -ms-transform: scale(1.1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1.1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  39% {
      transform: scale(0.85);
      -ms-transform: scale(0.85);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.85);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  45% {
      transform: scale(1);
      -ms-transform: scale(1);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(1);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  60% {
      transform: scale(0.95);
      -ms-transform: scale(0.95);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.95);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
  
  100% {
      transform: scale(0.9);
      -ms-transform: scale(0.9);
      /* added vendor specific css (IE) */
      -webkit-transform: scale(0.9);
      /* added vendor specific css (Safari, Opera , Chrome) */
  }
}


.ad-section-left {
  /* width: 12vw; */
  width: 1vw;
  /* height: 50vh; */
  
  margin: 10px 0px 0px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: left;
}

.section-left-ad-1 img { 
  width: 260px; 
  height: 350px;
  display: block;
  z-index: 1000;
  margin: 10px 0px -192px -20px;
}

 .section-left-ad-2 img { 
  width: 190px;
  height: 200px; 
  display: block;
  z-index: 1000;
  margin: 10px 0px 0 0px;
 }


 .ad-section-right {
  width: auto;
  height: auto;
  
  margin: 10px 40px 0 -50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: right;
}

.section-right-ad-1 img { 
  width: 85px;
  height: 270px;
  display: block;
  z-index: 1000;
  margin: auto;
}

.section-right-ad-2 img { 
  width: 148px;
  height: 160px;
  display: block;
  z-index: 1000;
  margin: 25px -20px 0px 0px;
}

@media only screen and (max-width: 600px) {
  .header p {
    font-size: 0.55em;
  }

  .message {
    font-size: 15px;  
  }

  .ad-section-left {    
    margin: 0px 0px 0 5px;
  }

  .section-left-ad-1 img { 
    width: 82px; 
    height: 95px; 
    display: block; 
    margin: 40px 0px -66px -10px;
    }
    .section-left-ad-2 img { 
    width: 50px; 
    height: 65px; 
    display: block; 
    }
  
  .ad-section-right {    
    margin: 150px 10px 0 -10px;
  }

  .section-right-ad-1 img { 
    width: 50px; 
    height: 200px; 
    display: block; 
    margin: 20px 0px 10px 0px;
    }
    .section-right-ad-2 img { 
    width: 50px; 
    height: 55px; 
    display: block; 
    }

}

/* Different Animations */

.animated {
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}
.bounce {
  animation-name: bounce;
}

@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
.flash {
  animation-name: flash;
  animation-duration: 10s;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.pulse {
  animation-name: pulse;
  animation-duration: 1s;
}

@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.25) scaleY(0.75);}
  40% {transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85);}
  100% {transform: scale(1);}
}
.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
  animation-name: shake;
  animation-duration: 20s;
}

@keyframes swing {
  20% {transform: rotate(15deg);}
  40% {transform: rotate(-10deg);}
  60% {transform: rotate(5deg);}
  80% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}
.swing {
  transform-origin: top center;
  animation-name: swing;
}

@keyframes wobble {
  0% {transform: translateX(0%);}
  15% {transform: translateX(-25%) rotate(-5deg);}
  30% {transform: translateX(20%) rotate(3deg);}
  45% {transform: translateX(-15%) rotate(-3deg);}
  60% {transform: translateX(10%) rotate(2deg);}
  75% {transform: translateX(-5%) rotate(-1deg);}
  100% {transform: translateX(0%);}
}
.wobble {
  animation-name: wobble;
  animation-duration: 10s;
}

@keyframes flip {
  0% {transform: perspective(400px) translateZ(0) rotateY(0) scale(1);animation-timing-function: ease-out;}
  40% {transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);animation-timing-function: ease-out;}
  50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
  80% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
  100% {transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);animation-timing-function: ease-in;}
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes lightSpeedIn {
  0% {transform: translateX(100%) skewX(-30deg);opacity: 0;}
  60% {transform: translateX(-20%) skewX(30deg);opacity: 1;}
  80% {transform: translateX(0%) skewX(-15deg);opacity: 1;}
  100% {transform: translateX(0%) skewX(0deg);opacity: 1;}
}
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes rollIn {
  0% {opacity: 0;transform: translateX(-100%) rotate(-120deg);}
  100% {opacity: 1;transform: translateX(0px) rotate(0deg);}
}
.rollIn {
  animation-name: rollIn;
}

@keyframes rotateIn {
  0% {transform-origin: center center;transform: rotate(-200deg);opacity: 0;}
  100% {transform-origin: center center;transform: rotate(0);opacity: 1;}
}
.rotateIn {
  animation-name: rotateIn;
}

@keyframes hinge {
  0% {transform: rotate(0);transform-origin: top left;animation-timing-function: ease-in-out;}
  20%, 60% {transform: rotate(80deg);transform-origin: top left;animation-timing-function: ease-in-out;}
  40% {transform: rotate(60deg);transform-origin: top left;animation-timing-function: ease-in-out;}
  80% {transform: rotate(60deg) translateY(0);transform-origin: top left;animation-timing-function: ease-in-out;}
  100% {transform: translateY(700px);}
}
.hinge {
  margin: 20px;
  animation-name: hinge;
}


.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  margin: 0px 0px 5px 20px;
  padding: -10px 25px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow: 2px 2px 8000px 20px rgba(255,255,255,.5),
   inset 7px 7px 20px 0px rgba(0,0,0,.1),
   inset 4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

/* 11 */
.btn-11 {
  border: none;
  background-color: #343541;
  /* background: rgb(251,33,117); */
    /* background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%); */
    color: #fff;
    text-transform: uppercase;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .7;
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 60px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 60px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-btn1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

@media only screen and (max-width: 600px) { 
   .custom-btn {
    width: 40px;
    height: 20px;
    margin: auto;
    font-size: 6px;
  }
}