:root {
  --main-radius: 5px;
  --main-padding: 5px;
}

body {
  font-family: "Inter", sans-serif;
}

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  grid-template-rows: 0.3fr 2.6fr 0.1fr;
  grid-template-areas:
    "sideLheader header pomoc"
    "sideL menu sideR"
    "footer footer footer";
  grid-gap: 0.5rem;
  font-weight: 800;
    text-align: center;
  font-size: 2rem;
  text-align: center;
}

.wrapper2 {
  display: grid;
  height: 100vh;
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  grid-template-rows: 0.3fr 2.6fr 0.1fr;
  grid-template-areas:
    "sideLheader header powroty"
    "sideL pomoc_memory_game sideR"
    "footer footer footer";
  grid-gap: 0.5rem;
  font-weight: 800;
    text-align: center;
  font-size: 2rem;
  text-align: center;
}

/* -------------------------------------------------- */

#menu {
	  grid-gap: 0.2rem;
  height: 80vh;
  grid-template-columns: 1.0fr;
    grid-area: menu;
		display: grid;
			  grid-gap: 0.5rem;
		  grid-template-columns: auto;
	  text-align: center;
}

.menu1 {

    cursor: pointer;
    background: #e0e8d1;
    background-size: contain;
    border-radius: 5px;
    transition: 0.4s background-color, 0.4s box-shadow;

}

.pomoc {

  grid-gap: 0.5rem;
      grid-area: pomoc;
    cursor: pointer;
  background-color: #e0e8d1; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #e0e8d1, white);
    background-size: contain;
    border-radius: 5px;
    transition: 0.4s background-color, 0.4s box-shadow;

}

#powroty {

  grid-gap: 0.5rem;
      grid-area: pomoc;
    cursor: pointer;
  background-color: #e0e8d1; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #e0e8d1, white);
    background-size: contain;
    border-radius: 5px;
    transition: 0.4s background-color, 0.4s box-shadow;

}

/*

a {
	display:block;
	padding: 5px;
	text-decoration: none;
	width: 7em;
	margin: 2px;
	color: #8D4F10;	
}
*/

a {
	text-decoration: none;
}

	

#header {
	grid-area: header;
  background-color: #e0e8d1; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #e0e8d1, white);
}




#footer {
 background-color: #e0e8d1; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, #e0e8d1, white);
  grid-area: footer;
  font-size: 1rem;
}


#sideL {
  grid-area: sideL;
}
#sideLheader {
  grid-area: sideLheader;
  background-color: #e0e8d1; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, #e0e8d1, white);
    background-size: contain;
    border-radius: 5px;
    transition: 0.4s background-color, 0.4s box-shadow;
}
#sideR {
  grid-area: sideR;
}

#pomoc_memory_game {
  grid-area: pomoc_memory_game;
}
#powroty{
  grid-area: powroty;
}

@media only screen and (max-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 0.2fr 2.4fr 0.1fr;
    grid-template-areas:
    "header"
	"pomoc" 
	"menu" 
	"footer";
	  font-size: 1.5rem;
  }
}

@media only screen and (max-width: 700px) {
  .wrapper2 {
    grid-template-columns: 1fr;
    grid-template-rows: 0.3fr 0.2fr 2.4fr 0.1fr;
    grid-template-areas:
    "header"
	"powroty" 
	"pomoc_memory_game" 
	"footer";
	  font-size: 1.5rem;
  }
}