* {
    box-sizing: border-box;
}

body{
    background-color:grey;
    transition: 2s;
    padding:0;
    /* display:flexbox; */
}

body.color{
    background-color:aqua;
}
button{
    transition: 2s;
    border-radius: var(--radius);
}
button.color{
    background-color: lime;
}
.left{
    background-color: rgb(173, 166, 166);
    left:0px;
    width:20vw;
    height:100vh;
    margin:0;
    border:2px solid;
    align-items: center;
    border-radius: var(--radius);
}

.right{
    right:0;
    width:80vw;
    height:100vh;
    position: absolute;
    top:0;
}

.buttonspace{
    width:100%;
    height:25%;
    border:2px solid;
    align-items: center;
    margin:auto;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 2s;
    border-radius: var(--radius);
}

.buttonspace.color{
    background-color: darkorange;
}

#hello{
    position: absolute;
}

.hellomessage{
    position:absolute;
    width:fit-content;
    height:fit-content;
    left:50%;
    top:50%;
    border: 1px solid;
    transition: 1s;
    animation: spin 5s infinite linear;
    animation-play-state: paused;
    border-radius: var(--radius);
}
.helloClone{
    position: relative;
    width:fit-content;
    height:fit-content;
    border:2px solid;
}

.hellomessage.spin{
    animation-play-state: running;
}


:root{
    --radius: 0;
}

@keyframes spin{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}