style.css

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

body{

    font-size: 1.5rem;
    color: rgba(58, 37, 37, 0.5);
    background-image: linear-gradient(to right, #ec69d4, #58eeb5);
}
h1{
    font-family: 'Montserrat', 'Times New Roman';
    text-transform: uppercase;
    font-weight: 800;
    margin: 17px;
    user-select: none;
}

.center{
    text-align: center;
    margin-top: 25vh;
}
input{ 
    width: 75px;
    /* border-style: none; */
    border-color: rgba(58, 37, 37, 0.5);
    transition-duration: 0.5s;
}

input:focus-visible {
    outline: none;
    box-shadow: 2px 2px 2px 2px rgba(58, 37, 37, 0.5);
}

input:hover{
    /* border-width: 2px; */
    box-shadow: 2px 2px 2px 2px rgba(58, 37, 37, 0.5);
}
input::-webkit-color-swatch:hover
{
    /* box-shadow: 2px 2px 2px 2px rgb(209, 57, 171); */
}

#colour1{
    margin-left: 100px;
}
p{
    margin: 17px;
}

.relative{
    position:relative;
}

.merged{
    display: flex;
    justify-content: center;
    align-items: center;        /*if not done, default is stretch and copy button stretches*/
}

.copy{
    background: none;
    /* color: rgba(58, 37, 37, 0.5); */
    border: 1px solid rgba(58, 37, 37, 0.5);
    border-radius: 5px;
    padding: 5px 7px;
    margin-left: 10px;
    cursor: pointer;
    transition-duration: 0.5s;
}

/* .copy:hover{
    border-color: blue;
    background: white;
} */

.tooltip
{
    font-family: 'Montserrat', 'Times New Roman';
    font-size: 0.9rem;
    /* font-weight: bold; */
    color: white;
    background-color: rgba(58, 37, 37, 0.5);
    line-height: 2rem;
    padding: 0px 5px;
    border-radius: 5px;

    visibility: hidden;
    position:absolute;
    bottom: 50px;
    left: -25px;
    right: -27px;
}

.tooltip::after{
    content: "";
    position: absolute;
    top:32px;
    right: 37px;

    border-style:solid;
    border-width: 9px;
    border-color: rgba(58, 37, 37, 0.5) transparent transparent transparent;
}

/* .copy:hover, .tooltip{
    visibility: visible;
} */                /*do with javascript*/

.randomise, .stop{
    font-family: 'Sans-serif';
    font-size: 1.2rem;
    font-weight:500;
    color: white;
    background-color:rgba(58, 37, 37, 0.5);
    border:2px solid rgba(58, 37, 37, 0);
    border-radius: 5px;
    /* padding: 7px ; */
    cursor: pointer;
    
    transition-duration: 0.5s;
    position: relative;
    bottom: 1px;
    margin: 0px 5px;
}
.randomise:hover, .stop:hover{
    color:rgb(17 112 104);
    background-color: #ffffffc7;
}
.randomise:active, .stop:active{
    background-color: white;
}

/* linear-gradient(to right, #c0e4de, #dbab54) */