/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*
 Main Background #3c2f2f
 Secondary Background #4b3832
 
 Main Font color #fff4e6
 Secondary Font color #be9b7b
 
 Main Border color #854442
*/

body {
  background-color: #3c2f2f;
  color: #fff4e6;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-inline: 3rem;
}

.layout {
  display: flex;
  height: 100vh;
}

.left,
.right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.left {
  align-items: flex-start;
}

.right {
  align-items: flex-end;
}

.right > *::part(item){
  background-color: #4b3832;
  color: #be9b7b;
  border-radius: 6px;
  border-style: solid;
  border-color: #854442;
  padding: 13px;
  z-index: 100;
  width: fit-content;

  text-align: center;
  box-shadow: -21px 15px 28px 6px rgba(0,0,0,0.43);  
}

.left > *::part(item){
  background-color: #4b3832;
  color: #be9b7b;
  border-radius: 6px;
  border-style: solid;
  border-color: #854442;
  padding: 13px;
  z-index: 100;
  width: fit-content;

  text-align: center; 
  box-shadow: -21px 15px 28px 6px rgba(0,0,0,0.43);  
}

.center {
  flex: 2 1 0;
  margin-inline: 1rem;
}

.centered {
  align-items: center;
}

*::part(item) > h3{
  color: #be9b7b;
  margin-top: 0px;
}