html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
    --fixed-header-height: 135px;
    --fixed-footer-height: 135px;
    --fixed-icon-size: 115px;
}

#list {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

#list div.list-header {
    height: var(--fixed-header-height);
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 40px;
    background: #f7dac5;
    border-bottom-style: solid;
    border-bottom-width: 12px;
    border-bottom-color: #c4a987;
}

#list div.list-header div.list-viewers {
    display: flex;
    justify-content: center;
    align-items: center;
}

#list div.list-header div.list-viewers img.viewers-icon {
    height: var(--fixed-icon-size);
    text-align: center;
    width: 100%;
}

#list div.list-header div.list-time {
    display: flex;
    justify-content: center;
    align-items: center;
}

#list div.list-header div.list-time img.time-icon {
    height: var(--fixed-icon-size);
    text-align: center;
    width: 100%;
}

#list div.list-container {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: auto;
}

#list div.list-container div.list-contents {
    display: grid;
    grid-gap: 10px;
}

#list div.list-container div.show {
    background: #e0ebf5;
    cursor: pointer;
}

#list div.list-container div.show div.show-name {
    font-size: 40pt;
}

#list div.list-container div.show div.show-details {
    font-size: 24pt;
}

#list div.list-container div.add-new {
    margin-bottom: 10px;
}

#new {
    width: 100%;
    font-size: 24pt;
}

#list div.list-footer {
    height: var(--fixed-footer-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7dac5;
    border-top-style: solid;
    border-top-width: 12px;
    border-top-color: #c4a987;
}

#list div.list-footer img.status-icon {
    height: var(--fixed-icon-size);
    text-align: center;
    width: 100%;
}

img.selected {
    filter: invert(35%) sepia(96%) saturate(3205%) hue-rotate(200deg) brightness(102%) contrast(101%) drop-shadow(0px 0px 3px rgba(350, 300, 300, 0.8));
}

img:hover {
    cursor: pointer;
}