@charset "utf-8";
/* CSS Document */
*,html{
	margin:0;
	padding:0;
}
body{
	background:#f5f5f5;
}
p{
	font-family: 'Poppins', sans-serif;
}
.container{
	display:grid;
	grid-template-columns:repeat(2, .5fr);
	padding: 25px;
	grid-gap:25px;
	text-align:center;
}
header{
	display:grid;
	grid-template-columns:repeat(2, .5fr);
	padding:25px;
	background-color:black;
	width:100%;
	color:white;
  font-family: 'Poppins', sans-serif;
}
nav{
	background-color:none;
	width:100%;
	padding:25px 0px;
	border-radius:25px 0px 0px 25px;
	border:solid thin white;
}
nav a{
	text-decoration:none;
	color:white;
	width:200px;
	padding:10px;
	margin-left:15px;
}
nav a:hover{
	/* border-top:solid thin gold;*/
	border-bottom:solid thick gold;
	color:gold;
}
header h1{
	text-align:left;
	align-self:center;
	font-family: 'Poppins', sans-serif;
}
h2{
  font-family: 'Poppins', sans-serif;
}
footer{
	background-color:black;
	color:white;
  margin-top:100px;
	padding:15px;
	padding-bottom: 15px;
  padding-left: 250px;
	font-size:1em;
  text-align: center;
}
.box{
	box-shadow:3px 3px 5px lightgray;
	border-radius:25px;
	padding:25px;
	border: solid thick black;
}
.box p{
	text-align: justify;
	margin-top:10px;
	line-height:130%;
	font-family: 'Poppins', sans-serif;
  text-align: center;
}
#example1{
	grid-area:1/span 2;
	color:black;
}
#example2 p{
  text-align:center;
  font-family: 'Poppins', sans-serif;
}
#color{
	color:black;
}
#revert{
  display:none;
}
#switch{
  text-align:center;
}
button{
  padding: 0 10px;
  background-color:gold;
  border-radius:5px;
  font-size:18px;
  border:solid thin darken;
  margin:10px 0px;
  cursor:pointer;
}
input{
  padding:5px;
  margin-left:5px;
}
aside{
  float:left;
  display:block;
  padding-top:15px;
  background-color:black;
  height:75vh;
  font-family: 'Poppins', sans-serif;
}
aside a{
  display:block;
  text-decoration:none;
  margin: 25px auto;
  padding:15px;
  color:white;
  line-height:25px;
}
@media screen and (max-width:600px){
	header{
		display:grid;
		grid-template-columns:1fr;
		text-align:center;
		align-items:center;
		justify-content:center;
		padding:25px 0px 5px 0px;
	}
	header h1{
		text-align:center;
		font-size:1.4em;
	}
	nav{
		border-radius:0px;
		text-align:center;
		margin-top:15px;
	}
	.container{
		display:block;
	}
	.container div{
		margin-bottom:15px;
	}
  aside{
    float:none;
    display:inline-grid;
    height:auto;
    width:100%;
    padding-top:5px;
  }
  aside a{
  display:inline;
  text-decoration:none;
  margin: 5px auto;
  padding:5px;
  color:white;
  line-height:5px;
   font-size:smaller;
}
}