* {
  box-sizing: border-box;
}

body {
  margin : 10px auto;
  width : 960px;
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

/* Style the header */
.header {
  grid-area: header;
  text-align: center;
  font-size: 35px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header'
	'logos venue'
    'subtitle subtitle'
    'hr1 hr1'
    'leftmenu rightmenu'
    'hr2 hr2'
    'img_motto text_motto' 
    'hr3 hr3'
    'img_contribs text_contribs' 
    'hr4 hr4'
    'img_dates text_dates' 
    'hr5 hr5'
    'img_fees text_fees' 
    'hr6 hr6'
    'footer footer';
	grid-column-gap: 10px;
	grid-row-gap: 5px;
} 

.logos {
	grid-area : logos;
	width : 200px;
	text-align : right;
}

.venue {
	grid-area : venue;
	text-align : left;
}

.subtitle {
	grid-area : subtitle;
	text-align : left;
	width : 100%;
}

.menu {
	grid-area : menu;
	font-size: 18px;
}

.line {
	width : 100%;
}

.left {
	width : 300px;
	text-align : right;
	padding : 5px 0px 5px auto;
}


.right {
	width : 600px;
	text-align : left;
	padding : 5px auto 5px 0px;
}


/* Style the footer */
.footer {
  grid-area: footer;
  padding: 10px;
  font-size : 10px;
  text-align: left;
}


ul {
  list-style: none; /* Remove default bullets */
  margin-left:-2.5em;
}

ul li::before {
  content: "\25fc";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(84,190,63); /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: 0em; /* Also needed for space (tweak if needed) */
}

a:link, a:visited, a:active {
	color: rgb(84,190,63);
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header' 
      'venue'
      'logos'
      'subtitle'
      'hr1'
      'rightmenu'
      'hr2'
      'img_motto' 
      'text_motto'
      'hr3' 
      'img_contribs' 
      'text_contribs' 
      'hr4'
      'img_dates' 
      'text_dates' 
      'hr5'
      'img_fees' 
      'text_fees'
      'hr6' 
      'footer';
  }
}