:root {
  --body-bg: #F8F8EA;
  --header-bg: #B52C67;
  --facts-bg: #f7f7a8;
  --menu-bg: #4e8724;
  --footer-bg: #1D310F;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Ubuntu, Tahoma, sans-serif;
  font-size: 16px;
  background-color: var(--body-bg);
  margin: 0px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /*gap: 10px;*/
}

.header {
  grid-column: 1 / span 12;
  background-color: var(--header-bg);
  text-align: center;
  color: var(--facts-bg);
  padding: 1vh;
}

.header > h1 {
  font-size: 40px;
  text-shadow: 3px 3px 3px #909070;
  margin: 5px;
}


.content {
  grid-column: 1 / span 9;
  min-height: 80vh;
  padding: 0px 2vh;
}

.menu {
  grid-column: 10 / span 3;
}

.facts {
  grid-column: 1 / span 12;
  border: 1px solid #c0c0a0;
  background-color: var(--facts-bg);
  padding: 10px;
}

.facts > h2 {
  font-size: 20px;
}

.facts li {
  margin-bottom: 5px;
}

.footer {
  grid-column: 1 / span 12;
  background-color: var(--footer-bg);
  color: #f6f7eb;
  text-align: center;
  padding: 3vh;
}


/*.content tags*/
.content li {
  margin: 8px 0px;
}

.content pre {
  border: 1px solid #c0c0a0;
  background-color: var(--facts-bg);
  padding: 8px;
}

.content img {
  display: block;
  margin: 8px auto;
  max-width: 90%;
}

.content > h1 {
  font-size: 30px;
  padding: 0px;
  margin-bottom: 7px;
}

.content > p {
  margin-bottom: 7px;
  text-align: justify;
}

.content code {
  background-color: var(--facts-bg);
}

/*menu tags*/
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin: 3px 0px; 
  background-color: var(--menu-bg);
  color: var(--body-bg);
}

.menu li.guide {
  background-color: var(--header-bg);
}

.menu li:hover {
  background-color: var(--footer-bg);
}

.menu li a {
  color: var(--body-bg);
  text-decoration: none;
}





@media (max-width: 740px){
  .content {grid-column: 1 /span 12; min-height: 70vh;}
  .menu {grid-column: 1 / span 12; grid-row:2;}
  .menu > ul > li { display: inline-block;}

}