* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Geist", sans-serif;
}

p {
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 16px;
}

::selection {
      background: #2C2C2C; 
      color: white;     
    }

.contrast-ratio {
    font-family: "Geist Mono", monospace;
    font-size: 12px;
    font-weight: 500;
}

.hex-code {
    font-family: "Geist Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
    
}

a {
  font-optical-sizing: auto;
  font-weight: 400;
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #2c2c2c;
    padding: 1rem 1rem;
    flex-wrap: wrap;
    gap: 1rem;
    opacity: 0; 
    animation: riseAndFade 0.4s ease-out 0.4s forwards;
}

nav > ul {
    list-style: none;
}

nav > p {
    color: #636363;
}

footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    background-color: #2C2C2C;
    color: #ffffff;
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
    height: 30vh;
    animation: riseAndFade 0.4s ease-out 1s forwards;
    flex-wrap: wrap;
}

footer a {
    text-decoration: underline;
    color: #ffffff;
}

footer a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.hero {
    padding: 1rem 1rem;
    height: 70vh;
    display: flex;
    align-items: flex-end;
    color: #636363;
    opacity: 0; 
    animation: riseAndFade 0.4s ease-out 0.6s forwards;
}

.hero-description > p:first-child {
    color: #2c2c2c;
}

.color-palettes {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding: 0 1rem 1rem 1rem;
    opacity: 0; 
    animation: riseAndFade 0.4s ease-out 0.8s forwards;
    transition: transform 0.3s ease, opacity 0.3s ease;

}


.color-item {
    background-color: #2c2c2c;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.contrast-info {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.hex-codes {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.contrast {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #2C2C2C;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 8px;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #2C2C2C;
}

.hex-code:hover .tooltip {
    opacity: 1;
}

#EC1C24 {
    background-color: #EC1C24;
    color: #FDE8E9;
}


#C12F45 {
    background-color: #C12F45;
    color: #F9EAEC;
}

#E0303D {
    background-color: #E0303D;
    color: #FCEAEC;
}

#h932932{
    background-color: #932932;
    color: #F4EAEA;
}

#h8E2324 {
    background-color: #E23242;
    color: #F4E9E9;
}

#D6634A {
    background-color: #D6634A;
    color: #FBEFED;
}

#D15E3A {
    background-color: #D15E3A;
    color: #FAEFEB;
}

#EC5328 {
    background-color: #EC5328;
    color: #FDEEE9;
}

#EC6D2D {
    background-color: #EC6D2D;
    color: #FDF0EA;
}

#E38B33 {
    background-color: #E38B33;
    color: #FCF3EB;
}

#F3D16A {
    background-color: #F3D16A;
    color: #6B1C0D;
}

#ECFA1F {
    background-color: #ECFA1F;
    color: #2F0700;
}

#FBED18 {
    background-color: #FBED18;
    color: #583505;
}

#FAB405 {
    background-color: #FAB405;
    color: #502901;
}

#FFC233 {
    background-color: #FFC233;
    color: #53220D;
}
    
#C4E4BE {
    background-color: #C4E4BE;
    color: #485945;
}


#h384525 {
    background-color: #384525;
    color: #FDFAE2;
}

#h647936 {
    background-color: #647936;
    color: #ECFFD1;
}

#h367259 {
    background-color: #367259;
    color: #F1FFD2;
}

#h8DC540 {
    background-color: #8DC540;
    color: #303E1A;
}

#h21C6E1 {
    background-color: #21C6E1;
    color: #042350;
}

#h73A8EE {
    background-color: #73A8EE;
    color: #062D66;
}

#h008BD8 {
    background-color: #008BD8;
    color: #ECF6FF;
}

#h02AEE8 {
    background-color: #02AEE8;
    color: #001430;
}

#D8EBFB {
    background-color: #D8EBFB;
    color: #062D66;
}

#h035994 {
    background-color: #035994;
    color: #E6EEF4;
}

#h0000FE {
    background-color: #0000FE;
    color: #E5E5FF;
}

#h1A76FF {
    background-color: #1A76FF;
    color: #ECF6FF;
}

#h0F58C9 {
    background-color: #0F58C9;
    color: #E7EEFA;
}

#h0E2072 {
    background-color: #0E2072;
    color: #E7E9F1;
}

#h543B75 {
    background-color: #543B75;
    color: #F8DAFF;
}

#h754799 {
    background-color: #754799;
    color: #EFDBFF;
}

#E682FF {
    background-color: #E682FF;
    color: #462959;
}

#h531699 {
    background-color: #531699;
    color: #F6D2FF;
}

#h513DB8 {
    background-color: #513DB8;
    color: #FFDFEA;
}

#h550E48 {
    background-color: #550E48;
    color: #FCF7F8;
}


@keyframes riseAndFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


@media (min-width: 576px) {
    .color-palettes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .color-palettes {
        grid-template-columns: repeat(4, 1fr);
    }
}