* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0px;
}
header {
  background-color: #abe3ff;
  padding: 10px;
  text-align: center;
  font-size: 1.5em;
  min-height: 22%;
}

/* Container for flexboxes */
section {
  display: flex;
  align-items: stretch;
  min-height: 78%;
}

/* Style the navigation menu */
section lcontent {
  flex: 18%;
  background: #dcf4fc;
  padding: 10px;
}

/* Style the list inside the menu */
secion lcontent ul {
  font-size: 1em;
  list-style-type: none;
  padding: 0px;
}
section lpadding {
  flex: 18%;
  background: #dcf4fc;
}

/* Style the content */
section ccontent {
  flex: 64%;
  background-color: #ffffff;
  padding: 10px;
  min-height: 100%;
}

section rcontent {
  flex: 18%;
  background: #dcf4fc;
  padding: 10px;
}
section rpadding {
  flex: 18%;
  background: #dcf4fc;
}


a.discrete:link,a.discrete:visited {
	color:black;
	text-decoration-line: none;
}
a.discrete:hover{
	cursor:pointer;
	color:black;
	text-decoration-line: underline;
}
a.discrete:active{
	color:blue;
	text-decoration-line: underline;
}


/*tablet, half of the PC screen*/
@media only screen and (max-width: 1100px){
  a.discrete:link,a.discrete:visited {
  	text-decoration-line: underline;
  }
  section {
    	 flex-wrap: wrap;
  }
  section lcontent {
  flex: 30%;
  }
  section lpadding {
  flex: 30%;
  }
  section ccontent {
  flex: 70%;
  }
  section rcontent {
  flex: 100%;
  }
  section rpadding {
  display: none;
  }
}
/*phone*/
@media only screen and (max-width: 550px){
  a.discrete:link,a.discrete:visited {
  	text-decoration-line: underline;
  }
  section {
    	 flex-wrap: wrap;
  }
  section lcontent {
  flex: 100%;
  }
  section lpadding {
  display: none;
  }
  section ccontent {
  flex: 100%;
  }
  section rcontent {
  flex: 100%;
  }
  section rpadding {
  display: none;
  }
}