#presentation-mode-buttons {
    position: absolute;
    z-index: 10007;
    bottom: -56px;
    color: white;
    margin: auto;
    text-align: center;
    width: 100%;
    display: none;
    top: initial;
}

@media (min-width: 813px) {
    .presentation-mode {
        margin: auto;
        border-top: 30px solid #636363;
        border-left: 20px solid #7b7b7b;
        border-right: 20px solid #545454;
        border-bottom: 80px solid #616161;
        border-radius: 15px;
        box-shadow: 3px 3px 7px gray;
        box-sizing: border-box;
        overflow: scroll;
    }
    .presentation-mode #presentation-mode-buttons {
        display: initial;
    }
    /* smart phone */
    .presentation-mode.smartphone.portrait {
        width: 428px;
        height: 786px;
    }
    .presentation-mode.smartphone.landscape {
        width: 786px;
        height: 428px;
    }
    /* tablet */
    .presentation-mode.tablet.portrait {
        width: 768px;
        height: 1024px;
    }
    .presentation-mode.tablet.landscape {
        width: 1024px;
        height: 768px;
    }
    /* laptop */
    .presentation-mode.laptop.portrait {
        width: 768px;
        height: 1366px;
        margin: 32px auto;
    }
    .presentation-mode.laptop.landscape {
        width: 1366px;
        height: 768px;
    }
    /* tv */
    .presentation-mode.tv.portrait {
        width: 1080px;
        height: 1920px;
        margin: 32px auto;
    }
    .presentation-mode.tv.landscape {
        width: 1920px;
        height: 1080px;
        margin: 32px auto;
    }
}