/* space-grotesk-latin-wght-normal */
@font-face {
  font-family: 'Space Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/space-grotesk:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* rubik-latin-wght-normal */
@font-face {
  font-family: 'Rubik Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/rubik:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


:root {
    --bg-gray: #c6c6c6;
    --bg-white: rgb(245, 245, 245);
    --logo-blue: #106ecc;
    --bg-light-gray: #eaeaea;
    --secondary-color: #666666;
    --danger-red: #ef4444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik Variable', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk Variable', sans-serif;
}

body {
    background-color: var(--bg-gray);
}

.ph {
    font-weight: bold;
}

.btn {
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-primary {
    background-color: var(--logo-blue);
}

.btn-secondary {
    background-color: transparent;
    border: dashed 1px #444;
    color:black;
}

.btn-danger {
    background-color: var(--danger-red);
}

.btn-icon {
    background-color: transparent;
    border: none;
    padding: 6px;
    font-size: 1.2rem;
    cursor: pointer;
}

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

input[type="color"] {
  appearance: none;
}
input[type="color"]::-moz-color-swatch {
  border: none;
}

a {
    text-decoration: none;
}