:root {
  --main-bg-color: #fffbe6;
  --accent-color: #fdd835;
  --text-color: #333;
  --header-height: 120px;
  --header-paddingT: 250px;
  --header-paddingB: 150px;
  --font-stack: "Poppins", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}


h1 {
  font-size: 100px;
  text-align: center;
}

h2 {
  font-size: 50px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
  color: white;
}


html {
  background-color: #A7E4A9;
  overflow-y: scroll;
}

.content {
  width: 600px;
  margin: 100px auto;
  background-color: #292727;
  justify-content: center;
}

h1 {
  margin: 0;
  padding: 20px 0;
  color: #DFB920;
  font-family: 'Londrina Sketch'
}

h2 {
  margin: 0;
  padding: 20px 0;
  color: #DFB920;
  font-family: 'Londrina Sketch'
}

h3 {
  margin: 0;
  padding: 20px 0;
  color: white;
}

img {
  display: block;
  margin: 0 auto;
}

/* header */
.header{
      /*width: 100%;
      display: flex;
      border: none;
      justify-content: center; /* centers horizontally */
      /*padding-top: var(--header-paddingT);   /* space inside the header box */
      /*padding-bottom: var(--header-paddingB);
      height: var(--header-height);
      margin: 0;
      box-sizing: border-box;       /* include padding in height */
      margin: 0 calc(50% - 50vw);
      margin-top: 0;
      padding: 60px;
      text-align: center;
      background: #EEEC98;
      color: white;
      font-size: 30px;
      padding-top: var(--header-paddingT);
      padding-bottom: var(--header-paddingB);  
      }

/* Add extra space between header and page content */
main {
  padding-top: var(--header-height); /* pushes content below header */
}

/* Tab Styles */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #9D552B;
  background-color: #CB9B80;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #9D552B;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #CB9B80;
  border-top: none;
}