@import url('https://fonts.cdnfonts.com/css/merry-loves');

body {
	background-size: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
}

html {
	height: 100%;

}

img {
	max-width: 30%;
	max-height: 50%;
}

.center {
	text-align: center;
}

h1 {
	font-family: "Merry Loves", sans-serif;
	font-size: 2.4em;
	font-weight: lighter;
	font-style: italic;
}

h6 {
	font-family: "Helvetica";
	font-size: 0.8em;
	color: #eeeeee;
	font-weight: lighter;
	font-style: italic;
	text-align: right;
}

h5 {
	font-family: "Helvetica";
	font-size: 1.0em;
	color: #12212e;
	font-weight: lighter;
	font-style: italic;
	text-align: center;
}


/*chat box*/
.box {
	border: 0px;
	position: sticky;
	align-items: center;
	font-size: 1.0em;
	  margin: auto;
	  width: 30%;
		max-height: 10%;
  background-color: #D4C7B2;
	border-color: #B1A188;
  border-radius: 5px;
  padding: 10px;
	white-space: normal;
	word-break: normal;
}

/*chat box*/
.box2 {
	position: sticky;
	margin: auto;
	  width: 80%;
		max-height: 40.0em;
  background-color: #627e6a;
	opacity: 95%;
	border-radius: 5px;
  padding: 30px;
	margin-bottom: 0px;
	overflow-y: scroll;
}
.box3 {
	position: fixed;
	margin: auto;
	  width: 80%;
		max-height: 10.0em;
  background-color: #627e6a;
	opacity: 95%;
	border-radius: 5px;
  padding: 30px;
	margin-bottom: 0px;
}
/*bot pfp*/
.bpfp {
	float: left;
  max-width: 15%;
  margin-right: 20px;
  border-radius: 65%;
  opacity: initial;
  opacity: 100%;
  position: sticky;
}

/*dotdot gif*/
.dotdot {
	float: left;
	width: auto;
	height: auto;
	max-width: 15%;
	max height: 5%;
	margin-right: 150px;
	 background-color: rgba(211, 216,	224, 0.7);
	 border-radius: 35%;
}

/*button*/
.button {
	position: sticky;
	width: auto;
	height: auto;
	max-width: 15%;
	max height: 5%;
	 background-color: rgba(188,125,125, 0.7);
	 border-radius: 35%;
}

/*button*/
.savebutton {
	position: sticky;
	width: auto;
	height: auto;
	max-width: 15%;
	max height: 5%;
	 background-color: rgba(188,	125,	125, 0.7);
	 border-radius: 35%;
}



/*msg container*/
.boxchat {
	font-family: "Helvetica";
	text-align: right;
	font-size: 1.0em;
	font-style: normal;
	margin-bottom: 200px;
	max height: 70%;
	position: fixed;
}

/*user resp text style*/
h2 {
	font-family: "Helvetica";
	color: #eeeeee;
	text-align: right;
	font-size: 1.0em;
	font-style: normal;
}

/*bot resp text style*/
h3 {
	font-family: "Helvetica";
	color: #12212e;
	text-align: left;
	font-size: 1.0em;
	font-style: normal;
}

.h4 {
	font-family: "Merry Loves", sans-serif;;
	font-weight: lighter;
	text-align: center;
	font-size: 0.8em;
	font-style: normal;
	color: #574847;
}


#input {
	display: inline-block;
	width: 70%;
	height: 10%;
	padding: 2% 5%;
	line-height: 150%;
	position: sticky;
	background-color: #D4C7B2;
	border-color: #B1A188;
	margin: auto;
}

#grad1 {
	left: 0;
	bottom: 0;
  height: 100%;
	width: 100%;
  background-image: linear-gradient(to top, rgba(223, 245, 246), rgba(2,0,0,0));
}