@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

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

body{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    background-color: #f8f7f4;
    min-height: 100vh;
}

.container{
    display: grid;
    grid-template-rows: 1.2fr .8fr .2fr;
    height: 35em;
    width: 32em;
    padding: 1em;
    gap: 1em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, .1);
}

.preview-img{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-img img{
    background-color: white;
    max-width: 100%;
    max-height: 100%;
}

.result{
    position: relative;
}

.result h4{
    position: absolute;
    width: 100%;
    top: 0;
    padding: 10px 0;
    font-size: 1em;
    text-align: center;
    border-bottom: 1px solid #999;
}

.result .color-detail{
    position: absolute;
    top: 44px;
    width: 100%;
    height: calc(100% - 44px);
    padding: 1em 1em 1em 0;
    display: grid; 
    justify-items: center;
    align-items: center;
    grid-template-columns: .5fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 'color rgb'
                         'color hexa';
    border: none;
}

.result .color-detail span{
    position: relative;
    transition: .3s;
    cursor: pointer;
}

.result .color-detail span:hover{
    transform: scale(.99);
}

.result .color-detail span i{
    position: absolute;
    right: 12px;
    top: 50%;
    font-size: 1.2em;
    transform: translateY(-50%);
}

.rgb, .hex{
    /* background-color: red; */
    width: 100%;
    padding: .6em;
    border: 1px solid #999;
    border-radius: 5px;
}

.rgb{
    grid-area: rgb;
}

.hex{
    grid-area: hexa;
}

.color{
    width: 80px;
    height: 80px;
    grid-area: color;
    border-right: 1px solid #999;
    background-color: black;
}

label[for='file']{
    position: relative;
    width: 20em;
    padding: .6em;
    text-align: center;
    align-self: center;
    justify-self: center;
    color: white;
    background-color: black;
    border: 1px solid #999;
    border-radius: 10px;
    transition: .3s;
}

label[for="file"] i{
    position: absolute;
    top: 50%;
    font-size: 1.4em;
    right: 16px;
    transform: translateY(-50%);
}

label[for='file']:hover{
    opacity: .9;
    transform: scale(.95);
}

.upload-file{
    display: none;
}

div{
    border: 1px solid #999;
    border-radius: 5px;
}