* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background-color: whitesmoke;
    text-align: center;
}


.page-container {
    margin: clamp(1rem, 10vh, 4rem) 10vw;    
  }

div.info-box {
    border: solid 1px black;
    padding: 2rem;
}

.weather {
    font-size: 5vw;
        font-family: monospace;

}

main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

section {
    margin: 5vh 0;
}

h1 {
  font-size: clamp(28px, 8vw, 48px);
  margin-top: clamp(1rem, 3vh, 4rem);
  margin-bottom: clamp(1rem, 2vh, 3rem);
}

  h2 {
        font-size: clamp(24px, 6vw, 38px);
  }

  p {
    font-family: monospace;
    font-size: clamp(16px, 2.5vw, 22px);
}


.otter pre {
    font-family: monospace;
font-size: clamp(0.3rem, 0.8vw, 0.5rem);
    text-align: center;
    margin-top: clamp(1rem, 3vh, 2rem);
}


.otter pre,
div.fish pre {
    white-space: pre;
}


span.energy {
    background-color: lime;
}

span.new {
    background-color: yellow;
}
div.fish {
    text-align: center;
    font-size: clamp(0.2rem, 0.75vw, 0.4rem);
    padding: 1rem;
    background-color: black;
    border: 2px lime dotted;
    overflow: hidden; /* clips anything that goes outside */
    width: 100%;
}

div.fish pre {
    white-space: pre;
    overflow: hidden; /* clips the ASCII if it's too wide */
    width: 100%;
    margin: 0; /* remove any default margins */
}

a.fish-tank {
   
    text-decoration: none; 
    cursor: pointer;
}

a.fish-tank:visited {
    text-decoration: none;
}

span.fish {
    color: lime;
}