#main-game-container {
    height: 95vh; /* Make the main game take up almost the entire height of the window. */
}

header {
    display: flex;
    align-items: center; /* Centers child elements vertically. */
    padding: 15px 0;
}

#disconnect-reconnect-button {
    position: absolute; /* The goal message will not take this button into account, so it will be exactly centered. */
    margin-left: 2.5%;
    padding: 10px;
}

#goal-message {
    margin: auto; /* Centers the element horizontally. */
}

/* Elements that are invisible and only accessible to screen readers */
/* This code was shamelessly stolen from https://webaim.org/techniques/css/invisiblecontent/ */
.sr-only, .focus-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Links that are only visible when given keyboard focus */
.focus-only {
    color: inherit;
}

.focus-only:focus {
    position: static;
    width: auto;
    height: auto;
    /* The "left" property should be ignored now that position is static, but it's best to reset it just in case. */
    left: auto;
}

#locations-list {
    list-style-type: none;
    padding: 0;
    height: 65%;
    overflow-y: auto;
}

#locations-list li {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: default;
    /* Causes the list items to be laid out in a grid. */
    display: inline-block;
    /*
    Hides everything not within the bounds of the li.
    This prevents there from being big vertical gaps between rows, 
    as well as the desk li being out of alignment with the other lis.

    TODO: figure out how to make stuff outside the bounds of the li visible
    WITHOUT making big vertical gaps appear between rows.
    This way, item icons won't be clipped as they ascend upwards.
    */
    overflow-y: hidden;
    /* Allows for the outline around the button inside the li to be visible. */
    padding: 4px;
}

#locations-list button {
    /*
    Causes the clickable/focusable chest buttons to not look like buttons.
    They will just look like icons with text labels.
    */
    background: none;
    border: none;
    /*
    Allows the chest icon to take up the entire button.
    */
    padding: 0;
    /*
    Makes the button's height the same as the li containing it.
    */
    height: 100%;
}

#locations-list button:disabled {
    cursor: not-allowed;
}

li svg {
    /* Every image inside of a li will be no bigger than that li. */
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Allows the SVG to overlap with its label without sticking outside of the li. */
    position: relative;
    top: -25px;
}

/* div containing an SVG representing a sent item */
div.item-icon {
    width: 50%;
    height: 50%;
    position: relative;
    z-index: 1;
    top: -85px;
    left: 25%; /* Puts the div at the horizontal center of the chest */
    /* Animation to make the item SVG move upwards and fade away. */
    animation: move-up-fade 1s linear;
}

@keyframes move-up-fade {
    0% {
        top: -85px;
        opacity: 100%;
    }
    75% {
        opacity: 100%;
    }
    100% {
        top: -103px;
        opacity: 0%;
    }
}

#locations-list .clickable {
    cursor: pointer;
}

#locations-list .clickable:hover, #locations-list .clickable:focus {
    background-color: rgba(255, 255, 255, 33%);
    outline: 3px dashed #d1aeff;
}

/* Chest number labels */
.chest-label {
    position: relative; /* Allows the label and the image to overlap */
    top: 20px;
    z-index: 1;
    width: 100px;
    font-size: 16pt;
    font-weight: bold;
    cursor: inherit;
}

/* Key number labels */
.key-label {
    position: relative;
    top: -72.5px;
    z-index: 2;
    font-size: 11pt;
    font-weight: bold;
    cursor: inherit;
}