#television-full {
    width: 100%;
}

@media (min-width: 720px) {
    #tv {
        width: 576px;
        position: absolute;
        z-index: -1;
    }

    #tv-display-box {
        width: 576px;
        position: absolute;
        top: 200px;
        z-index: -2;

    
        display: flex;
        justify-content: center;
    }

    #staticbox {
        width: 576px;

        position: absolute;
        top: 224px;
        z-index: -3;
    
        display: flex;
        justify-content: center;
    }

    #tv-buttons {
        position: absolute;
        width: calc(-5.4vw + 366px);
        top: 467px;
        right: calc(55.1vw - 306px);
    
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        z-index: 2;
    }

    #tv-buttons button {
        border: none;
        padding: 23px;
        margin-right: 11px;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
    }

    #but-a {
        margin-top: 31px;
        margin-left: 8px;
    }
    
    #but-b {
        margin-top: 29px;
        margin-left: 13px;
    }
    
    #but-c {
        margin-top: 20px;
        margin-left: 6px;
    }
    
    #but-d {
        margin-top: 13px;
        margin-left: 7px;
    }
    
    #but-e {
        margin-top: 3px;
        margin-left: 6px;
    }

    #tv-text {
        position: absolute;
        width: 576px;
        top: 605px;
    
        cursor: pointer;
    
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    #sound-popup {
        position: absolute;
        width: calc(5vw + 60px);
        left: calc(6vw - 20px);
        top: 40px;
    }
    #sound-popup img {
        width: 100%;
    }
}




@media (max-width: 720px) {
    #tv {
        width: max(80%, 300px);
        position: absolute;
        z-index: -1;
    }

    #tv-display-box {
        width: max(80vw, 300px);
        position: absolute;
        top: max(27.77vw, 120px);
        z-index: -2;
    
        display: flex;
        justify-content: center;
    }

    #staticbox {
        width: max(80vw, 300px);
        position: absolute;
        top: max(calc(28.57vw + 18.57px), 130px);
        z-index: -3;
    
        display: flex;
        justify-content: center;
    }

    #tv-buttons {
        position: absolute;
        width: max(calc(65.8vw - 146.7px), 100px);
        top: max(calc(65.5vw - 4.7px), 241px);
        right: min(calc(155.7px - 8.98vw), 122px);
    
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
        z-index: 2;
    }

    #tv-buttons button {
        border: none;
        padding: max(calc(2.9vw + 2px), 13px);
        margin-right: max(calc(2vw - 3.6px), 4px);
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
    }

    #but-a {
        margin-top: 31px;
        margin-left: 8px;
    }
    
    #but-b {
        margin-top: 29px;
        margin-left: max(calc(1.7vw + 0.48px), 7px);
    }
    
    #but-c {
        margin-top: min(calc(24px - 0.58vw), 22px);
        margin-left: max(calc(0.87vw - 0.26px), 3px);
    }
    
    #but-d {
        margin-top: max(calc(1.16vw + 8.65px), 17px);
        margin-left: max(calc(1.16vw - 1.35px), 3px);
    }
    
    #but-e {
        margin-top: 12px;
        margin-left: max(calc(0.87vw - 0.26px), 3px);
    }

    #tv-text {
        position: absolute;
        width: max(calc(77.1vw + 20.87px), 310px);
        top: max(calc(81.1vw + 20.65px), 325px);
    
        cursor: pointer;
    
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    #sound-popup {
        position: absolute;
        width: calc(5vw + 60px);
        left: calc(50vw - 2.5vw - 30px);
        top: 4vw;
    }
    #sound-popup img {
        width: 100%;
    }


}

@media (min-width: 600px) {
    @media (max-height: 680px) {
        #television-full {
            transform: scale(0.8);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(-30px);
        }
    }
    
    @media (max-height: 545px) {
        #television-full {
            transform: scale(0.6);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(-30px);
        }
    }
    
    @media (max-height: 420px) {
        #television-full {
            transform: scale(0.5);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(-30px);
        }
    }
}

@media (max-width: 600px) {
    #tv, #tv-display-box, #staticbox, #tv-buttons, #tv-text {
        transform: translateY(15vh);
    }
    #soundpopup {
        transform: translateY(2vh);
    }
    @media (max-height: 680px) {
        #television-full {
            transform: scale(0.8);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(10vh);
        }
    }
    
    @media (max-height: 545px) {
        #television-full {
            transform: scale(0.6);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(8vh);
        }

    }
    
    @media (max-height: 420px) {
        #television-full {
            transform: scale(0.5);
        }
        #tv-display-box, #staticbox, #tv-buttons, #tv-text {
            transform: translateY(6vh);
        }

    }
}



@media (max-width: 375px) {
    #tv-buttons {
        right: calc(49.8182vw - 64.8px);
    }
}





#tv-display {
    width: 80%;
}

#static {
    width: 84%;
}

#abt-text {
    width: 15%;
    height: fit-content;
}

#bc-text {
    width: 12%;
    height: fit-content;
}

#lyr-text {
    width: 12%;
    height: fit-content;
}

#new-text {
    width: 12%;
    height: fit-content;
}

#mor-text {
    width: 13%;
    height: fit-content;
}