d3
@import url("https://use.typekit.net/otz4gja.css");

body{
font-family: hoss-round, sans-serif;
font-style: normal;
font-weight: 300;
color: #121212;
display: flex;         
flex-direction: row;
margin: 0;
display: flex;
height: 100vh;
    width: 100vw;
padding: 0;
border-bottom: #121212 2px solid;
    }


#p5Canvas{
      border-right: #121212 2px solid;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#left {
  height: 100%;
  flex-shrink: 0; /* don't shrink below width set in JS */
    width: 50%;        /* always half the screen */

  
}

#right {
  flex: 1 auto;           /* allow it to shrink/grow */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;            /* crucial for flex children to shrink on mobile */
  overflow-y: auto;         /* allow scrolling if content is taller than viewport */
  padding: 0px;

}


h1{
   font-size: medium;
  font-weight: 900;
  padding-top: 20px;
  text-align: center;
}

h2{
    font-size: small;
    font-weight: normal;
    display: inline;
}

#bin-card {
    
    min-height: 20vh;
    margin: auto;
    text-align: center;
      
}

#bin_name {
    display: block;
font-family: "waldo-shadow", sans-serif;
font-weight: 400;
font-style: normal;
  font-size: clamp(2rem, 10vw, 25rem);
    line-height: 1; /* tighter spacing */

}

content{
    width: 80vw;
}

footer{
    border-top: #121212 1px solid;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 6px;
    margin-bottom: env(safe-area-inset-bottom);
}

.footer_p{
    display: inline;
    font-size: small;
}

a {
  color: #121212;    /* set text color */
  font-style: italic; /* make italic */
}

/* Optional: hover effect */
a:hover {
  font-style: oblique;
}

/* Base font sizes */
body {
    font-family: hoss-round, sans-serif;
    font-weight: 300;
    color: #121212;
    font-size: 1rem; /* base size for paragraphs and headings */
}

h1 {
    font-size: 1.1rem; /* headline remains larger */
}

h2, p, .footer_p {
    font-size: .7rem; /* all same size */
    font-weight: normal;
}

.key_text {
    font-size: 1.5rem;
    font-weight: 300;
}

/* Mobile adjustments */
@media (max-width: 800px) {
    body {
        font-size: .8rem;
    }

    h1 {
        font-size: .7rem;
    }

    h2, p, .footer_p {
        font-size: .6rem;
        line-height: .5;
    }

    .key_text {
    font-size: .8rem;
}
footer{
    padding-bottom: 40px;
}

}