style.css

  body {
    font-family: 'Noto Sans', sans-serif;
    background-color: #EEEEEE;

  }

  h1 {
    background-color: #6C6CCC;
    color: White;
    font-size: 2em;
    margin: 0;

  }
  .giphy{

  }
  .chatbox-parent{
    width: 60%;
    margin-left: 300px;
    margin-top: 150px;
    border: 2px grey ;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  #chatbox {
    margin-left: 80px;
    width: 40%;
    margin-top: 80px;
  }
  #userInput {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 80px;


  }
  #userInput i {
    margin-left: 10px;
  }
  #textInput {
    width: 80%;
    border: none;
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    border-radius: 10px;
    height: 50px;
   margin-left: 80px;


  }
  .userText {
    color: black;
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;

    line-height: 30px;


  }
  .userText span {
    background-color: #C8C8C8;
    padding: 10px;
    border-radius: 2px;
    position: relative;
    left: 500px;


  }
  .botText {
    color:white;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    text-align: left;
    line-height: 30px;

  }
  .botText span {
    background-color:#6C6CCC;
    padding: 10px;
    border-radius: 2px;
  }
  #tidbit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
  }
  .boxed {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 60px;

    background-image: url(hi2.gif);
    background-position: right;
    background-repeat: no-repeat,repeat;

  }
.imgar {
margin-left: auto;
    margin-right: auto;
    width: 100%;
    margin-top: 60px;
    background-position: right;
    background-repeat: no-repeat,repeat;
}