style.css

html, body
{
  height: 100vh;
}

html, body, input, textarea, button 
{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);

}

body
{
  display: flex;
  flex-direction: column;
}

header
{
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 0px;
  width: 100%;
}

header ul.mui-list--inline 
{
  margin-bottom: 0;
}

header a 
{
  color: rgb(17, 16, 16);
}

header table 
{
  width: 100%;
}

.select-card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  margin: 0 auto;
}

#cardPlace, #cardName, #cardDescription, #comeBackTommorow {
  display: flex;
  justify-content: center;
  align-items:center;
  margin-top: 10px;
  font-size: xxx-large;
  font-weight: bolder;
  color: rgb(77, 77, 2);
}

.reveal-fortune {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

#content-wrapper 
{
  min-height: 100%;
  box-sizing: border-box;
  margin-bottom: -100px;
  padding-bottom: 100px;
}

footer 
{
  box-sizing: border-box;
  height: 100px;
  background-color: rgb(31, 26, 26);
  border-top: 1px solid #0c0a0a;
  padding-top: 35px;
}
  
main {
  background-color: rgba (255,255,255,0.2);
  height: 100vh;
};