harupios/css/style.css

:root {
    --bg-color: #a1c6e0;
    --txt-color: #1d4058;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position-y: 10%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div {
    position: absolute;
    border-radius: 1vh;
    padding: 1vh;
    background-color: var(--bg-color);
    color: var(--txt-color);
    text-align: center;
}

div .header {
    height: 3vh;
    background-color: var(--txt-color);
    color: var(--bg-color);
    margin: -1vh;
    padding: 1vh;
    border-top-left-radius: 1vh;
    border-top-right-radius: 1vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab;
}

div img {
    max-height: 40vh;
    border-radius: 1vh;
}

div a {
    text-decoration: underline dashed 2px;
    color: var(--txt-color);
}

#topbar-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 1vh;
    left: 1vh;
    right: 1vh;
    height: 3vh;
    z-index: 1;
}

#dock-div {
    display: flex;
    flex-direction: column;
    top: 16vh;
    left: -9vh;
    bottom: 16vh;
    width: 8vh;
    transition: all 1s;
    z-index: 1;
}

#dock-div:hover {
    left: 1vh;
}

#booklist-div {
    max-width: 20%;
}

#current-book {
    background-color: #dfdfdf;
}

#current-book-metadata {
    line-height: 0;
}

#next-book-btn {
    text-align: left;
}

#previous-book-btn {
    text-align: right;
}

#super-secret-pong-game {
    background-color: #000;
    height: 200px;
    width: 400px;
    overflow: hidden;
}

#super-secret-pong-score {
    position: relative;
    color: #fff;
    top: 4px;
    right: 4px;
    text-align: center;
}

.super-secret-pong-paddle {
    position: relative;
    background-color: #fff;
    height: 32px;
    width: 2px;
}

#super-secret-pong-left-paddle {
    left: 16px;
}

#super-secret-pong-right-paddle {
    left: 382px;
}

#super-secret-pong-ball {
    position: relative;
    background-color: #fff;
    height: 4px;
    width: 4px;
}

.draggable {
    top: 20%;
    left: 20%;
}

.hidden {
    display: none;
}

.btn {
    cursor: pointer;
}

.logo {
    width: 3vh;
}

.dock-icon {
    font-size: 6vh;
    line-height: 0;
}

.closed {
    filter: grayscale(100%);
}