#page-container{
    position: absolute;
    width:1400px;
    height:650px;
}
#page1{
    left:0;
    position: relative;
    width:1400px;
    height:650px;
    border-radius:50px 50px 50px 50px;
    background-color:gray;
    z-index:2;
}
#page2{
    position: absolute;
    display: block;
    top:0px;
    width:1400px;
    height: 650px;
    background-color: gray;
    border-radius: 50px 50px 50px 50px;
    z-index:1;
}
#wrapper{
    position: absolute;
}
#c{
    position: relative;
    width:1300px;
    height:500px;
    left:50%;
    transform: translateX(-50%);
}
#textcanva-wrapper{
    position: relative;
    left:50%;
    transform: translateX(-50%);
    top:0px;
    width:1300px;
    height:500px;
}
#textcanva-wrapper *{
    position: absolute;
    left:0px;
    top:0px;
    width:1300px;
    height:500px;
}
#right-arrow-wrapper,#left-arrow-wrapper{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width:20px;
    height:40px;
    z-index:3;
}
#right-arrow-wrapper{
    right:20px;
}
#left-arrow-wrapper{
    left:20px;
}
body{
    display: flex;
    justify-content: center;
}
.button-wrapper{
    position: relative;
    display:flex;
    align-items:center;
    justify-content: space-evenly;
    position:relative;
    left:0;
    width:1300px;
    top:20px;
}
#startpauseb,#startpause,#mode,#reset{
    position: relative;
    top: 0px;
    left:0px;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: #4CAF50; /* Green */
    color: white;
    font-size: 16px;
    border: none;
}
#startpauseb:hover,#startpause:hover,#mode:hover,#reset:hover{
    background-color: #45a049; /* Darker green on hover */
}
#startpauseb:active,#startpause:active,#mode:active,#reset:active{
    background-color: #3e8e41; /* Even darker green on click */
}