@import url("https://fonts.googleapis.com/css2?family=Play&display=swap");

body {
background: #1f232a;
letter-spacing: 0.05em;
transition: background 0.5s ease;
font-family: "Play", sans-serif;
}

.seletor-cores {
background: #1f232a;
width: 300px;
border-radius: 8px;
border: 2px solid #364347;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 20px;
}

.painel-row {
position: relative;
margin: 0 10px 10px;
}

.painel-row:first-child {
margin-top: 10px;
margin-bottom: 6px;
}

.painel-row::after {
content: "";
display: table;
clear: both;
}

.Title {
background: #15191c;
padding: 8px;
text-align: center;
font-size: 1.5em;
width: 280px;
}

.Title3 {
background: #15191c;
padding: 8px;
text-align: center;
font-size: 1.3em;
width: 280px;
}

.Title2 {
background: #15191c;
padding: 8px;
text-align: center;
font-size: 1.3em;
width: 280px;
}

.efect-title {
background: linear-gradient(90deg, #00d9ff, #1100ff, rgb(0, 238, 255));
background-size: 400%;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.efect-title2 {
background: linear-gradient(90deg, #ff0000, #ffae00, rgb(255, 0, 119));
background-size: 400%;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.efect-title3 {
background: linear-gradient(90deg, #00ff9d, #1eff00, rgb(0, 255, 200));
background-size: 400%;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.painel-header {
background: #15191c;
padding: 8px;
margin: 0 -10px 10px;
text-align: center;
color: white;
}

.swatch {
display: inline-block;
width: 32px;
height: 32px;
background: #ccc;
border-radius: 4px;
margin-left: 4px;
margin-bottom: 4px;
box-sizing: border-box;
border: 2px solid #364347;
cursor: pointer;
}

.default-swatches {
width: 212px;
}
.default-swatches .swatch:nth-child(6n + 1) {
margin-left: 0;
}

.color-cursor {
border-radius: 100%;
background: #ccc;
box-sizing: border-box;
position: absolute;
pointer-events: none;
z-index: 2;
border: 2px solid #fff;
transition: all 0.2s ease;
width: 15px;
height: 15px;
}

.color-cursor.dragging {
transition: none;
}
.color-cursor#spectrum-cursor {
margin-left: -15px;
margin-top: -15px;
top: 0;
left: 0;
}
.color-cursor#hue-cursor {
top: 0;
left: 600%;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
pointer-events: none;
}
.spectrum-map {
position: relative;
width: 212px;
height: 200px;
overflow: hidden;
cursor: pointer;
}
#spectrum-canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
cursor: pointer;
}
.hue-map {
position: absolute;
top: 5px;
bottom: 5px;
right: 29px;
width: 10px;
cursor: pointer;
}
#hue-canvas {
border-radius: 8px;
position: absolute;
top: 0;
left: 550%;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #ccc;
cursor: pointer;
}

.button {
background: #2a3137;
border: 0;
border-radius: 4px;
color: #ffffff;
font: 1rem;
outline: none;
cursor: pointer;
padding: 4px;
}

button:active {
background: #262c31;
}

.button.eyedropper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 30px;
margin: 10px 0;
border: 1px solid white;
}

.button.add-swatch {
display: block;
padding: 6px;
width: 200px;
margin: 10px auto 0;
border: 1px solid white;
}

.button.mode-toggle {
width: auto;
height: 40px;
border: 1px solid white;
margin-top: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.valor-campos {
display: none;
align-items: center;
}

.valor-campos.active {
display: flex;
}

.valor-campos .campo-label {
margin-right: 6px;
color: white;
}

.valor-campos .campo-input {
background: #15191c;
border: 1px solid white;

box-sizing: border-box;
border-radius: 2px;
line-height: 38px;
padding: 0 4px;
text-align: center;
color: #ffffff;
font-size: 1rem;
display: block;
cursor: pointer;
}

.campos-rgb .grupo-campos {
display: flex;
align-items: center;
}

.campos-rgb .campo-input {
width: 60px;
margin-right: 10px;
cursor: pointer;
}

.campo-hex .campo-input {
width: 170px;
}

.color-indicator {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 20px;
height: 20px;
border-radius: 4px;
background: #ccc;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

.social-container {
display: flex;
flex-direction: row;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.social {
background-color: rgb(0, 0, 27);
transition: transform 0.3s ease-in-out;
border-radius: 100%;
margin: 0 7px;
width: 50px;
height: 50px;
cursor: pointer;
border: none;
}
.social:hover {
transition: all 1s ease-in;
transform: rotateY(360deg);
background: linear-gradient(
360deg,
#ff0000,
rgb(255, 94, 0),
rgb(0, 255, 76),
#008cff,
#001aff
);
}