:root {
  --bg-color: #3d3b3c;
  --border-color: #ffffff;
  --button-color: #ffffff;
  --button-hover-color: #3d3b3c;
  --font-color: #3d3b3c;
  --font-hover-color: #ffffff;
}
  
html {background-color:var(--bg-color); font-family: Karla, sans-serif; font-size: 20px;
  width: 100%; justify-content: center; overflow-y: scroll;}

h5, h4, h3, h2, h1 {color:var(--font-hover-color); margin-bottom: 16px; text-align: center;  display:block; width:100%;}

@media (orientation: landscape) {
  html { display: flex; flex-direction: row; }
  p {background-color:var(--button-color); color:var(--font-color); font-weight: 550; line-height: 24px;
     width: 544px; 
     padding:16px 66px; border: 2px solid var(--border-color); text-align: center; }
  a {text-decoration: none!important;}
}
  
@media (orientation: portrait) {
  p {background-color:var(--button-color); color:var(--font-color); font-weight: 550; line-height: 24px; 
    height: 40px;
    padding:40px 66px; border: 2px solid var(--border-color);  text-align: center; margin-top: 0px;}
  a {text-decoration: none!important; font-size: 3.0em; text-align: center;}
  h1 {font-size: 4.0em;}
  h2 {font-size: 3.5em;}
  h3 {font-size: 3.0em;}
}

p:hover {background-color:var(--button-hover-color); color:var(--font-hover-color);}