body {
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    width: 100%;
    height: 140vh;
    overflow-x: hidden;
    overflow-y: auto;
}

#test-box {
    width: 10rem;
    height: 20rem;

    position: absolute;
    top: 3rem;
    left: 10%;
}

#test-box-2 {
    width: 20rem;
    height: 15rem;

    position: absolute;
    right: 20%;
    bottom: 10%;
}

#test-text {
    font-size: 50rem;
    margin-left: 50%;
    margin-top: 10rem;
}

/* #test-text:hover{
    font-size: 50rem;
    margin-top: 20rem;
} */

#circle {
    width: 20rem;
    height: 20rem;
    position: absolute;
    left: 15%;
    bottom: 15%;
    border-radius: 50%;
}

#cursor {

    position: fixed;
    pointer-events: none;
}

#cursor>.meta-box-rounded:nth-child(2) {
    position: absolute;
    top: -1rem;
    left: -4rem;
    width: 8rem;
    height: 2rem;
}

#cursor>.meta-box-rounded:nth-child(1) {
    position: absolute;
    top: -4rem;
    left: -1rem;
    width: 2rem;
    height: 8rem;
}


/*
Sandbox controlls
*/

.container-sliders {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.slider {
    font-family: 'Roboto';
    font-size: 1rem;
    border: 0.1rem solid black;
    padding: 0.5rem;
}

.slider>input {
    width: 18rem;
}

.slider>div {
    display: grid;
    grid-template-columns: auto auto;
}

.slider-value {
    width: 100%;
    text-align: right;
}

#colors {
    font-size: 1rem;
    padding: 0.5rem;
}