* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
    color: white;
    font-family: "Tiny5", sans-serif;
}

li {
    list-style: none;
}

/* layout */
.tabla {
    display: grid;
    grid-template-columns: 375px 1fr 500px;
    height: 100vh;
}

.col {
    padding: 50px;
}
.col .izquierda,
.col .derecha {
background: black;
}


.col.medio {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* clickable items */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* popup window */
.popup {
    position: absolute;
    position-area: center;
    width: 379px;
    height: 261px;
    background: black;
}

.popup img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.popup .b,.c,.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o,.p,.q,.r,.s,.t,.u,.v,.w{
    position: absolute;
    left: 0;
    width: 100%;
}
.popup .b {
    top: 162px;
}

.popup .c {
    top: 159px;
}
.popup .d {
    top: 156px;
}.popup .e {
    top: 153px;
}
.popup .f {
    top: 150px;
}
.popup .g {
    top: 147px;
}
.popup .h {
    top: 144px;
}
.popup .i {
    top: 141px;
}
.popup .j {
    top: 138px;
}
.popup .k {
    top: 135px;
}
.popup .l {
    top: 132px;
}
.popup .m {
    top: 129px;
}
.popup .n {
    top: 126px;
}
.popup .o {
    top: 123px;
}
.popup .p {
    top: 120px;
}
.popup .q {
    top: 117px;
}
.popup .r {
    top: 114px;
}
.popup .s {
    top: 111px;
}
.popup .t {
    top: 108px;
}
.popup .u {
    top: 105px;
}
.popup .v {
    top: 102px;
}
.popup .w {
    top: 99px;
}

.screen{
    position: absolute;
    position-area: center;
    width: 500px;
    background: black;
    padding-bottom: 600px;
}
.screen img{
    width: 100%;
    display: block;
}

.screen button{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.open {
    position: absolute;
    position-area: center;
    width: 500px;
    background: black;
    padding-bottom: 378px;
}


footer{
    display: block;
    text-align: center;
}