html {
-webkit-text-size-adjust: 100%;
}
                body {
                  font-family: "Nunito Sans";
                    color: black;
                    background-color: var(--body-background-color);
                    overflow-x: hidden;
                }
                
                a {
                    all: unset;
                    color: var(--font-hyperlink-color);
                    cursor: pointer;
                }

                [data-title]:hover:after {
    			opacity: 1;
    			transition: all 0.1s ease 0.5s;
    			visibility: visible;
		}
		[data-title]:after {
   			 content: attr(data-title);
   			 background-color: #fffa70;
   			 color: #111;
   			 font-size: 14px;
                         position: absolute;
   			 padding: 1px 5px 2px 5px;
			 top: 100%;
			 bottom: -1.6em;
    			 left: 0;
			 right: 0;
			 margin-inline: auto;
    			 box-shadow: 1px 1px 3px #222222;
   			 opacity: 0;
    			 border: 1px solid black;
   			 z-index: 99999;
    			 visibility: hidden;
			 max-width: 250px;
			 width: fit-content;
			 max-height: fit-content;
		}
		[data-title] {
   			 position: relative;
		}
                form {
                    all: unset;
                }
                @media screen and (max-width: 800px){
                    .box {
                        grid-template-columns: 1fr 1fr;
                    }
                }
                @media screen and (min-width: 800px) and (max-width: 1200px){
                    .box {
                        grid-template-columns: 1fr 1fr 1fr;
                    }
                }