:root {
    /*Primary*/
    --strong-cyan: hsl(172, 67%, 45%);
    /*Neutral*/
    --very-dark-cyan: hsl(183, 100%, 15%);
    --dark-grayish-cyan: hsl(186, 14%, 43%);
    --grayish-cyan: hsl(184, 14%, 56%);
    --light-grayish-cyan: hsl(185, 41%, 84%);
    --very-light-grayish-cyan: hsl(189, 41%, 97%);
}

@font-face {
    font-family: 'Space_Mono';
    src: url(./fonts/Space_Mono/SpaceMono-Regular.ttf);
}
body {
    display: grid;
    min-height: 100svh;
    max-width: 100svw;
    margin: 0;
    font-weight: 700;
    font-family: 'Space_Mono';
    background-color: var(--light-grayish-cyan);
    container: body / inline-size;
}

main {
    display: grid;
    place-items: center;
    min-height: 100cqh;
    width: 100cqw;
    container: main /inline-size;
}

 @container (inline-size < 1000px){
    main {
        grid-template-rows: 15svh 1fr auto;
    }
    div[class="attribution"] {
        background-color: white;
        width: 100%;
      }
 }