body{
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
}

#rotating-content {
    left: -700px;
    width: 600px;
    top: 50%;
}

#rotating-menu {
    left: calc(100% + 300px);
    width: 200px;
    color: cornflowerblue;
    font-size: 33px;
    top: 50%;
}

.rotate-content {
    position: absolute;
    top: inherit;
    left: inherit;
    transform-origin: 0% 50%;
    transform: translate(0%, -100%) rotate(var(--rotation)) translateX(var(--distance));
    border-radius: 5px;
    width: 600px;
    display: inline-block;
    overflow-wrap: break-word;
}

.scrollDetect {
    opacity: 10%;
    overflow: scroll;
}

.scrollableContent {
    height: 10000px;
}

#detect-main{
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100%;
}

.footer {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: fixed;
    bottom: -50px;
    left: 0px;
    height: 60px;
    width: 100%;
    background-color: #303030;
    color: #ffffff;
    padding-left: 10px;
    margin: 0px;
    transition: bottom 0.3s ease;
    z-index: 2;
    *{
        padding: 3px;
    }
    a{
        color: #FFFFFF;
    }
}

.footer:hover{
    bottom: 0px;
}