* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
    background: black;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: auto;
    top: 0px;
    background: black;
}

.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0 );
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

#myBtn {
    width: 200px;
    font-size: 18px;
    font-weight: bolder;
    padding: 10px;
    border: none;
    background: #32a89c;
    color: white;
    cursor: pointer;
}

    #myBtn:hover {
        background: #ddd;
        color: #32a89c;
    }

#myTryBtn {
    width: 200px;
    font-size: 18px;
    font-weight: bolder;
    padding: 10px;
    border: none;
    background: #17bf0b;
    color: white;
    cursor: pointer;
}

    #myTryBtn:hover {
        background: #ddd;
        color: #17bf0b;
    }

#PHBadge {
    opacity: 0.5;
    position: fixed;
    top: 40px;
    //padding:5px;
}
        #PHBadge:hover {
            opacity: 1.0;
        }


#butonlardiv {
    float: left;
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 440px;
    padding: 20px;
    color: white;
    z-index: 1;
}

#mobilbutonlardiv {
    justify-content: left;
    align-items: baseline;
    text-align: left;
    float: left;
    position: relative;
    left: 0px;
    bottom: 0px;
    min-width: 440px;
    padding-top: 30px;
    color: white;
    z-index: 1;
}

@media only screen and (min-width: 769px) {
    #mobilbutonlardiv {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    #butonlardiv {
        display: none;
    }

    #myVideo {
        width: 305vw;
        right: -300px;
    }
    #hbir {
        position: fixed;
        top: 80px;
    }
}

@media only screen and (max-height: 400px) {
    #butonlardiv {
        display: none;
    }

    #mobilbuntolardiv {
        display: unset;
        visibility: visible;
    }
}