@import './buttons.css';


body
    {
        background-color: #26B4BC;
        font-family: Arial, Helvetica, sans-serif;
    }

    .wrapper {
        max-inline-size: 900px;
        margin: auto; 
    }
    
    .player {
        margin-block-start: 100px;
        position: relative;
    }

    .player video{
        inline-size: 100%;
        aspect-ratio: 16/9;
        vertical-align: middle;
        object-fit: cover;
    }

    .player-title {
        color: white;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 20px;
    }

    .player-actions {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px; 
        /*z-index: 2;*/

    }

    .player-progress {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        display: flex;
        padding: 10px
    }

    .player-progress input {
        flex: 1;
    }

    .player-overlay{
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: .6s opacity;
    }
    .player:hover .player-overlay{
        opacity: 1;
        
    }