@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

*{
    box-sizing: border-box;
}

body
{
    background-color: black;
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'lato', sans-serif;
}
.seat
{
    background-color: #222422;
    height: 12px;
    width: 15px;
    margin: 3px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.row
{
    display: flex;
}
.movie-container
{
    margin: 20px 0;
}
.movie-container select
{
background-color: #fff;
border: 0;
border-radius: 5px;
font-size: 14PX;
margin-left: 10PX;
padding: 5PX 15PX 5PX 15px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.seat.selected
{
background-color: aqua;
}
.seat.reserved
{
    background-color: red;
}
.seat
{
    background-color: aliceblue;
}
.seat:nth-of-type(2)
{
    margin-right: 18px;
}
.seat:nth-last-of-type(2)
{
    margin-left: 18px;
}
.seat:not(.reserved):hover
{
    cursor: pointer;
    transform: scale(1.2);
}
.showcase .seat:not(.reserved):hover
{
    cursor: pointer;
    transform: scale(1);
}
.showcase 
{
    background-color: rgb(0, 0, 0, 0.1);
    display: flex;
    list-style-type: none;
    padding: 5px 10px;
    border-radius: 5px;
    color: #777;
    justify-content: space-between;
}
.showcase li
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 10px;
}
.showcase li small
{
    margin-left: 10px;
}
.screen
{
    background-color: #fff;
    height: 70px;
    width: 100%;
    margin: 15px 0;
    transform: rotateX(-45deg);
    box-shadow: 0 3px 10px rgba(255, 255, 255, 0.75);
}
.container
{
    perspective: 1000px;
    margin-bottom: 30px;
}
p.text
{
    margin: 5px 0;
}
p.text span
{
    color: aqua;
}