body {
  background-color: rgb(0, 49, 0);
  background: linear-gradient(to bottom, rgb(0, 49, 0), rgb(65, 65, 65));

  width: 100%;
  height: 100%;

  background-repeat: no-repeat;
  background-attachment: fixed;

  margin: 0;
  padding: 0;
}

hr {
  color: rgb(197, 197, 197);
}

a {
  color: rgb(18, 17, 119);
  /* text-decoration: none; */
}

.main_container {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto; /* 100%; */
}

.seller_background {
  width: 100%;
  /* height: 100%;  */
  max-width: 1000px; 

  padding: 10px;
  margin: 20px;

  background-image:
    url("./IMG_2129.PNG"),
    url("./IMG_2126.PNG"),
    url("./IMG_2125.PNG");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* background-attachment: fixed; */
  aspect-ratio: 15/10;
  /* background-color: rgb(0, 49, 0); */

  text-align: center;
  font-family: Georgia, serif;
  color: white;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  position:relative;
}

.character_bubble_container {
  /* width: auto;
  height: auto; */

  display: flex;
  align-items: top;
  justify-content: space-around;

  position:relative;
  z-index: 1;

  overflow:auto; 
}

.seller_image {
  width: auto;
  height: auto;
  /* max-width: 500px; 
  max-height: 1000px; */

  aspect-ratio: 11/10;
}

.seller_image img {
    width: 100%;
    height: auto;

    max-width: 600px;
}

.bubble {
  width: 300px;
  max-height: 450px;

  /* padding-left: 50px;
  margin-left: 50px;

  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: black; */

  overflow:auto;
}

.seller_bubble_name {
  width: max-content;
  background-color: white;
  /* border: white 1px solid; */
  /* border-radius: 5px; */

  margin-left: 50px;

  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: black;
}

.seller_bubble_text {
  background-image: url("./IMG_2128_Bubble.PNG");
  background-repeat: no-repeat;
  background-size:  100% 100%;
  background-position: center;

  /* aspect-ratio: 19/10 auto; */

  display: inline flex;
  /* overflow:auto; */
}

.seller_bubble_text p {
  font-size: 20px;
  text-align: left;
  color: black;

  padding-left: 55px;
  padding-right: 5px;
  padding-bottom: 55px;
}

.dialogue_box {
  /* background-color: #8d272f;
  border: white 10px solid;
  border-radius: 10px;
  font-size: 20px; */

  width: 700px; /* FIXME : find a way to have it take most place on screen without needing to fic it manually */

  text-align: left;
  color: white;
  margin: 5px;
  padding: 5px;

  position: absolute;
  bottom: 0px;
  /* margin-top: auto; */
  z-index: 2;

  /* float: left; */
}

.seller_name {
  background-color: #8d272f;
  border: white 10px solid;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  
  margin: 10px;
  padding: 10px;
}

.seller_text {
  background-color: #8d272f;
  border: white 10px solid;
  border-radius: 10px;

  font-size: 20px;
  text-align: center;

  margin: 10px;
  padding: 10px;

  width: 100%;
  /* overflow: hidden; */
  /* max-width: 1000px;  */
  /* box-sizing: border-box; */
}

button.link {
  background:none;
  border:none;
  color: white;
  font-size: 20px;
  font-family: Georgia, serif
}

button.link:hover {
  font-weight: bold;
}