* {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#container-square{
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -2px;
    border-radius: 0.9em;

    max-width: 70vw;
    max-height: 64vh;
    padding: 2em 2em 1.5em 2em;
    font-weight: 600;

    transform: translate(-50%, -50%);
    position: absolute;
    top: 55%;
    left: 50%;  
    
    display: grid;
    justify-content: center;
}

.container-slider{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 2.2em;
}

label{
    font-size: 1.5em;
}

.container-result{
    width: 100%;
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 1em;
}

input[type="range"] {
    width: 100%;
}

input[type="text"] {
    background-color: #ebeaea;
    padding: 1.2em 0.5em;
    font-weight: 400;
    text-align: center;
}

input[type="text"], button {
    font-size: 1em;
    border-radius: 0.5em;
    border: none;
    outline: none;
}

input[type="text"]::selection {
    background-color: transparent;
}

#copy-btn{
    min-width: 55px;
}