body{
    margin: 0;
    background: #f1f1f1;
    font-family: Helvetica, sans-serif;
    padding: 0 2em;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    display: flexbox;
}



.pallete button{
    outline: none;
    border: none;
    padding: 0.7em 2em;
    font-size: 1.1em;
    border-radius: 2em;
    background-color: #1f1f1f;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s;
    left: 45%;
    display: inline-block;
    margin-left: 1.5em;

    /*
    position: absolute;
    top: -1em;
    transform: translateX(-50%);
    
    
    */
}

.pallete button:hover{
    background: #fff;
    color: #1f1f1f;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.pallete-header{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: #fff;
    width: 75%;
    min-height: 12em;
    border-radius: 20px;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #1f1f1f;
    padding: 3em;
}

.pallete-header h1{
    font-style: normal;
    font-size:  3em;
    align-items: center;
    text-align: center;

    background: linear-gradient(0deg, rgba(228, 87, 46, 0.9), rgba(228, 87, 46, 0.9)), linear-gradient(90deg, #E14FAD 1.04%, #E14FAD 59.9%, #F9D423 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.pallete{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 5em;
    background: #fff;
    width: 45em;
    height: 25em;
    border-radius: 20px;
    box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #1f1f1f;
    padding-top: 3em;
}



.colors{
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-y: hidden;
    height: 100%;
    border-radius: 20px;
}

.colors > div {
    width: 25%;
}

.color{
    background: #ccc;
    height: 17em;
    width: 100%;
}

.colors h4{
    font-size: 0.9em;
}

.fade-in{
    opacity: 0;
    animation: fadeIn 0.4s ease-in;
}

.footer {
    position: fixed;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(0deg, rgba(228, 87, 46, 0.9), rgba(228, 87, 46, 0.9)), linear-gradient(90deg, #E14FAD 1.04%, #E14FAD 59.9%, #F9D423 100%);
    color: white;
    text-align: center;
 }

@media screen and (max-width: 700px) {
    body {padding: 5em;}
    .pallete{height: initial; width: 100%;}
    .pallete button{margin-top: 2em;}
    .colors {flex-direction: column;}
    .colors > div {width: 100%;}
}

@keyframes fadeIn{
    to {opacity: 1;}
}

@media print{ 
    body{margin:1in;}
    .pallete{width: 100%; height:10%}
    .pallete button{display: none;}
    .colors {flex-direction: column;}
    .colors > div {width: 100%; margin: 0;height: 3em;}
    .color {display: none;}
    
}