body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    align-content: center;
    cursor: url("./img/cursor.png") 0 0, auto;
}

body,
button,
input,
iframe {
    cursor: url("./img/cursor.png"), auto;
}

.bg {
    background-image: url(./img/background.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tv {

    width: min(90vw, calc(90vh * 16 / 10));
    aspect-ratio: 16 / 10;

    position: relative;
}



.tv .frame {
    border-radius: 10px;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;
}

.tv .birds {
    position: absolute;

    transform: scale(0.6);

    right: 65%;
    bottom: 40%;

    z-index: 4;
    display: none;
}

.tv .screen {
    position: absolute;
    z-index: 1;

    right: 18%;
    bottom: 13%;
    width: 74%;
    height: 85%;
}

.tv .loading {
    position: absolute;
    z-index: 1;

    right: 18%;
    bottom: 13%;
    width: 74%;
    height: 85%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url(./img/loading-bg.jpg);
}

#loading-img {
    position: absolute;
}

.tv .screen iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.tv .url-container {
    position: absolute;
    z-index: 3;

    left: 5%;
    bottom: 5%;
    width: 28%;
    height: 8%;

    align-content: center;
}

.tv .url-container input {
    background-color: #f0f1e2;
    border: #583B27 solid 2px;
    border-radius: 4px;
    padding: 6px 8px;
    margin-right: 4px;
    width: 70%;
    font-family: "Courier New", monospace;
}

.tv .url-container button {
    background-color: #f0f1e2;
    border: #583B27 solid 2px;
    border-radius: 4px;
    padding: 6px 8px;
    margin-left: 4px;
    font-family: "Courier New", monospace;
    transition: 0.3s ease;
}

.tv .url-container button:hover {
    background-color: #583B27;
    color: #f0f1e2;
    cursor: pointer;
    border: #583B27 solid 2px;
}

.tv .url-container button:active {
    background-color: #382519;
    color: #f0f1e2;
    cursor: pointer;
    border: #3e291b solid 2px;
    transform: scale(0.9);
}

.tv .sound-button {
    position: absolute;
    z-index: 3;

    left: 88.8%;
    top: 73%;
    width: 5%;
    height: 8.5%;
    rotate: 20deg;

    border-radius: 40px;
    border: none;

    cursor: pointer;

    background-color: transparent;
    background-image: url(./img/sound-btn.png);
    background-size: cover;
    background-position: center;
}

.tv .sound-doodle {
    position: absolute;
    z-index: 3;

    left: 82.8%;
    top: 84%;

    width: 10%;
    height: 18.5%;
    rotate: 25deg;

    opacity: 0.9;
}

.tv .play-button {
    position: absolute;
    z-index: 3;

    left: 65%;
    bottom: 5%;
    width: 4.3%;
    height: 6.5%;

    border-radius: 40px;
    border: none;

    box-shadow: -1px 4px 8px 5px rgba(87, 72, 54, 0.75);

    cursor: pointer;

    background-color: transparent;
    background-image: url(./img/play-btn.png);
    background-size: cover;
    background-position: center;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.tv .play-button:hover {
    box-shadow: -1px 4px 8px 2px rgba(87, 72, 54, 0.75);
    animation: spin 5s linear infinite;
}

.tv .tool-buttons {
    position: absolute;
    z-index: 3;

    display: flex;
    gap: 8px;
    width: 3.6%;

    left: 50.5%;
    bottom: 7%;
}


.tv .tool-buttons .front {
    display: flex;
    justify-content: center;
    padding: 3.5px 0px;
    border: none;
    border-radius: 2px;
    font-size: 1.25rem;
    max-height: 17px;
    max-width: 100%;
    background-color: hsl(31, 37%, 70%);
     background-image:
        radial-gradient(rgba(80, 60, 40, 0.08) 1px, transparent 2px),
        radial-gradient(rgba(80, 60, 40, 0.05) 1px, transparent 2px);

    background-size: 4px 4px, 7px 7px;
    background-position: 0 0, 2px 3px;
        box-shadow: -4px 3px 2px 3px rgb(53 28 17 / 75%);
    color: white;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}

.tv .tool-buttons .front:hover {
    box-shadow: -3px 2px 2px 2px rgb(53 28 17 / 75%);
      transform: translate(0, 0.025em);
}

.tv .tool-buttons .front:active {
      box-shadow: -2px 1px 3px 1px rgb(53 28 17 / 75%);
transform: translate(0em, 0.1em);
}

.tv .gif {
    position: absolute;
    z-index: 3;

    left: 86.7%;
    bottom: 49%;
    width: 20.3%;
    height: 6.5%;
}


.tv .dvd-container {
    position: absolute;
    z-index: 3;

    width: 8.5%;
    height: 32%;
    left: 87%;
    top: 8%;
}

.tv .dvd-container:hover {
    cursor: pointer;
}

.tv .dvd-container .dvd1 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 0.5%;
}

.tv .dvd-container .dvd2 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 5%;
}

