#page-colour{#usage-examples svg{width:24px;height:24px}.colour-name{opacity:0;font-weight:400;line-height:1;width:-moz-fit-content;width:fit-content;text-shadow:0 1px 2px rgba(0,0,0,.2)}.colour-card{cursor:pointer;&:hover{.colour-name{opacity:1;font-weight:700}}}.colour-indicator{width:64px;height:32px}.colour-card[class*=dark]{.colour-name{color:#fff}}.colour-card[class*=light]{.colour-name{color:#000}}#transparent-card{background-size:8px 8px;background-position:0 0,0 0,-4px -4px,4px 4px;background-image:linear-gradient(45deg,#c8c8c8 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c8c8c8 0),linear-gradient(45deg,transparent 75%,#c8c8c8 0),linear-gradient(45deg,#c8c8c8 25%,transparent 0)}#configurator{position:relative}.gradient-bg{z-index:-1;background:linear-gradient(135deg,var(--amber),var(--green),var(--white),var(--purple),var(--red),var(--black));background-size:400% 400%;animation:gradient 15s ease infinite;height:100%;display:block;position:absolute;top:0;left:0;width:100%}}