@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&display=swap');

.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 1.5fr 0.5fr;
  grid-template-rows: 0.3fr 0.2fr 3.3fr 0.2fr;
  gap: 1px 1px;
  grid-template-areas: "Leftempty Logoheader Logoheader Rightempty" "Leftempty Menu Menu Rightempty" "Leftempty Body Body Rightempty" "Leftempty Footer Footer Rightempty";
}

.Logoheader { grid-area: Logoheader; }

.Menu { grid-area: Menu; }

.Body { grid-area: Body; }

.Leftempty { grid-area: Leftempty; }

.Rightempty { grid-area: Rightempty; }

.Footer { grid-area: Footer; }


H2 {
    text-align:			left;
    font-family:                 'Comic Neue', cursive;
    font-size:			24px;
    font-weight: 		700;
    color: 			#000000;
    letter-spacing: 		0.1px;
    line-height: 		24px;
}

p {
    text-align:			left;
    font-family:                 'Comic Neue', cursive;
    font-size:			16px;
    font-weight: 		400;
    color: 			#000000;
    letter-spacing: 		0.1px;
    line-height: 		18px;
}

p.center {
    text-align:			center;
    font-family:                 'Comic Neue', cursive;
    font-size:			16px;
    font-weight: 		400;
    color: 			#000000;
    letter-spacing: 		0.1px;
    line-height: 		18px;
}

p.footer {
    text-align:			center;
    font-family:                 'Comic Neue', cursive;
    font-size:			10px;
    font-weight: 		400;
    color: 			#000000;
    letter-spacing: 		0.1px;
    line-height: 		18px;
}

.euroalfabet {
    column-count: 		5;
    column-gap:                  40px;
    column-rule-style: 		solid;
    column-rule-width: 		1px;
    column-width: 		100px;
    text-align:			left;
    font-family:                 'Comic Neue', cursive;
    font-size:			16px;
    font-weight: 		400;
    color: 			#000000;
    letter-spacing: 		0.1px;
    line-height: 		18px;
}