html{
	background-color: black;
}

header{
	background-color: #9900ff;
	padding: 15px;
	
}

body {
	text-align: center;
	margin: auto;

	color: white;
	font-family: sans-serif;
	min-height: 100vh;
	max-width: 70vw;
	overflow: auto;	
	background-color: #9a75ba;
	background-repeat: repeat;
	background-size: auto;
	background-position: top left;
		
}

footer {
    font-size: 10px;
	padding: 10px;
	text-align: left;
    justify-content: left;
    gap: 12px;
    border-style: ridge;
    width: 100%;
    box-sizing: border-box;
    border-color: #9900ff;
    background-color: #9a75ba;
}
nav {
    background-color: purple;
    overflow: hidden;

}
nav a {
        position: relative;
        display: inline-block;
        background-color: purple; /* for compatibility with older browsers */
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-family: sans-serif;
        font-weight: 100;
        text-shadow: 0px -1px #333;
    }
nav a.active{
	color: grey;
}	
nav a:hover{
	text-decoration-line: underline;
}

.content{
	display: grid;
	padding: 15px;
	grid-template-columns: repeat(3, auto auto);
	grid-template-rows: repeat(2, auto);
	justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.main-column, .random{
    justify-content: center;
    align-items: center;
    border-style: ridge;
    border-color: #9900ff;
	color: black;
    background-color: white;
    box-sizing: border-box;
    position: relative;
    text-align: center;
	
}
.main-column{
	grid-column-start: 2;
	grid-column-end: 3;
}	

.random{
	width: 150px;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row: 1/2;
}

.tiles{
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, auto);
}

@media (max-width: 1300px) {
	body{
		max-width: 90vw;
	}
}