*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
}

body{
    height:100vh;
    background-image: linear-gradient(60deg, #ff00aa, #0f00ff);
}

.container{
    background-color:#f1f1f1;
    border: 2px solid #fff;
    width:512px;
    padding: 50px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
    border-radius:10px;
    box-shadow: 0 30px 50px rgba(0,0,0,0.35);
}

.container *:not(i){
    font-family: 'Courier New', Courier, monospace;
}

.text{
    font-size:14px;
    margin:10px;
    height:50px;
    text-align:center;
    border-radius:10px;
    border:2px solid #fff;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}

.colors{
    margin-top: 25px;
    width:100%;
    display:flex;
    justify-content: space-around;
}

input[type="color"]{
    -webkit-appearance: none;
    background-color: transparent;
    width:100px;
    height: 50px;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch{
    border-radius: 30px;
    border:none;
}

.buttons{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin:30px 0;
    
}

.buttons button{
    height:35px;
    width:35px;
    background-color:transparent;
    border:2px solid #a0a0af;
    color:#505050;
    cursor: pointer;
    border-radius: 10px;
}

.rotate-icon i{
    transform: rotate(45deg);
}

.buttons .active{
    border: none;
    background-color: #4f00ff;
    color:#ffffff;
}


.output{
    background-color: transparent;
    border-radius: 10px;
    color:#000;
    font-weight: 700;
    border: 1px solid #fff;
}

#code{
    width: 100%;
    resize: none;
    color:#000;
    padding:10px 20px;
    background-color:transparent;
}

#copy{
    font-size:12px;
    background-color:#4a6ee0;
    color:#ffffff;
    position:relative;
    left:85%;
    bottom:10px;
    border-radius: 3px;
    padding:5px;
    cursor: pointer;
}