html, body{
    margin:0;
    padding:0;
    background-color: lightgray;
    font-family: "pixelify sans", sans-serif;
}

.banner{
    display:grid;
    grid-template-columns:minmax(150px,max-content)
        minmax(75px,300px)
        minmax(25px,1fr);
    grid-auto-flow:column;
    background-image: url("https://joeyterry.neocities.org/concrete%20beach.png");
    background-size: cover;
    background-position-y: bottom;
    background-position-x: right;
}

.shrinkbox{
    align-self:center;
    justify-self:start;
  object-fit: contain;
}

.fillbox{
  object-fit: cover;
}

.runner{
    width:100%;
    display:grid;
    grid-template-columns:
      2rem,
      min-content
      2rem;
    background-color:#91c1ef;
}

.runnerimg{
  grid-column:1;
  width:3em;
  justify-self:right;
  align-self:center;
}

.runnerimg2{
  grid-column:3;
  width:3em;
  justify-self:left;
  align-self:center;
}

.subtitle{
  grid-column: 2;
    color:lightgoldenrodyellow;
    font-family: "pixelify sans", sans-serif;
    text-align: center;
    font-size:50px;
    font-size:4.5svh;
    align-content: center;
}


.navbar{
    display:flex;
    flex-flow: wrap;
    width:100%;
    gap:1em;
    background-color:#91c1ef;
  justify-content: center;
  padding-top:15px;
  padding-bottom:15px;
  
}

.navbutton{
    display:block;
    color:lightgoldenrodyellow;
    font-family: "pixelify sans", sans-serif;
    border-style: outset; 
    padding:0.5em;
    align-self:center;
    justify-self:center;
    white-space:nowrap;
    font-size:4vmin;
}

.navbutton:active{
  border-style:inset;
}

.notif{
    padding:15px;
    background-color: white;
    margin:15px;
    font-family: "pixelify sans", sans-serif;
    border-style:solid;
    border-color:blue;
    color:darkblue;
    font-size:36px;
    font-size:2.5svh;
}

.dialogue{
  padding:15px;
  font-size:24px;
  font-size:2.7svh;
}

.cardbox{
  display:grid;
    padding:20px;
    grid-template-columns:
        1fr
        minmax(min-content,1000px)
        1fr
}

.card{
    position:relative;
  display:grid;
  grid-template-columns:
      minmax(min-content,500px)
      minmax(150px,500px);
  grid-template-rows: 1fr;
  background-color: white;
    grid-column:2;
}

.cardlink::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cardtext{
  align-self:center;
  justify-self:center;
  font-family: "pixelify sans", sans-serif;
  text-align:center;
  padding:20px;
  font-size: 2.5svh;
}

.cardimg{
  object-fit: contain;
    align-self:center;
    padding:20px;
}



.blurb{
  display:block;
  background-color:white;
  align-self: center;
  text-justify: center;
    font-size:24px;
  font-size:2.5svh;
  margin:15px;
  padding:15px;
  }

.blurb::first-letter{
  font-size:31px;
}

.fullimg{
    display: block;
  padding:15px;
  object-fit:contain;
}

.quote{
  text-align:center;
    font-family:times new roman, times, serif;
  padding:20px;
  font-size:32px;
  font-size:3svh;
}

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}