index.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --clr-bg: #1F2937;
    --clr-text: #FFF;
    --clr-btn: #3D4B60; /*  rgb(61,75,96)  */
    --clr-btn-hover: rgba(89,111,145,0.7); /* rgb(89,111,145)*/
    --clr-border: #FFF;
    --clr-outline: #4A699B;
    --clr-highlight: #4A699B;
    
    --font-main: 'Nunito', sans-serif;
    --font-title: 'Pacifico', sans-serif;
}

.light-theme {
    --clr-bg: #F5F5F5;
    --clr-text: #333;
    --clr-btn: #FFF; /*  rgb(61,75,96)  */
    --clr-btn-hover: #FFF; /* rgb(89,111,145)*/
    --clr-border: lightgrey;
    --clr-outline: #C8DAF9;
    --clr-highlight: #B9ECF9;
}


/* TYPOGRAPHY */
h1 {
    font-family: var(--font-title);
    font-size: 40px;
    font-weight: normal;
    color: var(--clr-text);
}

input,
select,
button,
option,
p,
span {
    font-family: var(--font-main);
    font-weight: 400;
    letter-spacing: 0.5px;
}

p {
    text-align: center;
    color: var(--clr-text);
}

.hint {
    margin-top: 20px;
    font-style: italic;
    font-size: 14px;
    opacity: 0.7;
}



/* LAYOUT */
header {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px 20px;
    align-items: center;
    background-color: var(--clr-bg);
}

.theme-btns-container {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
}

.inputs-container {
    width: 100%;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "clr scheme"
                        "btn btn";
    align-items: center;
}

.palette {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 281px);
}



/* COMPONENTS - HEADER */
.theme-switch {
    border: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--clr-text);
    opacity: 0.9;
}

.theme-switch:hover{
    transform: scale(1.2);
    text-shadow:
        1px 1px 5px var(--clr-highlight),
        -1px 1px 5px var(--clr-highlight),
        -1px -1px 5px var(--clr-highlight),
        1px -1px 5px var(--clr-highlight);
}

.input {
    height: 55px; 
    border-radius: 6px;
}

select, input:not(.clr-input) {
    border: var(--clr-border) solid 2px;
    border-radius: 6px;
    padding: 0.5em;
    background-color: var(--clr-bg);
    color: var(--clr-text);
}

.input:hover,
.input:focus,
.input:active
 {
    font-weight: 700;   
    outline: solid var(--clr-outline) 5px;
    border: 2px solid var(--clr-border);
}

#clr-input {
    width: 100%; 
    padding: 0 2px;
    border-radius: 6px;
    grid-area: clr;
    min-width: 100px;
}

#clr-input-text {
    grid-area: clr;
    z-index: 2;
    color: var(--clr-text);
    pointer-events: none;
    letter-spacing: 1.75px;
    font-weight: 600;
}

#clr-input:hover ~ #clr-input-text {
    font-weight: 800;
}

.scheme-select {
    grid-area: scheme;
    border-radius: 6px;
    background-color: var(--clr-bg);
    color: var(--clr-text);
}

.get-scheme-btn {
    grid-area: btn;
    width: 100%;
    padding: 15px 25px;
    border-radius: 6px;
    background-color: var(--clr-btn);
    color: var(--clr-text);
    border: 2px solid var(--clr-border);
}

.get-scheme-btn:hover,
.get-scheme-btn:focus,
.get-scheme-btn:active {
    background-color: var(--clr-btn-hover);
}



/* COMPONENTS - PALETTE */
.clr {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
    justify-content: end;
    position: relative;
}

.clr-hex-code {
    width: 100px;
    padding: 10px;
    background-color: var(--clr-bg);
    border-radius: 6px;
    opacity: 0.8;
    margin: 10px;
    letter-spacing: 1.2px;
}

.clr-hex-code:hover {
    opacity: 1;
    transform: scale(1.08);
    font-weight: 600;
    letter-spacing: 1.5px;
}

div > span {
    visibility: hidden;
    position: absolute;
    bottom: 50px;
    right: 12px;
    text-align: center;
}

.copied {
    visibility: visible;
    animation: copied 0.65s linear 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes copied {
    0% {
        opacity: 100%;
        bottom: 50px;
    }
    50% {
        opacity: 75%;
        bottom: 65px;
    }
    100% { 
        opacity: 0%;        
        bottom: 80px;
    }
}


/* MEDIA QUERIES */
@media (min-width: 600px) {
    header {
        padding: 0 25px 25px 25px;
    }
    
    h1 {
        font-size: 50px;
        margin-bottom: 25px;
    }

    .inputs-container {
        max-width: 800px;
        grid-template-columns: 1fr 2fr 1fr; 
        gap: 25px;
        grid-template-areas: "clr scheme btn";
    }

    .scheme-select {
        padding: 0.85em 0.5em;
    }

    .get-scheme-btn {
        min-width: max-content;
        padding: 15px 25px;
    }

    .palette {
        flex-direction: row;
        width: 100%;
        height: calc(100vh - 232px);
    }

    .clr {
        width: 100%;
        overflow: hidden;
        align-items: center;
        flex-direction: column;
        justify-content: flex-end;
        gap: 0;
    }
    
    .clr-hex-code {
        width: 100%;
        border-radius: 0;
        margin: 0;
        padding: 15px 0;
    }
    
    .clr-hex-code:hover {
        transform: scale(1.0);
    }
    
    div > span {
        position: relative;
        bottom: 0;
        right: 0;
    }

    @keyframes copied {
        0% {
            opacity: 100%;
            bottom: 0px;
        }
        50% {
            opacity: 75%;
            bottom: 30px;
        }
        100% { 
            opacity: 0%;        
            bottom: 60px;
            }
    }  
}

/* Additional media queries for particularly small screens */
@media (max-width: 375px) {
    .theme-btns-container {
        flex-direction: column;
    }
    
    .theme-switch {
        width: 35px;
        height: 35px;
    }
    
    .inputs-container {
        max-width: 800px;
        grid-template-columns: 1fr; 
        gap: 15px;
        grid-template-areas: 
            "clr"
            "scheme"
            "btn";
    }
    
    .input {
        height: 45px; 
        border-radius: 6px;
        text-align: center;
    }
    
    button {
        line-height: 0;
    }
}

@media (max-height: 750px) {
    .clr {
        align-items: center;
    }
}