.grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
}
.grid-fixed {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-gap: 10px;
}
nav {
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-family: Verdana;
}
nav ul {
	
	list-style-type: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: #6A5D7B;
}
nav li {
	display: inline-block;
	color: white;
	padding: 2px;
	text-decoration: none;
	
}
nav a {
	color: #230903;
}
nav li a:hover {
		background-color: #6A5D7B;	
		color: #F3F0F5;
}
body{
	background-color: #F3F0F5;  
	
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
.box-big {
	text-align:left;
    border: 5px solid #6A5D7B;
    margin: 2%;
    padding: 2%;
    color: #F9F6FB;
	border-radius: 40px;
	box-shadow: 10px 10px 10px black;
	color: #6A5D7B;
	overflow-wrap: break-word;
	white-space: normal;
}
footer {
	
	text-align:center;
}
/* Media Query for Mobile Viewport */
@media screen and (max-width: 480px), print {
	.grid {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0px;
    }
  
}