*, *:before, *:after
  {
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  font-family: system-ui, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  hyphens: auto;
  overflow-wrap: break-word;
  }
 
html, body, main {height: 100%;} 

body 
  {
  padding: 5px;
  background-color: #310;
  background-image: url("img/puu1.jpg");

  display: flex;
  justify-content: center;
  align-items: center;
  }

main
  {
  xxwidth: 800px;
  max-width: 100%;

  aspect-ratio: 3 / 4;

  background-color: #876;
  background-color: rgba(0,0,0,0.1);
  background-image: url("img/puu1.jpg");
  border-radius: 16px;

  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 1vh;

  justify-content: center;
  align-items: center;

  border: solid 2px #ed7e3e;
  }

main>*
  {
  width: 100%;
  }

main>*:nth-child(1)
  {
  flex: 2;
  }

main>*:nth-child(2)
  {
  flex: 1;
  }