body{
background-color:white;
}

header{
background-color:#D8BFD8;
}

h1 {
color:black;
text-align:center;
}
p{
text-align:center;
}

h2{
text-align:left;
text-indent: 20px;
}

#rules{
    text-align:left;
    padding-left: 20px;
    margin: 0;
}

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}


#info{

font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
color: black;
text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}

.navbar {
width: 100%;
background-color:black;
overflow: auto;
}

.navbar a {
float: right;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background-color: black;
}

.active {
background-color: #DA7OD6;
}

@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}

/* The container must be positioned relative: */
.custom-select {
position: relative;
font-family: Montserrat;

}

.custom-select select {
display: none; /*hide original SELECT element: */
}

.select-selected {
background-color: black;
border-radius: 10px;
}

/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}

/* Style items (options): */
.select-items {
position: absolute;
background-color: black;
border-radius: 10px;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}

.select-items div:hover, .same-as-selected {
background-color: black;
}


.button {
background-color: black;
border: none;
border-radius: 10px;
color: white;
padding: 8px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}



/* Image styling */
.container {
	position: relative;
	width: 30%;
	display: grid;
	float:left; 
	margin:10px;
	object-fit: contain;
}


.image {
	display: grid;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
background-color: black;
}

.container:hover .overlay {
opacity: 0.7;
}

.text {
	color: white;
	font-size: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	}