styles.css

body {
    background: #222;
    color: #DDD;
    font-size: 12px;
    text-align: center;
    font-family: 'Josefin sans';
}

h1 {
    text-decoration: underline;
    font-variant: small-caps;
}

#bingo-card {  
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px 2px;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center stretch;
    justify-items: center stretch;
    grid-template-areas:
      ". . . . ."
      ". . . . ."
      ". . free . ."
      ". . . . ."
      ". . . . .";
    padding: 10px;
}
  
.square {  
    background: #555;
    padding: 10px;
    margin: 2px;
    text-align: center;
    display: grid; 
    grid-auto-flow: column; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3, auto); 
    gap: 2px 2px; 
    grid-template-areas: 
        "header"
        "body"
        "reference"; 
    justify-content: center; 
    justify-items: center; 
    align-items: center; 
    position: relative;
    aspect-ratio: 1 / 1;
}
  


.square * {
    flex: 1 0 100%;
}

.square h1 {
    font-size: 1.2em;  
    align-self: start;
    grid-area: header;
}

.info-button {
	position: absolute;
	bottom: 10px;
	z-index: 300;
	right: 10px;
	font-size: 1.3em;
	color: rgb(252, 165, 52);
	border: 1px solid rgb(252, 165, 52);
	width: 1em;
	border-radius: 25%;
	height: 1em;
	font-weight: 300;
	opacity: .4;
    transition:all .3s linear;
    cursor:pointer;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.info-button:hover {
    opacity: 1;
    transition:all .3s linear;
}

.square.show-info .info-button {
    border-color: #555;
    color: #555;
    background-color: rgb(252,165,52);
}

.square .desc {
    font-style: italic;
    font-weight: 300;
    opacity: 0;
    cursor:default;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    grid-area: body;
}

.square .subheading {
    grid-area: body;
    opacity: 1;
    cursor:default;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 1;
    transition: all .6s linear;
}

.square .tooltip {
    grid-area: body;
    cursor:default;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0;
    transition: all .6s linear;
}

.square .reference {
    margin-top: 1.3em;
    color: #AAA;
    align-self: end;
    grid-area: reference;
    opacity: 0;
    transition: all .6s linear;
}

.free-square {
    grid-area: free;
}

.square.marked {
    background-color: rgb(252, 165, 52);
    color: #222;
}

.square.marked .desc {
    opacity: 1;
    transition: all 1s .5s ease-in;
}

.square.marked .subheading {
    opacity: 0;
}

.square.marked .reference {
    visibility: hidden;
}

.square.show-info .tooltip, .square.show-info .reference {
    opacity: 1;
    transition: all .6s linear;
}

.square.show-info .subheading {
    opacity: 0;
    transition: all .6s linear;
}

.square.marked.show-info .desc {
    opacity: 0;
    transition: all .6s linear;
}

.square.marked .info-button {
    border-color: #555;
    color: #555
}

/* options */
ul#options {
    padding:0;
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 50%;
    margin: 0 auto;
}

#options > li, #options > li > label {
    display: block;
    flex: 1 0 100%;
    cursor : pointer;
    width: auto;
    text-decoration : underline;
}

#options li:hover, #options label:hover {
    text-decoration : none;
}

#options #file-list {
	width: 100%;
	background: #333;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	margin-top: 10px;
    gap: 6px;
    flex-wrap: wrap;
}

#options #file-list .hidden {
    display:none;
}

#options #file-list li {
    list-style: none;
}



#options .token {
	text-decoration: unset;
	margin-top: 0px;
	color: #888;
	display: flex;
	align-items: center;
    justify-content: center;
    background-color: #222;
    padding: 4px;
    border-radius: 5px;
    border: 1px solid #888;
    cursor:default;

}

#options .faux.token {
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
}

#options .faux.token:hover {
    border-color: rgb(252, 165, 52);
    color: rgb(252, 165, 52)
}

#options .clear-file {
    margin: 0 5px 0 0;
    font-size: .6em;
    padding: 3px;
    background: #555;
    color: #DDD;
    border-radius: 2px;
    aspect-ratio: 1 /1;
    width: 1em;
    font-family: 'josefin sans';
    font-weight: bold;
    cursor: pointer;
  }



/* footer */

footer {
    position:sticky;
    top:100vh;
    margin-top: 4em;
    padding-bottom:2em;
    width:100vw;
	font-size: 10px;
}

footer ul {
	display: flex;
	justify-content: center;
	list-style: none;
	gap: 30px;
	font-family: 'helvetica';
	flex-wrap: wrap;
	padding: 0 15px;
}

footer a, footer a:visited {
    color: ghostwhite
}

footer ul li label {
    text-decoration: underline;
    cursor: pointer;
}

@media screen and (max-width: 1000px) {
    body {
        font-size: 20px;
    }
    
    h1 {
        font-size: 3em;
    }



    ul#options {
        font-size: 2em;
        width: 100%;
        margin: 0 8px;
    }

    #options li {
        background: #444;
        margin: 4px ;
    }

    #options #file-list {
        padding: 20px
    }

    #options .token {
        font-size: .5em;
        margin-top: 8px
    }

    .square {
        aspect-ratio: 1 / 1;
        font-size: 16px;
    }

    .square h1 {
        font-size: 1.4em;
        grid-area: body;
        align-self: center;
        text-decoration: none;
    }

    .square .reference {
        margin-top: 0;
    }

    .square .subheading {
        display: none;
    }

    .square.marked .desc {
        display: none;
    }

    footer {
        font-size: 1em;
    }
}