/*reset*/
*{
    padding: 0 ;
    margin: 0 ;
    box-sizing: border-box;
    border: none ;
    outline: none ;
    font-family: "Poppins" , sans-serif ;
}

body{
    height: 100vh ;
    background: linear-gradient(#f7f9fd , #587ef4)
}

.wrapper {
    width:80vmin ;
    background-color: #fff ;
    padding: 50px 30px ;
    border-radius: 8px;
    position: absolute;
    transform: translate(-50% , -50%) ;
    left:  50% ;
    top: 50% ;
    box-shadow: 0 20px 25px rgba(60,60,100,0.15)
}

#output-color{
    width: 100% ;
    height: 35vmin;
    border: 1px solid #000 ;
    border-radius: 8px;
 }

 #output-code{
     background-color: #f1f5fc ;
     font-size: 2.3vmin ;
     font-weight: 400 ;
     color: #3f415f ;
     width: 100% ; 
     padding: 15px 10px ;
     border-radius: 8px;
     margin: 20px 0 40px 0 ;
 }

 .btn-container{
     display: flex ;
     justify-content: space-around ;
 }

 .btn-container button{
     background-color: #587ef4;
     min-width: 40% ;
     padding: 15px 0 ;
     color: #fff ;
     border-radius: 30px ;
     font-size: 2.6vmin;
     font-weight: 500;
     cursor: pointer ;
 }