:root {
  --font-color: #000000;
  --green-grey-000: #effcf6;
  --green-grey-100: #c6f7e2;
  --green-grey-200: #8eedc7;
  --green-grey-300: #65d6ad;
  --green-grey-400: #3ebd93;
  --green-grey-500: #27ab83;
  --green-grey-600: #199473;
  --green-grey-700: #147d64;
  --green-grey-800: #0c6b58;
  --green-grey-900: #014d40;
  --blue-grey-000: #f0f4f8;
  --blue-grey-100: #d9e2ec;
  --blue-grey-200: #bcccdc;
  --blue-grey-300: #9fb3c8;
  --blue-grey-400: #829ab1;
  --blue-grey-500: #627d98;
  --blue-grey-600: #486581;
  --blue-grey-700: #334e68;
  --blue-grey-800: #243b53;
  --blue-grey-900: #102a43;
  --red-grea-000: #fff4f8;
  --red-grea-100: #ffe2ec;
  --red-grea-200: #ffccdc;
  --red-grea-300: #ffb3c8;
  --red-grea-400: #ff9ab1;
  --red-grea-500: #ff7d98;
  --red-grea-600: #ff6581;
  --red-grea-700: #ff4e68;
  --red-grea-800: #ff3b53;
  --red-grea-900: #ff2a43;
}

html {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 100%;
  line-height: 1.4;
  font-weight: 400;
  color: var(--font-color);
}

body{
  margin: 10px auto;
  max-width: 98%;
  min-height: 98vh;
  display: grid;
  grid: "head head "
        "nav  nav"
        "main main"
        "news aside" 
        "foot foot"
        / 1fr 1fr;
  background: var(--blue-grey-100);
}

@media (min-width: 30em) { 
  body{
    grid: "head head head "
          "nav  news aside"
          "main main main" 
          "foot foot foot"
          / 1fr  1fr 1fr;
  }
}
@media (min-width: 50em) { 
  body{
    grid: "head head head head" 150px
          "nav  main main news"   min-content
          "nav  main main aside"  auto
          "foot foot foot foot" min-content
          / 1fr  2fr  2fr  1fr;
  }
}
header, nav, main, article, section, aside, footer {
	border-radius: 0px 0.5em 0.5em;
	border: 1px solid;
	padding: 10px;
	margin: 10px;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
  grid-area: head;	
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
  grid-area: nav;			
}

article {
	background: #ffede0;
	border-color: #df6c20;
  grid-area: main;				
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
  grid-area: aside;
}
		
#news {
  grid-area: news;			
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
  grid-area: foot;				
}

.month-indicator {
  text-align: center;
  font-weight: 500;
}

.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.day-of-week {
  margin-top: 1.25em;
}

.day-of-week > * {
  font-size: 0.7em;
  color: var(--font-color);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-variant: small-caps;
  text-align: center;
}

/* Dates */
.date-grid {
  margin-top: 0.5em;
}

.date-grid button {
  position: relative;
  border: 0;
  width: 90;
  height: 40px;
  margin: 5px;  
  
  border-radius: 50%;
  background-color: transparent;
  color: var(--blue-grey-600);
  text-align: center;
}

.date-grid button:hover,
.date-grid button:focus {
  outline: none;
  background-color: var(--blue-grey-000);
  color: var(--blue-grey-700);
}

.date-grid button:active,
.date-grid button.is-selected {
  background-color: var(--green-grey-100);
  color: var(--green-grey-900);
}
.middle{
  margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	position: relative;
	width: 100%;
}
.menu{
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}
.item{
	border-top: 1px solid #2980b9;
	overflow: hidden;
}
.btn{
	display: block;
	padding: 16px 20px;
	background: #3498db;
	color: #fff;
	position: relative;
}
.btn:before{
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	background: #3498db;
	left: 20px;
	bottom: -7px;
	transform: rotate(45deg);
}
.btn i{
	margin-right: 10px;
}
.smenu{
	background: #333;
	overflow: hidden;
	transition: max-height 0.3s;
	max-height: 0;
}
.smenu a{
	display: block;
	padding: 16px 26px;
	color: #fff;
	font-size: 14px;
	margin: 4px 0;
	position: relative;
}
.smenu a:before{
	content: "";
	position: absolute;
	width: 6px;
	height: 100%;
	background: #3498db;
	top: 0;
	left: 0;
	transition: 0.3s;
	opacity: 0;
}
.smenu a:hover:before{
	opacity: 1;
}
.item:target .smenu{
	max-height: 20em;
}