:root {
  --PrimaryDark: #5c2d3d;
  --PrimaryText: #000000;
  --SecondaryText: white;
  --Backdrop: #bea071;
  --FadedBlack: rgba(0, 0, 0, 0.753);
  
}

h1 {
  text-align: center;
  color: var(--SecondaryText);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  font-size: 42px;
  shadow: 5px 5px 3px var(--FadedBlack);

}

body {
  background-color: var(--Backdrop);
  background-image: url(https://i.ibb.co/rM333sm/1dbab88b8666f3422ff002624adaa590.jpg);
  color: var(--PrimaryText);
  font-family: "Arial", "Helvetica", sans-serif;

}

.MainCont {
  margin: auto;
  margin-bottom: 10px;
  width: 800px;
  padding: 5px;

  background-color: var(--PrimaryDark);
  color: var(--SecondaryText);
  text-align: center;
  box-shadow: 5px 5px 3px var(--FadedBlack);
}

.CharButton {
  box-shadow: 5px 5px 3px var(--FadedBlack);
  filter: brightness(50%);
  padding: 1px;
  margin: 5px;
}

.CharButton:hover {
  filter: brightness(100%);
  transition: 0.5s;
}

.Portrait {
  text-align: right;
  box-shadow: 5px 5px 3px var(--FadedBlack);
  margin: 5px;
  width: 300;
}


.Photo {
  text-align: right;
  outline: 5px solid black;
  margin: 5px;
  width: 780px;
}

.row {
  display: flex;
  padding: 10px;
}

.column {
  width: 70%;
  text-align: left;
}
.columnImage {

}