@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Kalam', cursive;
}

:root {
 
    --text: #e1e4f9;
    --background: #070a22;
    --primary-button: #3649d9;
    --secondary-button: #090d2f;
    --accent: #273bce;
    
     /* Step -4: 8.68px → 8.60px */
  --step--4: clamp(0.54rem, calc(0.54rem + -0.01vw), 0.54rem);

  /* Step -3: 10.42px → 10.75px */
  --step--3: clamp(0.65rem, calc(0.65rem + 0.03vw), 0.67rem);

  /* Step -2: 12.50px → 13.44px */
  --step--2: clamp(0.78rem, calc(0.76rem + 0.08vw), 0.84rem);

  /* Step -1: 15.00px → 16.80px */
  --step--1: clamp(0.94rem, calc(0.91rem + 0.16vw), 1.05rem);

  /* Step 0: 18.00px → 21.00px */
  --step-0: clamp(1.13rem, calc(1.07rem + 0.27vw), 1.31rem);

  /* Step 1: 21.60px → 26.25px */
  --step-1: clamp(1.35rem, calc(1.27rem + 0.42vw), 1.64rem);

  /* Step 2: 25.92px → 32.81px */
  --step-2: clamp(1.62rem, calc(1.50rem + 0.62vw), 2.05rem);

  /* Step 3: 31.10px → 41.02px */
  --step-3: clamp(1.94rem, calc(1.77rem + 0.89vw), 2.56rem);

  /* Step 4: 37.32px → 51.27px */
  --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.20rem);

  /* Step 5: 44.79px → 64.09px */
  --step-5: clamp(2.80rem, calc(2.45rem + 1.72vw), 4.01rem);
}

body {
    display: flex;
    flex-direction: column;
    background-color: white;
    color: var(--text);
    font-family: 'Kalam', cursive;
}

/* HEADER */
.header__wrapper {
    font-size: var(--step-4);
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
}


.header__wrapper  button {
    padding: 2px 14px;
    font-size: var(--step-1);
    border: 1px solid;
    color: var(--text);
    background-color: transparent;
    border-radius: 4px;
}

.navigation__bar {
    position: relative;
    bottom: 5px;
}

/* INNER */

.palete {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    margin-top: 10px;
    color: black;
    max-width: 100%;
}

.color1, .color2, .color3, .color4, .color5 {
    min-height: 450px;
    font-family: 'Martian Mono', monospace;
    font-size: var(--step--1);
    border-radius: 1px 1px 2px 2px;
}

.button_space {
    display: flex;
    justify-content: center;
    column-gap: 30px;
    margin-top: 23px;
}

.inner__wrapper  button {
    padding: 8px 20px;
    font-size: var(--step-2);
    border: 2px solid;
    color: var(--text);
    background-color: transparent;
    border-radius: 8px;
    max-height: 64px;
}

.copy__svg{
    width: 30px;
    display: none;
}

.hidden {
    min-width: 300px;
    min-width: 300px;
    background-color: var(--text);
    display: none;
}

@media screen and (max-width: 600px) {
    .color1, .color2, .color3, .color4, .color5 {
        font-size: var(--step--3);
    }

    .button_space {
        position: relative;
        top: 30px;
    }
}

.footer__wrapper {
    text-align: center;
    position: relative;
    margin-top: 60px;
    margin-bottom: 10px;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.logo {
    height: 42px;
}