:root {
    --viewport-width: 972px;    
}

body {
    font-family: 'Roboto Mono';
    background-color: black;
}

.main {
    position: relative;
    height: 850px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

div {
    box-sizing: border-box;
    cursor: default;
}

.viewport {
    width: var(--viewport-width);
    height: var(--viewport-height);    
    border: 2px solid grey;    
    position: relative;
    overflow: hidden;
    flex-shrink: 1;
}

.viewport .image {
    width: var(--viewport-width);
    background-color:grey;
    border-radius: 5px;
}

.viewport .exit {
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 25px;
    line-height: 46px;
    text-align: center;
    background-color: rgba(220,0,0,0.9);
    border: 2px solid black;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
}

.viewport .exit.disabled {
    display: none;
}

.viewport .exit.top {
    top: 10px;
}

.viewport .exit.bottom {
    bottom: 10px;
}

.viewport .exit.left {
    left: 10px;
}

.viewport .exit.right {
    right: 10px;
}

.viewport .exit.center {
    left: 50%;
    transform: translateX(-50%);
}

.viewport .exit.middle {
    top: 50%;
    transform: translateY(-50%);
}

.top-bar {
    flex: none;
}
.room-title {
    border: 2px solid grey;
    border-bottom: none;
    width: calc(var(--viewport-width) - 200px);
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px;
    background-color: grey;
    display: inline-block;
    vertical-align: middle;
}

.room-type {
    border: 2px solid grey;
    border-bottom: none;
    width: 200px;
    font-size: 20px;
    padding: 4px;
    background-color: grey;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}

.room-description {
    min-height: 200px;
    border: 2px solid grey;
    border-top: none;
    width: var(--viewport-width);
    font-size: 20px;
    color: #eee;
    padding: 4px;
    background-color: black;
    flex: none;
}