body {
    background-image:url("/media/graphics/space.png");
    background-repeat:repeat;
    font-family: "Lucida Console", monospace;

}

.title {
    color:purple;
    background-color:black;
    border-style:ridge;
    border-width:6px;
    border-color:red, yellow;
    margin-left:4%;
    margin-right:4%;
    margin-top:3%;
    margin-bottom:3%;
    
}

.navbar {
    border-style:double;
    border-width:6px;
    border-color:red;
    margin-top:20px;
    max-width:475px;
    min-height:40px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:5px;
    overflow:hidden;
}

.navbar a {
    padding:2%;
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    float: left;
    color: yellow;
    text-decoration: none;
    text-align:center;
}

.welcome {
    border: 6px ridge red;
	background-color: black;
	color: purple;
    padding:10px;
    margin-left:8%;
    margin-right:8%;
    margin-top:3%;
    margin-bottom:3%;
    padding:5px;
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    margin:3%;
}

.criticsoffice {
    order: 1;
	float: left;
    display: inline;
	border: 6px ridge red;
	background-color: black;
	color: purple;
    padding:10px;
    margin-left:auto;
    margin-right:1%;
    width:25%;
}

.criticsoffice:hover {
    width:26%;
    background-color:grey;
}
.concerthall {
    order: 2;
	float: left;
    display: inline;
	border: 6px ridge red;
	background-color: black;
	color: purple;
    padding:10px;
    margin-left:1%;
    margin-right:1%;
    width:25%;
}
.concerthall:hover {
    width:26%;
    background-color:grey;
}
.hall_of_shame {
    order: 3;
	float: left;
    display: inline;
	border: 6px ridge red;
	background-color: black;
	color: purple;
    padding:10px;
    margin-left:1%;
    margin-right:auto;
    width:25%;
}
.hall_of_shame:hover {
    width:26%;
    background-color:grey;
}