:root {
  --white:#f9f9f9;
}

body{
background-color: #111;
background-image: url(https://mappapapa.neocities.org/comm/files/bg-merch.png);
background-repeat: repeat;
background-attachment: fixed;
font-size:1.1em;
font-family: "arial", sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.main-nav a {font-size:1.25em;}

.content{
  background:#f9f9f9;
  max-width:1000px;
  margin:auto;
    width: 100%;
  height: 100%;
}

.align-middle {
  justify-content:center;
}

.ellipsis {
  text-overflow:unset;
line-height: 1em;
white-space:wrap;
min-height: 2em;
  }
  
.main-nav .logo img {
filter:drop-shadow(0px 0px 2px var(--white));    
}

.main-nav .logo img:hover {
filter:drop-shadow(0px 0px 5px red);  
transform: scale(0.95);
}

h1, h2, h3 {
  font-weight:bolder;
  text-align:center;
}

.row {
  gap: 1em;
}

.medium-up-2 > .column, .medium-up-2 > .columns {
  flex: 0 0 40%;
    max-width: 40%;
  }

@media screen and (min-width: 64em) {
  .large-up-4 > .column, .large-up-4 > .columns {
    -webkit-flex: 0 0 23%;
    -ms-flex: 0 0 23%;
    flex: 0 0 23%;
    max-width: 23%;
  }
}

.grid-item {
  outline: 1px solid lightgray;
  padding: 1em;
  font-size:18px;
}

.footer-copyright {
  background:transparent;
}

footer {
  color:var(--white);
  bottom: 0;
position: relative;
  width: 100%;
}

footer a {
  color:var(--white);
  text-decoration:underline dashed;
}

footer a:hover {
  color:red;
    outline:1px dashed red;
  outline-offset: 4px;
}

footer a img:hover {
  outline:1px dashed red;
  outline-offset: 4px;
  filter:brightness(1.4);
  
}