/* Center h1 inside container */
h1 {
  text-align: center;
}

/* Header and footer with the same color */
header, footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Add drop shadow to the header */
header {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    position: relative;
}

footer {
    box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.2);
}

header > a {
    padding: 10px;
    color: black;
    text-decoration: none;
}

/* Make content inside container center-aligned and a max-width of 600px */
.container {
  text-align: center;
  min-height: 100vh;

  display: grid;
  grid-template-rows: auto 1fr auto;
}

#content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background: radial-gradient(at top left, #00F715 27%, #00EB15 66%, #00D111 11%);
    background-size: 108% 108%;
}

.card {
    /* Rounded border */
    border-radius: 5px;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    /* Restrict the width of the card in pixels */
    max-width: 900px;
    background: white;

    grid-column-start: 2;
    margin: 25px 0;
    min-width: 450px;
}

.card > h3 {
    background: #C217EB;
    display: inline-block;
    font-size: 4rem;
    /* Text wrap */
    overflow-wrap: break-word;
}