.tv .dvd-container .dvd3 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 10%;
}

.tv .dvd-container .dvd4 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 15%;
}

.tv .dvd-container .dvd5 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 19%;
}

.tv .dvd-container .dvd6 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 23%;
}

.tv .dvd-container .dvd7 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 28%;
}

.tv .dvd-container .dvd8 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 32%;
}

.tv .dvd-container .dvd9 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 36%;
}

.tv .dvd-container .dvd10 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 41%;
}

.tv .dvd-container .dvd11 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 45%;
}

.tv .dvd-container .dvd12 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 50%;
}

.tv .dvd-container .dvd13 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 54%;
}

.tv .dvd-container .dvd14 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 59%;
}

.tv .dvd-container .dvd15 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 63%;
}

.tv .dvd-container .dvd16 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 67%;
}

.tv .dvd-container .dvd17 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 71%;
}

.tv .dvd-container .dvd18 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 76%;
}

.tv .dvd-container .dvd19 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 80%;
}

.tv .dvd-container .dvd20 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 85%;
}

.tv .dvd-container .dvd21 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 89%;
}

.tv .dvd-container .dvd22 {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 3%;
    top: 94%;
}

.dvd-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;

    padding: 2px 4px;
    background: #e7e5e0;
    font-size: 12px;

    z-index: 999;
}


.tv .dvd-container .casette {
    position: absolute;
    z-index: 4;
    width: 120%;
    height: 0%;
    top: 0.5%;

    pointer-events: none;

    transform: rotate(-5deg) scaleY(0.5);
    transform-origin: center bottom;

    transition:
        top 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.35s ease,
        transform 0.95s ease;
}

.tv .dvd-container .casette.open {
    width: 120%;
    height: 20%;
    transform: rotate(8deg) scaleY(1);
}

.tv .dvd-container .dvd1:hover,
.tv .dvd-container .dvd2:hover,
.tv .dvd-container .dvd3:hover,
.tv .dvd-container .dvd4:hover,
.tv .dvd-container .dvd5:hover,
.tv .dvd-container .dvd6:hover,
.tv .dvd-container .dvd7:hover,
.tv .dvd-container .dvd8:hover,
.tv .dvd-container .dvd9:hover,
.tv .dvd-container .dvd10:hover,
.tv .dvd-container .dvd11:hover,
.tv .dvd-container .dvd12:hover,
.tv .dvd-container .dvd13:hover,
.tv .dvd-container .dvd14:hover,
.tv .dvd-container .dvd15:hover,
.tv .dvd-container .dvd16:hover,
.tv .dvd-container .dvd17:hover,
.tv .dvd-container .dvd18:hover,
.tv .dvd-container .dvd19:hover,
.tv .dvd-container .dvd20:hover,
.tv .dvd-container .dvd21:hover,
.tv .dvd-container .dvd22:hover {
    height: 4%;
    border-radius: 2px;
    background-color: #43281440;
}