body {
	font-family: "Raleway", sans-serif;
	background-color: #494d7e;
	background-image: url('../img/paw.png');
	background-size: 300px;
	background-repeat: repeat space;
}

ul {
	list-style-image: url('../img/cpu.svg');
	text-align: left;
}

a {
	color: #272744;
}

hr {
	background-color: #272744;
	height: 1px;
	border: none;
}

/*-----------Formatting-----------------*/
.main {
	height: 100vh;
	width: 50%;
	margin: auto;
	background-color: #c69fa5;
	display: flex;
	filter: drop-shadow(-5px 0px 1px rgba(0,0,0,0.6));
}

.heading {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-top: none;
	border-bottom: 2px solid #494d7e;
	border-left: none;
	border-right: none;
	width: 50%;
	height: 300px;
	margin: auto;
	background-color: #f2d3ab;
	background-image: url('../img/banner.png');
	background-size: 100% 100%;
	filter: drop-shadow(-5px 0px 1px rgba(0,0,0,0.6));
}

.menu {
	text-align: center;
	padding-left: 10px;
	border-right: 2px solid #494d7e;
	border-top: none;
	border-bottom: none;
	border-left: none;
	height: 100vh;
	width: 20%;
	margin: auto;
	background-color: #c69fa5;
	flex-grow: 1;
}

.contents {
	height: 100vh;
	padding-left: 10px;
	background-color: #c69fa5;
	width: 80%;
	margin: auto;
	flex-grow: 2;
}
.contents-gallery {
    height: auto;
	padding-left: 10px;
	background-color: #c69fa5;
	width: 80%;
	margin: auto;
	flex-grow: 2;
}

.footing {
	clear: both;
	width: 50%;
	height: 700px;
	margin: auto;
	background-color: #f2d3ab;
	text-align: center;
	padding-top: 10px;
	filter: drop-shadow(-5px 0px 1px rgba(0,0,0,0.6));
}

.wnew {
	height: auto;
	overflow-y: auto;
	background-color: rgba(252,245,239,0.6);
	margin: 10px;
	padding: 10px;
	border-radius: 10px;
	border: 2px dotted #494d7e;
}

img {
  max-width: 100%;
  height: auto;
}   

@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}   

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 30px;
}

.gallery-card {
    padding: 8px;
    background-color: rgba(252,245,239,0.6);
    text-align: center;
    border-radius: 10px;
	border: 2px dotted #494d7e;
    filter: drop-shadow(-5px 0px 1px rgba(0,0,0,0.6));
}

.gallery-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8px auto;
}

.card-info strong {
    display: block;
    font-size: 0.9em;
}

.card-info p {
    font-size: 0.8em;
    margin: 4px 0 0 0;
    opacity: 0.85;
}