body{font-family:sans-serif;margin:0}.app-container{display:flex;flex-direction:column;align-items:center;padding:20px;text-align:center}h1{font-size:2.5rem}.description{font-size:14px}.color-box-container{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.color-box{position:relative;max-width:310px;min-width:300px;flex:0 0 calc(33.33% - 20px)}.color-box-link{display:flex;align-items:center;justify-content:center;height:190px;text-decoration:none;font-weight:600;border-radius:2px;padding:10px;box-sizing:border-box;color:#fff}.color-box-link:focus-visible{outline:3px solid #000;outline-offset:3px}.mobile-link-tooltip{display:none;text-align:center;pointer-events:none;position:absolute}@media(max-width:768px){.mobile-link-tooltip{display:flex;align-items:center;justify-content:center;top:0;left:0;width:100%;height:100%}}@media(max-width:1200px){.color-box{max-width:300px;min-width:220px}}@media(max-width:768px){.color-box-container{grid-template-columns:repeat(2,1fr)}.color-box{flex:1 0 calc(33.33% - 20px);max-width:300px;min-width:225px}.color-box-link{height:135px}}@media(max-width:450px){.color-box-container{grid-template-columns:repeat(1,1fr)}.color-box{flex:1 0 calc(50% - 20px);max-width:400px;min-width:275px}.color-box-link{height:170px}}footer{margin-top:40px}