.raised-inset, .convex-concave, .groove-ridge, .drop-shadow {
	transition: box-shadow .4s ease-in-out, filter .4s ease-in-out;
}
.button, .oval, .circle {
	display: grid;
	place-items: center;
	background-color: #cccccc;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	color: navy;
}

.button {
	width: 250px;
	height: 50px;
	border: none;
	border-radius: 6px;	
}

.oval, .circle {
	height: 100px;
	border-radius: 50%;
}
.oval {
	width: 150px;
}
.circle {
	width: 100px;
}

.raised-inset {
  box-shadow: 6px 6px 14px 0 rgba(127, 170, 55, 0.5),
   -7px -7px 12px 0 rgba(220, 235, 194, 0.4);
}
.raised-inset:hover {
  box-shadow: 6px 6px 14px 0 rgba(127, 170, 55, 0.5) inset,
   -7px -7px 12px 0 rgba(220, 235, 194, 0.4) inset;
   cursor: pointer;
}

.convex-concave {
	box-shadow: -6px -6px 8px 0 rgba(127, 170, 55, 0.5) inset,
   7px 7px 12px 0 rgba(220, 235, 194, 0.4) inset,
   6px 6px 14px 0 rgba(127, 170, 55, 0.5),
   -3px -3px 12px 0 rgba(220, 235, 194, 0.4);
}
.convex-concave:hover {
	box-shadow: 6px 6px 8px 0 rgba(127, 170, 55, 0.5) inset,
   -7px -7px 12px 0 rgba(220, 235, 194, 0.4) inset,
   -6px -6px 14px 0 rgba(127, 170, 55, 0.5),
   3px 3px 12px 0 rgba(220, 235, 194, 0.4);
   cursor: pointer;
}

.groove-ridge {
	box-shadow: -6px -6px 14px 0 rgba(127, 170, 55, 0.5) inset, /* dark */
   7px 7px 12px 0 rgba(220, 235, 194, 0.4) inset, /* Pale */
   -6px -6px 14px 0 rgba(127, 170, 55, 0.5), /* dark */
   7px 7px 12px 0 rgba(220, 235, 194, 0.4); /* light */
}
.groove-ridge:hover {
	box-shadow: 6px 6px 14px 0 rgba(127, 170, 55, 0.5) inset,
   -7px -7px 12px 0 rgba(220, 235, 194, 0.4) inset,
   6px 6px 14px 0 rgba(127, 170, 55, 0.5),
   -7px -7px 12px 0 rgba(220, 235, 194, 0.4);
   cursor: pointer;	
}
.drop-shadow {
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.5))
		drop-shadow(-1px -2px 6px rgba(255, 255, 255, 0.9));
}
.drop-shadow:hover {
  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.7))
		drop-shadow(3px 3px 3px rgba(255, 255, 255, 0.8));
    cursor: pointer;
}

/* General styling */
* {box-sizing: border-box;}
html {
	font-size: 14pt;
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: #000e29;
}
.wrap {
  display: grid;
  grid: auto / repeat(3, 220px);
  place-items: center;
  grid-gap: 2rem;
  gap: 50px;
  width: 700px;
  padding: 20px;
}
img {
	position:absolute;
	top: 80%;
	right: 5%;
	width: 80px;
}


@media screen and (max-width: 600px) {
.wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
  padding: 0;
	}
}