body {
    background-color: lightblue;
}

h1 {
    color: darkblue;
}
.content-container {
    /* background-color: orange; */
    display: flex;
}
.site-text {
    /* display: inline-block; */
    /* background-color: hotpink; */
    width: 40%;
    top: 0;
}
.site-photo {
    /* display: inline-block; */
    width: 60%;
    /* background-color: aliceblue; */
}

.site-photo img {
    max-width: 70%;
    float: right;
    margin-right: 20%;
}

.portfolio {
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
}

.remote-box {
    width: 15%;
}

.tv-box {
    display: grid;
    position: absolute;
    left: 15%;
    top:-22%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    place-items: center;

}

.tv-wrapper {
    position: relative;
    width: 85vw;
    aspect-ratio: 1523 / 1157;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;

    place-items: center;
}

.tv {
    position: relative;
    width: 85vw;
    border-radius: 20px;
    grid-area: 1 / 1;
    z-index: 2;
    pointer-events: none; /* Allows clicks to pass through */

}

.screen {
    position: relative;
    width: 68vw;
    height: 100vh;
    border-radius: 20px;
    left: -8em;
    bottom: -2.5em; 
    grid-area: 1 / 1;

}