@charset "UTF-8";
/* CSS Document */

nav [role="navigation"] {
	background-color: red;
}

nav > ul {
	list-style-type:none;
  	background-color: #ffffff;;
  	width: 100%;
	margin:0;
	padding:0;
  	display: none;
}
nav > ul li {
	display:block;
	padding: 0% 0% 3% 1%;
}
nav > ul li a {
	display:block;
	min-width:140px;
  	padding: 1rem .8rem;
	text-align: center;
	color: #0358cd; /* blue */
	background: #ffffff; /* white */
  	-webkit-transition-property: background; /* Safari */
  	-webkit-transition-duration: .5s; /* Safari */
  	transition-property: background;
  	transition-duration: .5s;
	text-decoration: none;
	font-family: 'Caveat Brush', cursive;
	font-size: 2em;
	border: 2px solid #ffc501;
    padding: 10px;
    border-radius: 50px 20px;
}

li:hover a {
	background: #0358cd; /* blue */
	color: #ffffff /* white */
}
/* Display 'show menu' link*/
.show-menu {
	display:block;
}

.show-menu {
	text-decoration: none;
	color: #fff;
	background: #FEC502; /* #19C589 */
	text-align: center;
	padding: 10px 0;
}

input[type=checkbox]{
	display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ ul {
    display: block;
}

@media screen and (min-width: 48em) {
nav > ul {
	display: block;
}
nav > ul li a {
	text-align: center;
}
 /* Hide button show-menu */
 .show-menu {
	display: none;
}
}