.gradientCard{display:flex;aspect-ratio:1/1.3;flex-direction:column;align-items:center;justify-content:center;border-radius:32px;flex:1 1;transition:.3s;position:relative;overflow:hidden;max-height:400px}@media screen and (max-width:768px){.gradientCard{aspect-ratio:1/1.5;width:128px;height:100%;border-radius:24px}}.gradientCard:hover{transform:scale(1.025)}.gradientCard:hover .lockButton,.gradientCard:hover .removeButton{background-color:hsla(0,0%,100%,.6)!important}.gradientCard:hover .lockButton img,.gradientCard:hover .removeButton img{filter:invert(1)}.gradientCard .gradientBox{width:100%;height:100%;cursor:pointer;z-index:0}.gradientsContainer{margin-top:-32px}.gradientsContainer .gradients{display:flex;justify-content:space-between;align-items:center;width:80vw;position:relative;gap:32px}@media screen and (max-width:768px){.gradientsContainer .gradients{gap:16px}}.gradientsContainer .generateGradientsButton{background-color:var(--color-palette-generator-main);color:#fff;padding:20px 16px;border-radius:8px;cursor:pointer;transition:.3s;width:100%;font-size:1.25rem;font-weight:600;text-align:center;margin-top:24px}.gradientsContainer .generateGradientsButton:hover{scale:1.025}.paletteViewColourComponent{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 0;flex:1 1;border-radius:8px;cursor:pointer}.paletteViewColourComponent:first-of-type{flex:6 1}.paletteViewColourComponent:nth-of-type(2){flex:4 1}.paletteViewColourComponent:last-of-type{flex:1 1}.sortableList{display:flex;gap:10px;list-style:none;width:80vw}.examplesContainer{width:80vw;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;margin-top:-32px}.examplesContainer .examplesContainerHorizontal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;height:100%;gap:32px}.examplesContainer .examplesContainerHorizontal svg{width:auto;height:auto;flex:1 1}.contrastDropArea{display:flex;justify-content:center;align-items:center;flex:1 1;border-radius:8px;transition:all .3s;max-width:120px;max-height:120px;width:120px;height:120px;background-color:#e0e0e0}.contrastDropArea p{font-size:16px;font-weight:700;text-align:center}.contrastColoursList{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-top:-48px}.contrastColour{width:80px;height:80px;border-radius:4px;cursor:-webkit-grab;cursor:grab}.contrastColourDropAreas{width:100%;height:120px;transition:all .3s;margin-top:-40px}.contrastColourDropAreas,.contrastResult{display:flex;justify-content:center;align-items:center;gap:32px}.contrastResult{flex-direction:column;width:80vw;margin-top:-32px}.contrastResult .contrastScore{font-size:32px;font-weight:600;border:4px solid;border-radius:8px;padding:32px}.contrastResult .contrastScore sub{font-size:16px;font-weight:500;vertical-align:baseline}.contrastResult .wcagLevels{width:100%}.contrastResult .wcagLevels,.contrastResult .wcagLevels .level{display:flex;justify-content:center;align-items:center;gap:16px}.contrastResult .wcagLevels .level{flex-direction:column;width:160px;padding:16px;border-radius:8px;background-color:#f5f5f5}.contrastResult .wcagLevels .level p{font-size:16px;font-weight:600;white-space:nowrap;text-align:center}.contrastResult .wcagLevels .level p span{opacity:.75}.contrastResult .wcagLevels .level .result{display:flex;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px;border-radius:8px}.contrastResult .wcagLevels .level .result p{font-size:16px;font-weight:600}.contrastResult .textsTest{display:flex;justify-content:center;align-items:center;gap:16px;flex-direction:column;width:100%;padding:64px 0;border-radius:8px}.contrastResult .textsTest p{font-size:48px;text-align:left;width:50%;white-space:nowrap}@media screen and (max-width:768px){.contrastResult .textsTest p{width:85%}}.contrastResult .textsTest p:first-of-type{font-size:3vw;font-weight:700}@media screen and (max-width:768px){.contrastResult .textsTest p:first-of-type{font-size:4.25vw}}.contrastResult .textsTest p:nth-of-type(2){font-size:1.75vw;font-weight:600}@media screen and (max-width:768px){.contrastResult .textsTest p:nth-of-type(2){font-size:2.75vw}}.contrastResult .textsTest p:nth-of-type(3){font-size:1.2vw;font-weight:600}@media screen and (max-width:768px){.contrastResult .textsTest p:nth-of-type(3){font-size:1.75vw}}.contrastResult .textsTest p:last-of-type{font-size:.8vw;font-weight:500}@media screen and (max-width:768px){.contrastResult .textsTest p:last-of-type{font-size:1.25vw}}.share{flex-direction:column;gap:16px;width:80vw}.share,.share button{display:flex;align-items:center;justify-content:center}.share button{width:100%;background-color:#fff;padding:16px;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.04);transition:all .2s;cursor:pointer;background:linear-gradient(90deg,#d4d4d4 5%,#fff 0,#fff 95%,#d4d4d4 0)}.share button.wp{background:linear-gradient(90deg,#00de0f 5%,#fff 0,#fff 95%,#00de0f 0)}.share button.telegram{background:linear-gradient(90deg,#33a8d7 5%,#fff 0,#fff 95%,#33a8d7 0)}.share button.x{background:linear-gradient(90deg,#000 5%,#fff 0,#fff 95%,#000 0)}.share button.linkedin{background:linear-gradient(90deg,#0270ac 5%,#fff 0,#fff 95%,#0270ac 0)}.share button.facebook{background:linear-gradient(90deg,#1674eb 5%,#fff 0,#fff 95%,#1674eb 0)}.share button:hover{scale:1.02}.share button div{width:128px;display:flex;align-items:center;justify-content:flex-start;gap:8px}.share button div img{width:24px;height:24px}.share button div p{font-size:1.25rem;font-weight:600;white-space:nowrap;color:#000}